js实现的倒计时按钮实例


Posted in Javascript onJune 24, 2015

本文实例讲述了js实现的倒计时按钮。分享给大家供大家参考。具体分析如下:

效果图如下:

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 设计模式 推荐
Oct 28 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
js实现大转盘抽奖游戏实例
Jun 24 #Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 #Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 #Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 #Javascript
介绍一个简单的JavaScript类框架
Jun 24 #Javascript
jquery分割字符串的方法
Jun 24 #Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 #Javascript
You might like
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
python实现串口自动触发工作的示例
2019/07/02 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
Python 必须了解的5种高级特征
2020/09/10 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
Sql面试题
2013/03/20 面试题
服装机修工岗位职责
2013/12/26 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
《花木兰》教学反思
2014/04/09 职场文书
求职信的正确写法
2014/07/10 职场文书
镇创先争优活动总结
2014/08/28 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
写给老师的保证书
2015/05/09 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
app场景下uniapp的扫码记录
2022/07/23 Java/Android