zoukankan html css js c++ java

模拟时间倒计时

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 　　<head>
 4 　　　　<meta charset="UTF-8">
 5 　　　　<title>抢购倒计时</title>
 6 　　　　<style type="text/css">
 7 　　　　　　div{
 8 　　　　　　　　margin-top: 200px;
 9 　　　　　　　　margin-left: 700px; 
10 　　　　　　　　width: 150px;
11 　　　　　　　　height: 200px;
12 　　　　　　　　background-color: red;
13 　　　　　　　　color: white;
14 　　　　　　　　}
15 　　　　　　h1,h5,span{
16 　　　　　　　　text-align: center;
17 　　　　　　　　}
18 　　　　</style>
19 
20 　　</head>
21 　　<body>
22 　　　　<div>
23 　　　　　　<br/>
24 　　　　　　<h1>秒杀</h1>
25 　　　　　　<h5>本场距离结束还剩</h5>
26 　　　　　　&nbsp&nbsp &nbsp&nbsp
27 　　　　　　<span id="hour1">00:</span><span id="minute1">13:</span><span id="second1">00</span>
28 　　　　</div>
29 　　　　<input type="button" onclick="start()" value="开始">
30 　　　　<input type="button" onclick="stop()" value="停止">
31 　　　　<script type="text/javascript">
32 　　　　　　var hours = document.getElementById("hour1");
33 　　　　　　var minutes = document.getElementById("minute1");
34 　　　　　　var seconds = document.getElementById("second1");
35 　　　　　　var hour = 0;//设置小时
36 　　　　　　var minute = 13;//设置分钟
37 　　　　　　var second = 0;//设置秒数
38 　　　　　　var myInterval;//执行函数
39 　　　　//myInterval = setInterval(gogo,1000);
40 　　　　//开始函数
41 　　　　function start()
42 　　　　{
43 　　　　　　myInterval = setInterval(gogo,1000);
44 　　　　}
45 　　　　//暂停函数
46 　　　　function stop()
47 　　　　{
48 　　　　　　clearInterval(myInterval);
49 　　　　}
50 
51 　　　　//时间过一秒
52 　　　　function gogo()
53 　　　　{
54 　　　　　　var zero=""; //时前边的符号,若小于10加个0
55 　　　　　　var fir =":"; //分前边的符号默认"：",若小于10加个0
56 　　　　　　var sec =":"; //秒前边的符号默认"："若小于10加个0
57 
58 　　　　　　hours.innerHTML = hour+fir;
59 　　　　　　minutes.innerHTML = minute+sec;
60 　　　　　　seconds.innerHTML = second;
61 　　　　　　if(second == 0 && minute == 0 && hour==0)
62 　　　　　　{
63 　　　　　　　　alert("秒杀完毕,请下次抢购！");
64 　　　　　　　　clearInterval(myInterval);
65 　　　　　　}else if(second == 0 && minute == 0)
66 　　　　　　{
67 　　　　　　　　hour--;
68 　　　　　　　　minute = 59;
69 　　　　　　　　second = 59;
70 　　　　　　}else if(second == 0 && minute !=0)
71 　　　　　　{
72 　　　　　　　　minute--;
73 　　　　　　　　second = 59;
74 　　　　　　}else 
75 　　　　　　{
76 　　　　　　　　second--;
77 　　　　　　　　// alert(second1);
78 　　　　　　}
79 
80 　　　　　　if(hour<10)
81 　　　　　　{
82 　　　　　　　　zero="0";
83 　　　　　　}
84 　　　　　　if(minute<10)
85 　　　　　　{
86 　　　　　　　　fir=":0";
87 　　　　　　}    
88 　　　　　　if(second<10)
89 　　　　　　{
90 　　　　　　　　sec=":0";
91 　　　　　　}
92 
93 　　　　　　hours.innerHTML = zero+hour+fir;
94 　　　　　　minutes.innerHTML = minute+sec;
95 　　　　　　seconds.innerHTML = second;
96 　　　　}
97 　　　　</script>
98 　　</body>
99 </html>

查看全文

相关阅读:
用jquery实现手风琴效果
 网易轻博客特点
 用display做导航
 小结
 有序列表的显示
 水仙花
 相识多少天
 关于javascript中this的运用
 BFC
八月第三周

原文地址：https://www.cnblogs.com/zou-zou/p/8569968.html