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的语言特性分析
Apr 11 Javascript
javascript数组详解
Oct 22 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
JS实现留言板功能
Jun 17 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
详解JavaScript中操作符和表达式
Sep 12 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
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学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
php实现两个数组相加的方法
2015/02/17 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
JS中数组重排序方法
2016/11/11 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
django2.0扩展用户字段示例
2019/02/13 Python
pyqt5实现登录界面的模板
2020/05/30 Python
Python如何实现动态数组
2019/11/02 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
C,C++的几个面试题小集
2013/07/13 面试题
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
自荐信格式的六要素
2013/09/21 职场文书
环保倡议书格式范文
2014/05/14 职场文书
会计求职信范文
2014/05/24 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
Python图像处理库PIL详细使用说明
2022/04/06 Python