倒计时

来源：互联网发布：golang sleep 编辑：程序博客网时间：2024/06/06 19:32

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>JS图片倒计时效果</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/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;
}
</style>
</head>

<body>
<div class="box">
<span>距离2015年国庆节还剩：</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>

<script type="text/javascript">
$(function() {
show_time();
});

function show_time() {
var time_start = new Date().getTime(); //设定当前时间
var time_end = new Date("2017/11/16 13:36: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 = "0" + int_day;
}
if(int_day < 0) {
int_day = 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);
}
</script>
</body>

</html>

阅读全文

0 0