利用简单的数字累加循环模拟倒计时的效果，逻辑比较简单。如果大牛们有更好的办法欢迎补充。

这种效果经常用于在规定的时间做某件事。比如在1分钟之后重新发送验证码等。

案例演示：

源代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">

 <title> JS实现倒计时 </title>

 <meta name="author" content="rainna" />

 <meta name="keywords" content="rainna's js lib" />

 <meta name="description" content="JS实现倒计时" />

 <style>

 *{margin:0;padding:0;}

 .m-time{width:500px;margin:100px auto;}

 .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;}

 .m-time .btn2{opacity:.3;}

 .m-time span{font-weight:bold;color:#f00;}

 </style>

 </head>

 <body>

 <div class="m-time">

     <p>请输入倒计时时间:<input type="text" id="timeIpt"/></p>

     <a href="" class="btn" id="sendBtn">发送</a>

     <p>剩余<span id="leftTime"></span>秒</p>

 </div>

 <script>

 var timer = function(){

     var setTime = function(){

         var self = this;

         if(!(self instanceof setTime)){

             return new setTime();

         }

         self.sendBtn = document.getElementById('sendBtn');      //发送按钮

         self.leftTime = document.getElementById('leftTime');     //显示剩余时间

         self.status = true;              //当为true时，发送按钮可点击

     };

     setTime.prototype = {

         constructor: setTime,

         showTime: function(time){

             var self = this;

             if(!!self.timerId) clearTimeout(self.timerId);

             self.timerId = setTimeout(function(){

                 self.showTime(time);

             },1000)

             self.leftTime.innerText = time;

             self.sendBtn.className = 'btn2';

             self.status = false;

             time--;

             //倒计时结束

             if(time < 0){

                 clearTimeout(self.timerId);

                 self.status = true;

                 self.sendBtn.className = 'btn';

             }

         },

         init:function(){

             var self = this;

             self.sendBtn.onclick = function(event){

                 event.preventDefault();

                 if(self.status == true) self.showTime(document.getElementById('timeIpt').value);

             }

         }

     }

     return function(){

         var st = new setTime();

         st.init();

     }

 }();

 timer();

 </script>

 </body>

 </html>

JS案例之3——倒计时的更多相关文章

  1. 面试题之（js实现当年剩余时间倒计时程序）

    js实现当年剩余时间倒计时程序,请看代码: <script> function counter() { var date = new Date(); var year = date.get ...

  2. 原生 JS 实现手机验证码倒计时

    可以使用 pointer-events 来阻止元素成为鼠标事件的 target.html5 新增操作元素 class 类名的方式 classList. classList 方法 add(value): ...

  3. 第一个Vue.js案例

    第一个Vue.js案例 使用Vue有如下几步 引入文件头 加入数据输出框 创建Vue对象,定义数据 案例: <!DOCTYPE html> <html lang="en&q ...

  4. js案例之使用正则表达式进行验证数据正确性

    #js案例之使用正则表达式进行验证数据正确性 代码上传至 "GitHub" 样例: <tr> <td>密码:</td> <td> & ...

  5. Knockout.Js案例二Working With Lists And Collections

    案例一:Foreach绑定 通常,您要生成重复的UI元素,特别是当显示列表,用户可以添加和删除元素.KO.JS让你轻松,使用的数组和foreach绑定. 在接下来的几分钟,您将构建一个动态UI保留席位 ...

  6. Knockout.Js案例一Introduction

    </strong></p> <p>Last name: <strong data-bind="text:lastName ">tod ...

  7. JS根据服务器时间倒计时

    原文链接:http://caibaojian.com/daojishi-2.html //获取服务器时间 function getSevertime(){ var xmlHttp = new XMLH ...

  8. JS案例之7——瀑布流布局(2)

    这个例子与上一篇类似,唯一的区别是排序的方式有差别.上一篇是在高度最小的列里插入内容,这个案例是按顺序放置内容. 两种方法各有优缺点.第一种需要在图片内容加载完成的情况下有效.这个例子不需要在wind ...

  9. JS案例之5——移动端触屏滑动

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

随机推荐

  1. Apache执行Python脚本

    由于经常需要到服务器上执行些命令,有些命令懒得敲,就准备写点脚本直接浏览器调用就好了,比如这样: 因为线上有现成的Apache,就直接放它里面了,当然访问安全要设置,我似乎别的随笔里写了安全问题,这里 ...

  2. 理解加密算法（三）——创建CA机构，签发证书并开始TLS通信

    接理解加密算法(一)--加密算法分类.理解加密算法(二)--TLS/SSL 1 不安全的TCP通信 普通的TCP通信数据是明文传输的,所以存在数据泄露和被篡改的风险,我们可以写一段测试代码试验一下. ...

  3. docker for mac 学习记录

    docker基本命令 docker run -d -p 80:80 --name webserver nginx 运行容器并起别名 docker ps 展示目前启动的容器 docker ps -a 展 ...

  4. jquery学习（一）

    简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...

  5. Visual Studio Code——Angular2 Hello World 之 2.0

    最近看到一篇用Visual Studio Code开发Angular2的文章,也是一篇入门教程,地址为:使用Visual Studio Code開發Angular 2專案.这里按部就班的做了一遍,感觉 ...

  6. 数据库 DML、DDL、DCL区别 .

    总体解释: DML(data manipulation language): 它们是SELECT.UPDATE.INSERT.DELETE,就象它的名字一样,这4条命令是用来对数据库里的数据进行操作的 ...

  7. 使用HEXO快速建站

    先安好npm,请参照:http://max.cszi.com/archives/482 打开网站:https://hexo.io/   npm install hexo-cli -g hexo ini ...

  8. github入门到上传本地项目【网上资源整合】

    [在原文章的基础上,修改了描述的不够详细的地方,对内容进行了扩充,整合了网上的一些资料] [内容主要来自http://www.cnblogs.com/specter45/p/github.html#g ...

  9. swift 可选类型（optional）--- swift 入门

    一.思维导图 二.代码 //这样无形中就会让代码很丑陋 if x != nil && y != nil { print("x或y都不等于空") } print(&q ...

  10. 喜马拉雅音频下载器 V1.2 支持专辑批量下载 喜马拉雅mp3下载导出 喜马拉雅下载器

    出差一个星期回来看邮箱,发现好多网友评论说网站又更新了,老程序不能用了,有热心网友放出修改版的,我就不重复造车了..大家可以去这里下载 http://blog.csdn.net/suqingheang ...