Jquery实现倒计时

最新推荐文章于 2025-06-17 09:38:25 发布

原创最新推荐文章于 2025-06-17 09:38:25 发布 · 443 阅读

1 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何使用jQuery创建一个倒计时功能，具体到天、小时、分钟和秒。通过设定当前时间和目标时间，计算时间差并更新HTML元素显示剩余时间。倒计时以秒为单位递减，并确保小时、分钟和秒数在一位数时前面自动补零。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML 代码：

<div class="box">
<span>距离2017年圣诞节还剩：</span>
<div class="content">
<input type="text" id="time_d">天<input type="text" id="time_h">时<input type="text" id="time_m">分<input type="text" id="time_s">秒
</div>
</div>

CSS 样式：

div.box {
width:300px;
padding:20px;
margin:20px;
border:4px dashed #ccc;
}
div.box>span {
color:#999;
font-style:italic;
}
div.content {
width:250px;
margin:10px 0;
padding:20px;
border:2px solid #ff6666;
}
input[type='text'] {
width:45px;
height:35px;
padding:5px 10px;
margin:5px 0;
border:1px solid #ff9966;
}

JS 代码：

$(function() {
show_time();
});

function show_time() {
var time_start = new Date().getTime(); //设定当前时间
var time_end = new Date("2017/12/25 00:00:00").getTime(); //设定目标时间
// 计算时间差
var time_distance = time_end - time_start;
// 天
var int_day = Math.floor(time_distance / 86400000)
time_distance -= int_day * 86400000;
// 时
var int_hour = Math.floor(time_distance / 3600000)
time_distance -= int_hour * 3600000;
// 分
var int_minute = Math.floor(time_distance / 60000)
time_distance -= int_minute * 60000;
// 秒
var int_second = Math.floor(time_distance / 1000)
// 时分秒为单数时、前面加零
if (int_day < 10) {
int_day = "0" + int_day;
}
if (int_hour < 10) {
int_hour = "0" + int_hour;
}
if (int_minute < 10) {
int_minute = "0" + int_minute;
}
if (int_second < 10) {
int_second = "0" + int_second;
}
// 显示时间
$("#time_d").val(int_day);
$("#time_h").val(int_hour);
$("#time_m").val(int_minute);
$("#time_s").val(int_second);
// 设置定时器
setTimeout("show_time()", 1000);
}