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获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 Javascript
vue实现移动端返回顶部
Oct 12 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
Yii2框架实现注册和登录教程
2016/09/30 PHP
PHP中“=&gt;
2019/03/01 PHP
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
Python中的装饰器用法详解
2015/01/14 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
Python虚拟环境venv用法详解
2020/05/25 Python
python数据类型强制转换实例详解
2020/06/22 Python
Python 日期与时间转换的方法
2020/08/01 Python
利用python实现汉诺塔游戏
2021/03/01 Python
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
财政局个人年终总结
2015/03/03 职场文书
培训心得体会怎么写
2016/01/25 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python
关于MySQL中explain工具的使用
2023/05/08 MySQL