js实现5秒倒计时重新发送短信功能


Posted in Javascript onFebruary 05, 2017

本文实例讲述了js实现倒计时重新发送短信验证码功能的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js-手机发送短信倒计时</title>
 <style>
  button{
   width: 100px;
   height: 30px;
   border: none;
  }
  input{
   outline: none;
  }
 </style>
 <script> 
  window.onload = function(){
   function $(id){ return document.getElementById(id); } 
   $('btn').onclick = function(){
    clearInterval(timer); //清除计时器 
    var that = this;
    that.disabled = true;
    var count = 5;
    var timer = setInterval(function(){
     if(count>0){
      count--;
      that.innerHTML = "剩余时间"+ count +"s";
     }else{
      that.innerHTML ="重新发送短信";
      that.disabled = false;
      clearInterval(timer); //清除计时器
     }
    },1000);
   }
  }
 </script>
</head>
<body>
 <div class="box">
  <input type="text" id="txt">
  <button id="btn" >点击发送短信</button>
 </div>
</body>
</html>

或者使用setTimeout来模拟,一般情况下,还是推荐使用setTimeout,更安全一些。当使用setInterval(fn,1000)时,程序是间隔1s执行一次,但是每次程序执行是需要3s,那么就要等程序执行完才能执行下一次,即实际间隔时间为(间隔时间和程序执行时间两者的最大值)。而setTimeout(fn,1000),代表的是,延迟1s再执行程序,且仅执行一次。每次程序执行是需要3s,所以实际时间为 1s+3s=4s。可以使用setTimeout递归调用来模拟setInterval。

<script> 
  window.onload = function(){
   function $(id){ return document.getElementById(id); } 
   $('btn').onclick = function(){
    var that = this;
    that.disabled = true;
    var count = 5;
    var timer = setTimeout(fn,1000);
    function fn(){
     count--;
     if(count>0){
      that.innerHTML = "剩余时间"+ count +"s";
      setTimeout(fn,1000); 
     }else{
      that.innerHTML ="重新发送短信";
      that.disabled = false; 
     }
    }
   }
  }
 </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
浅析vue component 组件使用
Mar 06 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 #Javascript
js仿小米手机上下滑动效果
Feb 05 #Javascript
简单实现js无缝滚动效果
Feb 05 #Javascript
完美的js图片轮换效果
Feb 05 #Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 #Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 #Javascript
Vue.js学习示例分享
Feb 05 #Javascript
You might like
PHP函数microtime()用法与说明
2013/12/04 PHP
php命令行用法入门实例教程
2014/10/27 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
layui动态绑定事件的方法
2019/09/20 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python中使用logging模块打印log日志详解
2015/04/05 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
selenium如何定位span元素的实现
2021/01/13 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
美国探亲签证邀请信
2014/02/05 职场文书
培训班主持词
2014/03/28 职场文书
赔偿协议书范本
2014/04/15 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
四年级小学生评语
2014/12/26 职场文书
2016新年问候语大全
2015/11/11 职场文书
Python 全局空间和局部空间
2022/04/06 Python