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 相关文章推荐
动态添加option及createElement使用示例
Jan 26 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
Vue插件之滑动验证码
Sep 21 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 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使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
Python对象体系深入分析
2014/10/28 Python
python处理html转义字符的方法详解
2016/07/01 Python
python自定义异常实例详解
2017/07/11 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
python实现八大排序算法(2)
2017/09/14 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
python实现汽车管理系统
2018/11/30 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
美国购物网站:Clickhere2shop
2021/01/28 全球购物
运动会入场式解说词
2014/02/18 职场文书
保险内勤岗位职责
2014/04/05 职场文书
协议书怎么写
2014/04/21 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书