JS基于递归实现倒计时效果的方法


Posted in Javascript onNovember 26, 2016

本文实例讲述了JS基于递归实现倒计时效果的方法。分享给大家供大家参考,具体如下:

效果

JS基于递归实现倒计时效果的方法

事件

//发送验证码
$('.js-sms-code').click(function(){
    $(this).attr("disabled", "disabled").html("<span style='color:#666'><span id='countdown'>60</span>s 后再试</span>");
    countdown();
    var tel = $('#tel').val();
    $.ajax({
      url: "{sh::U('Home/sendSmscode')}",
      type:'POST',
      dataType:"json",
      data: {tel: tel},
      success: function() {
      },
      error: function() {
        $('.js-help-info').html("请求失败");
      }
    });
})

点评:这里的countdown方法就是妙处。

看代码:

function countdown() { // 递归
  setTimeout(function() {
    var time = $("#countdown").text();
    if (time == 1) {
      $('.js-sms-code').removeAttr("disabled");
      $('.js-sms-code').html("发送验证码");
    } else {
      $("#countdown").text(time - 1);
      countdown();
    }
  }, 1000);
}

点评:如果time不等于1,就继续调用,同时时间减去一秒。setTimeout也很精髓。直至time减到1为止,移除disabled并更改内容为‘发送验证码'。

更多关于JavaScript相关内容可查看本站专题:《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS打开新窗口的2种方式
Apr 18 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 #Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 #Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 #Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 #Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 #Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 #Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 #Javascript
You might like
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
PHP 断点续传实例详解
2017/11/11 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
Python 异常处理实例详解
2014/03/12 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
python三大神器之fabric使用教程
2019/06/10 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
详解python中的异常捕获
2020/12/15 Python
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
中西医专业毕业生职业规划书
2014/02/24 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
简短清晨问候语
2015/11/10 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
一文搞懂Java中的注解和反射
2022/06/21 Java/Android