jquery 时钟
以下是一个使用 jQuery 实现实时时钟的完整方案，包含动态更新时间和自定义样式的方法：
基础时钟实现
创建 HTML 结构并引入 jQuery：
<div id="clock"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>核心 jQuery 代码：
function updateClock() {
var now = new Date();
var hours = now.getHours().toString().padStart(2, '0');
var minutes = now.getMinutes().toString().padStart(2, '0');
var seconds = now.getSeconds().toString().padStart(2, '0');
$('#clock').text(hours + ':' + minutes + ':' + seconds);
}
setInterval(updateClock, 1000);
updateClock(); // 立即执行一次避免初始空白样式美化方案
为时钟添加 CSS 样式：
#clock {
font-family: 'Arial', sans-serif;
font-size: 3em;
color: #333;
text-align: center;
padding: 20px;
background: #f5f5f5;
border-radius: 10px;
display: inline-block;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}高级功能扩展
添加日期显示：
function updateFullDateTime() {
var now = new Date();
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var dateStr = now.toLocaleDateString(undefined, options);
$('#date').text(dateStr);
updateClock(); // 复用之前的时钟函数
}
setInterval(updateFullDateTime, 1000);动画效果增强
使用 jQuery 动画实现刷新效果：
function animateClock() {
$('#clock')
.fadeOut(100)
.fadeIn(100);
}
setInterval(animateClock, 1000);时区处理方案
显示不同时区时间：
function showTimezoneTime(zone) {
var options = {
timeZone: zone,
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
};
var timeStr = new Date().toLocaleTimeString([], options);
$('#timezone-clock').text(zone + ': ' + timeStr);
}响应式设计
通过 CSS 媒体查询适配不同设备：
@media (max-width: 600px) {
#clock {
font-size: 2em;
padding: 10px;
}
}这些方法可以根据具体需求组合使用，构建出功能完善且视觉美观的 jQuery 时钟应用。
