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自定义的函数
Aug 05 Javascript
JavaScript confirm选择判断
Oct 18 Javascript
Jquery插件 easyUI属性汇总
Jan 19 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
如何使用 vue + d3 画一棵树
Dec 03 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
JS原形与原型链深入详解
May 09 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
利用js调用后台php进行数据处理原码
2006/10/09 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
求职简历自荐信
2013/10/20 职场文书
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
读书活动总结
2014/04/28 职场文书
农业项目投资意向书
2015/05/09 职场文书
正规借条模板
2015/05/26 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
基于Python实现射击小游戏的制作
2022/04/06 Python
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技