js实现的倒计时按钮实例
更新时间：2015年06月24日 17:18:26 作者：第2015换个昵称
这篇文章主要介绍了js实现的倒计时按钮,实例分析了javascript倒计时效果的相关实现技巧,需要的朋友可以参考下
本文实例讲述了js实现的倒计时按钮。分享给大家供大家参考。具体分析如下：
效果图如下：
具体代码如下：
<span style="font-size: 14px;">
<input type="button" value="确定"id="rulesubmit" />
<scripttypescripttype="text/javascript">
var secs = 3;
var wait = secs * 1000;
var update = function(num,value){
if (num == (wait/1000)){
$("#rulesubmit").val("免费获取");
}
else{
printnr = (wait/1000) - num;
$("#rulesubmit").val("免费获取(" + printnr +")");
}
};
var timer = function(){
$("#rulesubmit").attr("disabled",false);
$("#rulesubmit").val("免费获取");
};
$(function(){
(function(){
function getValidateCode(){
$("#rulesubmit").val("免费获取(" + secs +")");
$("#rulesubmit").attr("disabled",true);
for (i = 1; i <= secs;i++){
window.setTimeout("update(" + i + ")",i*1000);
}
window.setTimeout("timer()",wait);
}
$("#rulesubmit").click(function(){
getValidateCode();
});
})();
//注意，我这里在测试的时候改成里匿名函数，其实不必这样做也可以实现
//getValidateCode()当作一个单独的函数，在$(function(){//点击按钮执行函数，即上面蓝色部分代码;});
});
</script></span>
这里只是一个小例子，在实际运用中，可能需要记录各种时间，考虑到页面刷新的变化，需要用cookie来进行数据存储等等！
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
作为前端，一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手，前端能做的太少。而且由于源码的暴露，攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的，本文的许多方法，用在其他方面也是大有作用。2021-05-05
这篇文章主要为大家详细介绍了原生JS实现呼吸轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要为大家详细介绍了JavaScript实现Tab栏切换特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了JavaScript this在函数中的指向及实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了利用JavaScript实现的十种排序算法，主要介绍了冒泡，选择，插入，希尔，归并，快速，堆排，计数，桶排和基数，有感兴趣的小伙伴可以参考阅读本文2023-05-05
js实现addClass,removeClass,hasClass的函数代码
js实现addClass,removeClass,hasClass的函数代码，需要的朋友可以参考下。2011-07-07
在前端开发的过程中,我们经常会遇到需要对于输入的字符串进行格式化处理,这篇文章主要给大家介绍了关于使用js去除字符串内所带有空格的三种方法,需要的朋友可以参考下2023-10-10
本文给大家分享的是个人对于12306的新的验证码系统的破解思路，仅仅是思路，还没进行实地验证，推荐给大家，抛砖引玉吧。2015-03-03
本文介绍了JavaScript中的this关键词指向，this是JavaScript的一个关键字，他是函数执行过程中，自动生成的一个内部对象，指当前的对象，只在当前函数内部使用，更多相关资料需要的小伙伴可以参考下面文章内容2022-05-05
这篇文章主要为大家详细介绍了微信小程序实现验证码倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
最新评论