<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<script src="jquery.min.js"></script>
<style>
div.box{
1200px;
padding:20px;
margin:20px;
border:1px solid #c00;
border-radius: 5px
}
div.box>span{
color:#999;
text-align: center;
font-size: 2em;
}
div.content{
1160px;
margin:10px 0;
padding:20px;
border:2px solid #666;
text-align: center;
}
input[type='text']{
45px;
height:35px;
padding:5px 10px;margin:5px 0;
border:1px solid #c00;
text-align: center;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="box">
<span>距离2018年元旦还剩：</span><br>
<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>
function show_time(){
var time_start = new Date().getTime(); //设定当前时间
var time_end = new Date("2018/01/01 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);
}
setInterval("show_time()",1000);
</script>
</body>
</html>