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程序设计有所帮助。

相关文章

  • JavaScript实现页面实时显示当前时间的简单实例

    JavaScript实现页面实时显示当前时间的简单实例

    这篇文章介绍了页面实时显示当前时间的简单实例,有需要的朋友可以参考需要
    2013-07-07
  • javascript实现数字验证码的简单实例

    javascript实现数字验证码的简单实例

    本篇文章主要是对javascript实现数字验证码的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 200行HTML+JavaScript实现年会抽奖程序

    200行HTML+JavaScript实现年会抽奖程序

    这篇文章主要为大家详细介绍了HTML+JavaScript实现年会抽奖程序的200行代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • JavaScript Title、alt提示(Tips)实现源码解读

    JavaScript Title、alt提示(Tips)实现源码解读

    我们知道给某些HTML标签加上title属性后,这个标签对象在浏览的时候,鼠标移上去就会有一个小提示框出来,并显示title定义的内容。
    2010-12-12
  • JS生成不重复的随机数组的简单实例

    JS生成不重复的随机数组的简单实例

    下面小编就为大家带来一篇JS生成不重复的随机数组的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JavaScript 封装Ajax传递的数据代码

    JavaScript 封装Ajax传递的数据代码

    在使用Ajax传输数据时,少不了对传递的字符进行转码,我的实现方式是将需要传递的数据暂存到一js Bean中,将js Bean放到Array中,生成传输参数时对Array中的jsBean进行分解,得到相应属性信息并编码..
    2009-06-06
  • uni-app实现微信小程序长按拍视频功能

    uni-app实现微信小程序长按拍视频功能

    这篇文章主要为大家详细介绍了uni-app实现微信小程序长按拍视频功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • js实现YouKu的漂亮搜索框效果

    js实现YouKu的漂亮搜索框效果

    这篇文章主要介绍了js实现YouKu的漂亮搜索框效果的方法,通过javascript结合鼠标事件与页面样式实现漂亮的搜索框效果,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • javascript jquery对form元素的常见操作详解

    javascript jquery对form元素的常见操作详解

    下面小编就为大家带来一篇javascript jquery对form元素的常见操作详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • Bootstrap中CSS的使用方法

    Bootstrap中CSS的使用方法

    这篇文章主要为大家详细介绍了Bootstrap中CSS的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-02-02

最新评论