脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS案例之3――倒计时，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
源代码如下：
复制代码
2 <html>
3 <head>
4 <;meta http-equiv="Content-type" Content="text/html; charset=utf-8;">
5 <tITle> JS实现倒计时 </title>
6 <meta name="author" content="rainna" />
7 <meta name="keywords" content="rainna's js lib" />
8 <meta name="description" content="JS实现倒计时" />
9 <style>
10 *{margin:0;padding:0;}
11
12 .m-time{width:500px;margin:100px auto;}
13 .m-time .BTn,.m-time .btn2{display:block;width:200px;height:40px;margin:10px 0;background:#B4D174;border-radius:5px;color:#fff;text-decoration:none;text-align:center;line-height:40px;}
14 .m-time .btn2{opacity:.3;}
15 .m-time span{font-weight:bold;color:#f00;}
16 </style>
17 </head>
18 <body>
19 <p class="m-time">
20 <p>请输入倒计时时间:<input type="text" id="timeIpt"/></p>
21 <a href="" class="btn" id="sendBtn">发送</a>
22 <p>剩余<span id="leftTime"></span>秒</p>
23 </p>
24
25 <script>
26 VAR timer = function(){
27 var setTime = function(){
28 var self = this;
29 if(!(self instanceof setTime)){
30 return new setTime();
31 }
32 self.sendBtn = document.getElementById('sendBtn'); //发送按钮
33 self.leftTime = document.getElementById('leftTime'); //显示剩余时间
34 self.status = true; //当为true时，发送按钮可点击
35 };
36 setTime.PRototype = {
37 constructor: setTime,
38 showTime: function(time){
39 var self = this;
40 if(!!self.timerId) clearTimeout(self.timerId);
41 self.timerId = setTimeout(function(){
42 self.showTime(time);
43 },1000)
44
45 self.leftTime.innerText = time;
46 self.sendBtn.classname = 'btn2';
47 self.status = false;
48 time--;
49
50 //倒计时结束
51 if(time < 0){
52 clearTimeout(self.timerId);
53 self.status = true;
54 self.sendBtn.className = 'btn';
55 }
56 },
57 init:function(){
58 var self = this;
59 self.sendBtn.onclick = function(event){
60 event.preventDefault();
61 if(self.status == true) self.showTime(document.getElementById('timeIpt').value);
62 }
63 }
64 }
65
66 return function(){
67 var st = new setTime();
68 st.init();
69 }
70 }();
71
72 timer();
73 </script>
74 </body>
75 </html>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ @L_777_2@，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JS案例之3――倒计时全部内容，希望文章能够帮你解决javascript代码实例教程-JS案例之3――倒计时所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。