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 事件处理程序介绍
Jun 27 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
详解React的回调渲染模式
Sep 10 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
解决微信内置浏览器返回上一页强制刷新问题方法
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日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
Python网络编程 Python套接字编程
2017/09/13 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
linux面试相关问题
2013/04/28 面试题
高分子材料与工程专业推荐信
2013/12/01 职场文书
商场端午节活动方案
2014/01/29 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
导游词之日月潭
2019/11/05 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
室外天线与收音机天线杆接合方法
2022/04/05 无线电
Java 写一个简单的图书管理系统
2022/04/26 Java/Android