当前位置：首页 > 资讯 > 技术文档

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

时间：2021-04-08 09:18 编辑：来源：阅读：
扫一扫，手机访问

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

本文实例讲述了JS基于递归实现倒计时效果的方法。分享给大家供大家参考，具体如下： [b]效果[/b]： [img]http://files.jb51.net/file_images/article/201611/2016112690331101.png?201610269711[/img] [b]事件[/b]：

//发送验证码
$('.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("请求失败");
      }
    });
})

[b]点评[/b]：这里的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);
}

[b]点评[/b]：如果time不等于1，就继续调用，同时时间减去一秒。setTimeout也很精髓。直至time减到1为止，移除disabled并更改内容为‘发送验证码'。更多关于JavaScript相关内容可查看本站专题：《[url=http://www.1sucai.cn/Special/321.htm]JavaScript时间与日期操作技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/502.htm]JavaScript切换特效与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/472.htm]JavaScript查找算法技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/462.htm]JavaScript动画特效与技巧汇总[/url]》、《[url=http://www.1sucai.cn/Special/439.htm]JavaScript错误与调试技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/297.htm]JavaScript数据结构与算法技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/281.htm]JavaScript遍历算法与技巧总结[/url]》及《[url=http://www.1sucai.cn/Special/119.htm]JavaScript数学运算用法总结[/url]》希望本文所述对大家JavaScript程序设计有所帮助。

全部评论(0)

上一篇：Java中Json字符串直接转换为对象的方法(包括多层List集合)
下一篇：Jquery实现的table最后一行添加样式的代码

资讯排行榜
更多>>