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 学习之旅 (3)
Feb 05 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
跟我学习javascript的this关键字
May 28 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
php下统计用户在线时间的一种尝试
2010/08/26 PHP
smarty简单分页的实现方法
2014/10/27 PHP
php实现购物车功能(上)
2020/07/23 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
Python编程中装饰器的使用示例解析
2016/06/20 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
python实现画图工具
2020/08/27 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
食品营养与检测应届生求职信
2013/11/08 职场文书
医科学校毕业生自荐信
2013/11/09 职场文书
火锅店的活动方案
2014/08/15 职场文书
教师演讲稿开场白
2014/08/25 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js