最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-27 20:29:19
文档

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

JS基于递归实现倒计时效果的方法:本文实例讲述了JS基于递归实现倒计时效果的方法。分享给大家供大家参考,具体如下:事件://发送验证码 $('.js-sms-code').click(function(){ $(this).attr("disabled", "disabled").html(
推荐度:
导读JS基于递归实现倒计时效果的方法:本文实例讲述了JS基于递归实现倒计时效果的方法。分享给大家供大家参考,具体如下:事件://发送验证码 $('.js-sms-code').click(function(){ $(this).attr("disabled", "disabled").html(


本文实例讲述了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并更改内容为‘发送验证码'。

文档

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

JS基于递归实现倒计时效果的方法:本文实例讲述了JS基于递归实现倒计时效果的方法。分享给大家供大家参考,具体如下:事件://发送验证码 $('.js-sms-code').click(function(){ $(this).attr("disabled", "disabled").html(
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top