JS基于递归实现倒计时效果的方法
更新时间：2016年11月26日 08:56:39 作者：牛逼的霍啸林
这篇文章主要介绍了JS基于递归实现倒计时效果的方法,结合实例形式分析了javascript基于递归算法实现倒计时功能的相关操作技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
本文为大家详细介绍下如何通过js实现等待指定时间后自动跳转或关闭当前页面的脚步代码，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
这篇文章主要介绍了Bootstrap 网站实例之单页营销网站的相关资料,本文给大家介绍的非常详细具有一定的参考借鉴价值，需要的朋友可以参考下2016-10-10
这篇文章主要介绍了详解webpack es6 to es5支持配置 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要为大家详细介绍了JavaScript实现电商平台商品细节图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
在本篇文章里我们给大家分享了关于JS中pop使用方法的实例内容，有兴趣的朋友们学习下。2019-01-01
数组扁平化指的是将一个多层嵌套的数组，处理成只有一层的数组，本文为大家整理了8个常用的JS实现数组扁平化的方法，希望对大家有所帮助2023-08-08
这篇文章主要给大家介绍了关于微信小程序使用Vant Weapp组件库的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
JavaScript可以获取浏览器提供的很多对象，并进行操作。下面通过本文给大家介绍JavaScript之浏览器对象的相关知识，一起看看吧2017-07-07
JS子父窗口互相操作取值赋值的方法介绍，需要的朋友可以参考一下2013-05-05
总所周知啊，身为一个合格的前端搬砖工，会编写并且添加一些基础的动画效果可谓是比较基础且轻车熟路的技能了。本文将教大家如何使用原生JS添加进场和退场动画，感兴趣的可以了解一下2022-10-10
最新评论