浏览器界面倒计时,用js就实现,两种方式:
一:设置时长,进行倒计时
复制代码
1 <html>
2 <head>
3 <meta charset="UTF-8">
4 <title>简单时长倒计时</title>
5 <SCRIPT type="text/javascript">
6 var maxtime = 60 * 60; //一个小时,按秒计算,自己调整!
7 function CountDown() {
8 if (maxtime >= 0) {
9 minutes = Math.floor(maxtime / 60);
10 seconds = Math.floor(maxtime % 60);
11 msg = "距离结束还有" + minutes + "分" + seconds + "秒";
12 document.all["timer"].innerHTML = msg;
13 if (maxtime == 5 * 60)alert("还剩5分钟");
14 --maxtime;
15 } else{
16 clearInterval(timer);
17 alert("时间到,结束!");
18 }
19 }
20 timer = setInterval("CountDown()", 1000);
21 </SCRIPT>
22 </head>
23 <body>
24 <div id="timer" style="color:red"></div>
25 <div id="warring" style="color:red"></div>
26 </body>
27 </html>
二:设置时间戳,进行倒计时
1 <html>
2 <head>
3 <meta charset="UTF-8">
4 <title>js简单时分秒倒计时</title>
5 <script type="text/javascript">
6 function countTime() {
7 //获取当前时间
8 var date = new Date();
9 var now = date.getTime();
10 //设置截止时间
11 var str="2017/5/17 00:00:00";
12 var endDate = new Date(str);
13 var end = endDate.getTime();
14
15 //时间差
16 var leftTime = end-now;
17 //定义变量 d,h,m,s保存倒计时的时间
18 var d,h,m,s;
19 if (leftTime>=0) {
20 d = Math.floor(leftTime/1000/60/60/24);
21 h = Math.floor(leftTime/1000/60/60%24);
22 m = Math.floor(leftTime/1000/60%60);
23 s = Math.floor(leftTime/1000%60);
24 }
25 //将倒计时赋值到div中
26 document.getElementById("_d").innerHTML = d+"天";
27 document.getElementById("_h").innerHTML = h+"时";
28 document.getElementById("_m").innerHTML = m+"分";
29 document.getElementById("_s").innerHTML = s+"秒";
30 //递归每秒调用countTime方法,显示动态时间效果
31 setTimeout(countTime,1000);
32
33 }
34 </script>
35 </head >
36 <body onload="countTime()" >
37 <div>
38 <span id="_d">00</span>
39 <span id="_h">00</span>
40 <span id="_m">00</span>
41 <span id="_s">00</span>
42 </div>
43 </body>
44 </html>
javascript 实现倒计时
步骤:
1.获取目前时间并转换为毫秒数;
2.获取目标时间并转换为毫秒数;
3.获取目前时间与目标时间相差的毫秒数并转换为倒计时显示的天数、时、分、秒;
<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style>
body, p {
margin: 0;
padding: 0;
}
#time-box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 800px;
height: 100px;
background-color: #e40900;
color: #fff;
font-family: 微软雅黑;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: auto;
}
</style>
</head>
<body>
<p id="time-box"></p>
<script>
function countDown(y,m,d,h,min,s){
var time_box = document.getElementById("time-box"); //获取相应DOM节点
var time_now = new Date().getTime(); //获取1970至今的毫秒数
var time_target_str = y + "/" + m + "/" + d + " " + h + ":" + min + ":" + s; //将目标时间参数转换为字符串
var time_target = Date.parse(time_target_str); //获取1970至目标时间的毫秒数
var time_cut = time_target - time_now; //获取目标时间与目前时间相差的毫秒数
if (time_cut >= 0){
time_box.innerHTML = "距离2018年春节还有:" + Math.floor(time_cut/1000/60/60/24) + "天" + Math.floor(time_cut/1000/60/60%24) + "小时" + Math.floor(time_cut/1000/60%60) + "分" + Math.floor(time_cut/1000%60) + "秒"; //获取倒计时时间
}else{
time_box.innerHTML = "时光如白驹过隙,转瞬即逝!";
}
}
window.onload = setInterval("countDown(2018,2,16,0,0,0)",1000); //加载完成后,每隔1s调用一次倒计时函数
</script>
</body>
</html>