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

相关文章

  • js 计算图片内点个数的示例代码

    js 计算图片内点个数的示例代码

    这篇文章主要介绍了js 计算图片内点个数的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 基于javascript实现checkbox复选框实例代码

    基于javascript实现checkbox复选框实例代码

    这篇文章主要介绍了基于javascript实现checkbox复选框实例代码,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 原生js实现旋转木马轮播图效果

    原生js实现旋转木马轮播图效果

    本文主要介绍了原生js实现旋转木马轮播图效果的实例,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 使用js获取图片原始尺寸

    使用js获取图片原始尺寸

    本文给大家推荐的是一个使用js获取图片的原始尺寸的例子,从本人项目中抠出来的,这里奉献给大家,有需要的直接拿走。
    2014-12-12
  • JavaScript的原型继承详解

    JavaScript的原型继承详解

    这篇文章主要详细介绍了JavaScript的原型继承的相关资料,十分详细,需要的朋友可以参考下
    2015-02-02
  • 详解javascript replace高级用法

    详解javascript replace高级用法

    这篇文章主要介绍了详解javascript replace高级用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • javascript汉字拼音互转的简单实例

    javascript汉字拼音互转的简单实例

    下面小编就为大家带来一篇javascript汉字拼音互转的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • javascript 正则表达式相关应介绍

    javascript 正则表达式相关应介绍

    javascript 中几个与正则表达式相关的应用,本文将详细介绍,需要的朋友可以参考下
    2012-11-11
  • 基于js的变量提升和函数提升(详解)

    基于js的变量提升和函数提升(详解)

    下面小编就为大家带来一篇基于js的变量提升和函数提升(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JS/jQuery实现DIV延时几秒后消失或显示的方法

    JS/jQuery实现DIV延时几秒后消失或显示的方法

    这篇文章主要介绍了JS/jQuery实现DIV延时几秒后消失或显示的方法,结合实例形式分析了javascript使用setTimeout及jQuery使用delay方法实现延迟显示功能的相关操作技巧,需要的朋友可以参考下
    2018-02-02

最新评论