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 通过json自动生成Dom的代码
Apr 01 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
jquery使用经验小结
May 20 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
详解package.json版本号规则
Aug 01 Javascript
antd design table更改某行数据的样式操作
Oct 31 Javascript
js实现鼠标拖曳效果
Dec 30 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中使用unset销毁变量并内存释放问题
2012/07/05 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
Python装饰器用法示例小结
2018/02/11 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
GC是什么?为什么要有GC?
2013/12/08 面试题
J2EE面试题大全
2016/08/06 面试题
顶碗少年教学反思
2014/02/21 职场文书
情人节寄语大全
2014/04/11 职场文书
医院合作协议书
2014/08/19 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
Python requests用法和django后台处理详解
2022/03/19 Python