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

这种效果经常用于在规定的时间做某件事。比如在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. 故障重现(内存篇2)，JAVA内存不足导致频繁回收和swap引起的性能问题

    背景起因: 记起以前的另一次也是关于内存的调优分享下   有个系统平时运行非常稳定运行(没经历过大并发考验),然而在一次活动后,人数并发一上来后,系统开始卡. 我按经验开始调优,在每个关键步骤的加入如 ...

  2. 用scikit-learn进行LDA降维

    在线性判别分析LDA原理总结中,我们对LDA降维的原理做了总结,这里我们就对scikit-learn中LDA的降维使用做一个总结. 1. 对scikit-learn中LDA类概述 在scikit-le ...

  3. C++ std::set

    std::set template < class T, // set::key_type/value_type class Compare = less<T>, // set::k ...

  4. requests的content与text导致lxml的解析问题

    title: requests的content与text导致lxml的解析问题 date: 2015-04-29 22:49:31 categories: 经验 tags: [Python,lxml, ...

  5. 转：聊聊mavenCenter和JCenter

    Gradle支持从maven中央仓库和JCenter上获取构件,那这两者有什么区别呢? maven中央仓库(http://repo1.maven.org/maven2/)是由Sonatype公司提供的 ...

  6. 关于.NET参数传递方式的思考

    年关将近,整个人已经没有了工作和写作的激情,估计这个时候很多人跟我差不多,该相亲的相亲,该聚会喝酒的聚会喝酒,总之就是没有了干活的心思(我有很多想法,但就是叫不动我的手脚,所以我只能看着别人在做我想做 ...

  7. 在vim中使用查找命令查找指定字符串

    要自当前光标位置向上搜索,请使用以下命令:         /pattern   Enter           其中,pattern   表示要搜索的特定字符序列.         要自当前光标位置 ...

  8. C# 用SoapUI调试WCF服务接口（WCF中包含用户名密码的验证）

    问题描述: 一般调试wcf程序可以直接建一个单元测试,直接调接口. 但是,这次,我还要测试在接口内的代码中看接收到的用户名密码是否正确,所以,单一的直接调用接口方法行不通, 然后就想办法通过soapU ...

  9. yaf的简单入门

    1.目录结构: 2.入口文件 入口文件是所有请求的入口,一般都借助于rewrite规则,把所有的请求都重定向到这个入口文件. 一个经典的入口文件  public/index.php 3.重写规则 需要 ...

  10. 用Swagger生成接口文档

    Swagger简介 在系统设计的时候,各个应用之间往往是通过接口进行交互的.因此接口的定义在整个团队中就变得尤为重要.我们可以把接口的规范用接口描述语言进行描述,然后Swagger可以根据我们定义的接 ...