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 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
vuex分模块后,实现获取state的值
Jul 26 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
php学习之function的用法
2012/07/14 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
浅谈PHP的反射机制
2016/12/15 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
详解php命令注入攻击
2019/04/06 PHP
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
Django返回json数据用法示例
2016/09/18 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
python中xlrd模块的使用详解
2021/02/01 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
后勤园长自我鉴定
2013/10/17 职场文书
年会主持词结束语
2014/03/27 职场文书
难忘的一天教学反思
2014/04/30 职场文书
合作协议书范本
2014/10/25 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
公证处委托书
2015/01/28 职场文书
政审证明范文
2015/06/19 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android