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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
koa-router源码学习小结
Sep 07 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
vue+django实现下载文件的示例
Mar 24 Vue.js
vue实现简易音乐播放器
Aug 14 Vue.js
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
用PHP实现验证码功能
2006/10/09 PHP
优化PHP代码的53条建议
2008/03/27 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
JavaScript的Cookies
2008/01/16 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
车间主管岗位职责
2013/11/14 职场文书
转党组织关系介绍信
2014/01/08 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
市场营销调查计划书
2014/05/02 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
私人委托书格式
2014/09/10 职场文书
国富论读书笔记
2015/06/26 职场文书