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程序设计有所帮助。

赞 (0)

相关推荐

  • js代码实现点击按钮出现60秒倒计时

    js代码实现点击按钮出现60秒倒计时

    比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 此例子用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子1:Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascrip

  • JS自动倒计时30秒后按钮才可用(两种场景)

    JS自动倒计时30秒后按钮才可用(两种场景)

    展示效果图: WEB开发中经常会用到倒计时来限制用户对表单的操作,比如希望用户在一定时间内看完相关协议信息才允许用户继续下一步操作,又比如在收取手机验证码时允许用户在一定时间过后(未收到验证码的情况下)再次获取验证码.那么今天我来给大家介绍下如何使用Javascript来实现这一简单应用. 查看演示 下载源码 应用场景1:用户注册时阅读完相关协议信息后才能激活按钮 某些网站注册时要求用户同意所谓的用户协议之类的信息,如果协议内容非常重要,有些网站会要求新注册的用户一定要阅读完相关协议信息才能激活

  • 基于JavaScript实现手机短信按钮倒计时(超简单)

    在淘宝等购物网站,我们都会看到一个发送短信倒计时的按钮,究竟是如何实现的呢?下面我就给大家提供一段代码很实用的. 废话不多说了,直接给大家贴js代码了. /* 120秒手机短信按钮倒计时 */ exports.sendmessage = function (name) { var second = 120; $(name).attr("disabled", true); var color = $(name).css('background-color'); $(name).attr(

  • js实现点击注册按钮开始读秒倒计时的小例子

    js 复制代码 代码如下: <script language="javascript"> <!-- var wait_time = 8; //设置秒数(单位秒) var secs_time = 0;          for(var i=1;i<=wait_time;i++) {  window.setTimeout("sTimer("+i+")",i*1000); } function sTimer(num) {  if

  • js实现的倒计时按钮实例

    js实现的倒计时按钮实例

    本文实例讲述了js实现的倒计时按钮.分享给大家供大家参考.具体分析如下: 效果图如下: 具体代码如下: <span style="font-size: 14px;"> <input type="button" value="确定"id="rulesubmit" /> <scripttypescripttype="text/javascript"> var secs = 3

  • JS实现的倒计时效果实例(2则实例)

    JS实现的倒计时效果实例(2则实例)

    本文实例讲述了JS实现的倒计时效果.分享给大家供大家参考,具体如下: 我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果,就是多少秒之后注册这个按钮才可以点击,其目的就是强迫你去看他的注册注意事项,这是一个很实用的效果:另外当我们进行在线考试的时候也必定会碰到答题倒计时的效果,这种倒计时效果是如何实现的呢?下面我们就用Js来实现一个倒计时效果,具体代码: html页面: <html> <head> <title>倒计时</title> <!--

  • 基于JS实现的倒计时程序实例

    本文实例讲述了基于JS实现的倒计时程序.分享给大家供大家参考.具体实现方法如下: 剩余时间:<i id="expireTime"></i> <script type="text/javascript"> var expire = 2412169; var expireTime = function(expires){ if(expires > 0){ var second = expires; }else{ var seco

  • JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】

    JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】

    本文实例讲述了JS实现的倒计时恢复按钮点击功能.分享给大家供大家参考,具体如下: 倒计时时间到后,恢复按钮点击,常用于阅读协议: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net 阅读协议倒计时</title> <script> var tim=9; function aaa(){ var btnn=docu

  • JS+HTML5实现获取手机验证码倒计时按钮

    JS+HTML5实现获取手机验证码倒计时按钮

    效果图如下所示: HTML: <input type="button" value="获取验证码"> CSS: input[type=button] width: 150px; height: 30px; background-color: #ff3000; border: 0; border-radius: 15px; color: #fff; } input[type=button].on { background-color: #eee; colo

  • Vue.js点击切换按钮改变内容的实例讲解

    代码实例: 代码描述:点击切换按钮,来改变显示的内容,切换不同的单位.flag相当于一个开关,控制开关的改变,来切换不同的单位.同样适用于其他的切换内容实例,也可设置按钮点击显示隐藏等. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换改变内容</title> <script src="https://cdn.bo

  • JS实现十分钟倒计时代码实例

    编写JS倒计时代码需要用到很多JavaScript知识,比如:if函数,Math.floor,定时器setInterval等等,如有不清楚的小伙伴可以参考PHP中文网的相关文章,或者访问 JavaScript视频教程. 举例:10分钟考试倒计时,当时间仅剩五分钟时,提醒考试仅剩5分钟,时间结束时,提示考试结束.具体代码如下: HTML部分: <body> <div id="timer"></div> <div id="warring&

  • vue实现验证码倒计时按钮

    vue实现验证码倒计时按钮

    本文实例为大家分享了vue实现验证码倒计时按钮的具体代码,供大家参考,具体内容如下 1.点击"发送验证码"按钮后进行逻辑判断: ▶️ 如果邮箱已输入且格式正确:按钮变为"已发送" ,此时为不可点击状态 并开始120s倒计时: ▶️ 如果邮箱未输入或格式不正确:显示错误的提示信息. 2.120s倒计时结束后按钮变为"重新发送验证码" . html: <div v-bind:class="{ 'text_email': isActiv

  • js定时器实现倒计时效果

    js定时器实现倒计时效果

    本文实例为大家分享了js定时器实现倒计时效果展示的具体代码,供大家参考,具体内容如下 日期函数 倒计时 =  用 将来的时间  -   现在的时间 问题:将来时间 距离 1970 毫秒数   -     现在距离 1970年1 用将来的毫秒数 -  现在的毫秒数   不断转换就可以了 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <t

  • 纯JS实现表单验证实例

    纯JS实现表单验证实例

    表单我实现了,input属性是text(文本框).radio(单选按钮).checkbox(多选按钮)的知识点, fieldset标签(组合表单中的相关元素).select标签(选择列表)和textarea标签(多行文本框). <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain" onsubmit="return check

随机推荐