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

这种效果经常用于在规定的时间做某件事。比如在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. webp图片实践之路

    最近,我们在项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中.传闻IOS10也将要支持webp,那么使用webp带来的性能提升将更加明显.估计在不久的将来,webp会成为标配. ...

  2. NodeJs之log4js

    log4js log4js是一个管理,记录日志的工具. 其实与morgan的作用类似. 安装 npm install -g log4js log4js的6个日志级别 分别是:trace(蓝色).deb ...

  3. ASP.NET Core MVC/WebAPi 模型绑定探索

    前言 相信一直关注我的园友都知道,我写的博文都没有特别枯燥理论性的东西,主要是当每开启一门新的技术之旅时,刚开始就直接去看底层实现原理,第一会感觉索然无味,第二也不明白到底为何要这样做,所以只有当你用 ...

  4. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

  5. SSH实战 · 唯唯乐购项目（中）

    用户模块 三:一级分类的查询 创建一级分类表并导入基本数据 CREATE TABLE `category` (   `cid` int(11) NOT NULL AUTO_INCREMENT,   ` ...

  6. 数据库的快照隔离级别（Snapshot Isolation）

    隔离级别定义事务处理数据读取操作的隔离程度,在SQL Server中,隔离级别只会影响读操作申请的共享锁(Shared Lock),而不会影响写操作申请的互斥锁(Exclusive Lock),隔离级 ...

  7. LeetCode[5] 最长的回文子串

    题目描述 Given a string S, find the longest palindromic substring in S. You may assume that the maximum ...

  8. 开始学nodejs——net模块

    net模块的组成部分 详见 http://nodejs.cn/api/net.html 下面整理出了整个net模块的知识结构,和各个事件.方法.属性的用法 net.Server类 net.Socket ...

  9. Linux常用指令指南，终端装逼利器

    最近搞了台Macbook Pro,就学习了一下Linux命令,在网上查了些资料,看了本书叫<快乐的 Linux 命令行>,里面涉及到了各个方面的命令. 在此将常用的整理出来,以备将来使用. ...

  10. 前端性能优化的另一种方式——HTTP2.0

    最近在读一本书叫<web性能权威指南>谷歌公司高性能团队核心成员的权威之作. 一直听说HTTP2.0,对此也仅仅是耳闻,没有具体研读过,这次正好有两个篇章,分别讲HTTP1.1和HTTP2 ...