1.html
<div class="box">
<span>距离活动结束还剩:</span>
<div class="content">
<input type="text" id="day_show">天<input type="text" id="hour_show">时<input type="text" id="minute_show">分<input type="text" id="second_show">秒
</div>
</div>
2.css
div.box{width:100%;padding:3px;margin:10px;}
div.box>span{color:#FB78AC;font-style:italic;font-size: 15pt;}
div.content{width:100%;margin:5px;padding:3px;}
input[type='text']{width:35px;height:35px;padding:5px 10px;margin:5px;border:1px solid #ffe5e5;}
3.js
<script type="text/javascript">
$(function(){
show_time();
});
function show_time(){
var time_start = new Date().getTime(); //设定当前时间
var time_end = new Date('{$finistime}').getTime(); //设定目标时间
// 计算时间差
var time_distance = time_end - time_start;
/*判断活动是否结束*/
if(time_distance<0){
int_day=0;
int_hour=0;
int_minute=0;
int_second=0;
}else{
// 天
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;
}
}
// 显示时间
$("#day_show").val(int_day);
$("#hour_show").val(int_hour);
$("#minute_show").val(int_minute);
$("#second_show").val(int_second);
// 设置定时器
setTimeout("show_time()",1000);
}
</script>