你是一个php程序员，需要写代码支持以下需求：访问http://open.iciba.com/dsapi/
并获取json内容
{"sid":"5556","tts":"https://staticedu-wps.cache.iciba.com/audio/8c5292b5287b38f2977994c46cdcf07f.mp3","content":"Genuine effort turns challenges into stepping stones for real growth.","note":"真诚的努力，能将阻碍转化为真正进步的垫脚石。","love":"0","translation":"新版每日一句","picture":"https://staticedu-wps.cache.iciba.com/image/86503ebcf5c2d5a03e0893ea3e0f1100.jpg","picture2":"https://staticedu-wps.cache.iciba.com/image/720872970bb5b6666f7f11c55cd95a03.png","caption":"词霸每日一句","dateline":"2025-04-10","s_pv":"0","sp_pv":"0","fenxiang_img":"https://staticedu-wps.cache.iciba.com/image/e5ff1a923a461f3efab4622ddfe4dfb9.png","picture3":"https://staticedu-wps.cache.iciba.com/image/4b4d1b8751740c7a4cf8672ff7418216.jpg","picture4":"https://staticedu-wps.cache.iciba.com/image/49d80adc4182bc48dd7307b06b4c18fa.jpg","tags":[]}，
解析以上json内容并进行显示，如有文字则显示文字内容，如有一张以上的图片，请区分好这多组图片显示位置并正确调用显示，显示的所有图片并且可以有下载图片功能，如果有mp3文件则做一个播放mp3文件的播放器，可以暂停和播放功能，最终代码需将页面进行美观设计，可以调用外部公共的js css。并给出完整代码。
<?php
// 获取日期参数（默认当前日期）
$selectedDate = $_GET['date'] ?? date('Y-m-d');
$apiUrl = 'http://open.iciba.com/dsapi/?date=' . urlencode($selectedDate);
// 获取API数据
$data = json_decode(file_get_contents($apiUrl), true);
if (json_last_error() !== JSON_ERROR_NONE) die('选你妹的未来日期，我只能告诉你数据加载失败');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>每日一句 - 中英文名句翻译</title>
<!-- Bootstrap 5 & Icons -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
:root {
--primary-color: #2c7be5;
--gradient-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
/* 日期选择器容器 */
.date-selector {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(5px);
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
border-radius: 12px;
padding: 1.5rem;
margin: 2rem auto;
max-width: 600px;
}
/* 增强日期输入样式 */
.date-input {
border: 2px solid var(--primary-color);
border-radius: 8px;
padding: 0.8rem;
font-size: 1.1rem;
transition: all 0.3s ease;
}
.date-input:focus {
box-shadow: 0 0 10px rgba(44, 123, 229, 0.25);
}
/* 主内容卡片 */
.main-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-top: 2rem;
}
/* 响应式优化 */
@media (max-width: 768px) {
.date-selector { margin: 1rem; }
.quote-text { font-size: 1.1rem; }
}
</style>
</head>
<body style="background: var(--gradient-bg); min-height: 100vh;">
<!-- 日期选择模块 -->
<div>
<form onsubmit="return handleDateSubmit(event)">
<div class="row g-3 align-items-center">
<div>
<input type="date"
id="datePicker"
class="form-control date-input"
value="<?= htmlspecialchars($selectedDate) ?>"
max="<?= date('Y-m-d') ?>"
required>
</div>
<div>
<button type="submit"
class="btn btn-primary w-100"
style="padding: 0.8rem; font-size: 1.1rem;">
<i class="bi bi-search"></i> 查询内容
</button>
</div>
</div>
</form>
</div>
<!-- 主内容区域 -->
<div>
<div class="main-card p-4 p-lg-5">
<!-- 标题 -->
<h1 class="text-center mb-4 display-5 fw-bold text-primary">
<?= htmlspecialchars($data['caption']) ?>
</h1>
<!-- 每日一句内容 -->
<div>
<p class="lead border-start border-3 border-primary ps-3">
<?= htmlspecialchars($data['content']) ?>
</p>
<p class="text-muted mt-3 fst-italic">
<?= htmlspecialchars($data['note']) ?>
</p>
</div>
<!-- 辅助信息 -->
<div class="d-flex justify-content-between text-muted mb-4">
<span><i class="bi bi-calendar"></i> <?= htmlspecialchars($data['dateline']) ?></span>
<span><i class="bi bi-translate"></i> <?= htmlspecialchars($data['translation']) ?></span>
</div>
<!-- 图片展示 -->
<div class="row g-3">
<?php foreach (['picture', 'picture2', 'picture3', 'picture4'] as $key): ?>
<?php if (!empty($data[$key])): ?>
<div class="col-6 col-md-3">
<div class="card h-100 shadow-sm hover-shadow">
<img src="<?= htmlspecialchars($data[$key]) ?>"
class="card-img-top object-fit-cover"
style="height: 180px">
</div>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
<!-- 音频播放器 -->
<?php if (!empty($data['tts'])): ?>
<div class="text-center mt-5">
<audio id="audioPlayer"
src="<?= htmlspecialchars($data['tts']) ?>"
preload="metadata"></audio>
<div>
<button class="btn btn-primary rounded-pill px-4 py-2">
<i class="bi bi-play-fill"></i> 播放音频
</button>
</div>
</div>
<?php endif; ?>
</div>
<!-- 脚本 -->
<script>
// 日期选择处理:ml-citation{ref="7" data="citationList"}
function handleDateSubmit(e) {
e.preventDefault()
const date = document.getElementById('datePicker').value
window.location.href = `?date=${encodeURIComponent(date)}`
}
// 音频状态管理:ml-citation{ref="1,5" data="citationList"}
class AudioController {
constructor() {
this.audio = document.getElementById('audioPlayer')
this.btn = document.querySelector('.audio-player button')
this.init()
}
init() {
this.audio.preload = 'metadata'
this.setupEventListeners()
}
setupEventListeners() {
this.audio.addEventListener('play', () => this.updateState())
this.audio.addEventListener('pause', () => this.updateState())
this.audio.addEventListener('timeupdate', () => this.updateState())
this.audio.addEventListener('error', () => this.handleError())
this.btn.addEventListener('click', () => this.togglePlay())
}
togglePlay() {
try {
this.audio.paused ? this.audio.play() : this.audio.pause()
} catch (error) {
console.error('播放控制错误:', error)
this.btn.innerHTML = `<i class="bi bi-exclamation-triangle"></i> 播放失败`
}
}
updateState() {
const icon = this.audio.paused ? 'play-fill' : 'pause-fill'
const text = this.audio.paused ? '继续播放' : '暂停播放'
this.btn.innerHTML = `<i class="bi bi-${icon}"></i> ${text}`
}
handleError() {
this.btn.disabled = true
this.btn.innerHTML = `<i class="bi bi-exclamation-octagon"></i> 音频加载失败`
}
}
// 初始化音频控制器
document.addEventListener('DOMContentLoaded', () => {
if(document.getElementById('audioPlayer')) {
new AudioController()
}
})
</script>
</body>
</html>推荐本站淘宝优惠价购买喜欢的宝贝:
本文链接：https://hqyman.cn/post/10356.html 非本站原创文章欢迎转载，原创文章需保留本站地址！
微信支付宝扫一扫，打赏作者吧～休息一下~~
萌ICP备20248119号
