JQuery实现的按钮倒计时效果

本文实例讲述了JQuery实现的按钮倒计时效果。分享给大家供大家参考，具体如下：

一个实现了在按钮上显示倒计时，倒计时完毕自动将按钮设置为不可用的效果，具体代码如下：

<html>
<head>
<title>test count down button</title>
<script src="jquery1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
var count = 10;
var countdown = setInterval(CountDown, 1000);
function CountDown() {
$("#btn").attr("disabled", true);
$("#btn").val("Please wait " + count + " seconds!");
if (count == 0) {
$("#btn").val("Submit").removeAttr("disabled");
clearInterval(countdown);
}
count--;
}
})
});
</script>
</head>
<body>
<input type="button" id="btn" value="Submit" />
</body>
</html>

运行效果截图如下：

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • 基于jQuery实现美观且实用的倒计时实例代码

    倒计时效果有着广泛的应用,比如奥运会倒计时.高考倒计时和放假倒计时等,本章节分享一个比较美观且实用的倒计时效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>倒计时效果代

  • jQuery倒计时代码(超简单)

    具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span class="timespan"></span> </body> <script

  • jquery实现倒计时功能

    本文实例为大家分享了jquery倒计时功能的实现代码,供大家参考,具体内容如下 定义和用法: setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. 下面举例 <html> <head> <meta charset="utf-8&

  • jquery简单倒计时实现方法

    本文实例讲述了jquery简单倒计时实现方法.分享给大家供大家参考,具体如下: var intDiff = parseInt(60); //倒计时总秒数量 function timer(intDiff) { window.setInterval(function () { var day = 0, hour = 0, minute = 0, second = 0; //时间默认值 if (intDiff > 0) { day = Math.floor(intDiff / (60 * 60 * 2

  • jquery实现的判断倒计时是否结束代码

    本章节介绍一段代码实例,此代码能够判断当前日期是否已经倒计时结束,此代码中并没有倒计时效果,只是判断是否倒计时完成,比如购物网站优惠期限等,虽然实际应用中,很少会出现类似的代码,不过希望能够给浏览者带来一定的启示作用. 代码如下: function done(){ var str=$('#end').text(); var out=str.match(/\d+/g); console.log(out); var h=parseInt(out[0]),m=parseInt(out[1]),s=pa

  • JQuery实现的按钮倒计时效果

    JQuery实现的按钮倒计时效果

    本文实例讲述了JQuery实现的按钮倒计时效果.分享给大家供大家参考,具体如下: 一个实现了在按钮上显示倒计时,倒计时完毕自动将按钮设置为不可用的效果,具体代码如下: <html> <head> <title>test count down button</title> <script src="jquery1.8.3.min.js" type="text/javascript"></script&g

  • Angular6 发送手机验证码按钮倒计时效果实现方法

    1.组件中定义两个变量,分别用于控制按钮是否可以点击(countDown)和按钮上的倒计时数字(countDownTime): countDown = false; countDowmTime = 60; // 这里设置倒计时为60S showButtonText = '发送短信验证码': // 可以控制动态改变的按钮提示信息 2.写一个获取短信验证码的方法绑定到页面的获取短信验证码按钮上: getCode(event) { this.validateForm1.controls['phone'

  • jQuery实现的手机发送验证码倒计时效果代码分享

    jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述: 注册一个网站,当需要发送验证码到手机上的时候,我们经常碰到这样的效果: 首先检测手机是否符合1开头,11位数字的格式: 若不符合,则提示错误信息并返回false: 否则提交给后台,后台确定接收后返回一个值,发送按钮变为灰色并倒计时. 运行效果: --------------------------------效果演

  • jQuery实现的倒计时效果实例小结

    本文实例总结了jQuery实现的倒计时效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • jQuery简单倒计时效果完整示例

    jQuery简单倒计时效果完整示例

    本文实例讲述了jQuery简单倒计时效果.分享给大家供大家参考,具体如下: 前天做了一个活动项目,其中有一块需要做倒计时的效果,由于需求比较简单,所以也就没用网上各种倒计时的插件.今天抽空整理出来,分享给大家. html 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>倒计时效果</titl

  • jQuery实现单击按钮遮罩弹出对话框效果（1）

    jQuery实现单击按钮遮罩弹出对话框效果（1）

    本文实例为大家分享了jQuery实现单击按钮遮罩弹出对话框的具体代码,供大家参考,具体内容如下 看到网上一位大神的代码后,大概进行了注释,调试了一下页面以后感觉不错,留作以后使用. 主要用到了:/jquery-1.10.2.min.js 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <tit

  • jQuery基于扩展实现的倒计时效果

    本文实例讲述了jQuery基于扩展实现的倒计时效果.分享给大家供大家参考,具体如下: <div id="fnTimeCountDown" data-end=""> <span class="mini">00</span>分 <span class="sec">00</span>秒 <span class="hm">000</spa

  • jQuery实现单击按钮遮罩弹出对话框效果(1)

    jQuery实现单击按钮遮罩弹出对话框效果(1)

    本文实例为大家分享了jQuery实现单击按钮遮罩弹出对话框的具体代码,供大家参考,具体内容如下 看到网上一位大神的代码后,大概进行了注释,调试了一下页面以后感觉不错,留作以后使用.主要用到了:/jquery-1.10.2.min.js代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title

  • jquery 倒计时效果实现秒杀思路

    复制代码 代码如下: <script type="text/javascript"> $(function(){ countDown("2015/9/8 11:11:59","#colockbox1"); }); function countDown(time,id){ var day_elem = $(id).find('.day'); var hour_elem = $(id).find('.hour'); var minute_

  • JS/jQ实现免费获取手机验证码倒计时效果

    JS/jQ实现免费获取手机验证码倒计时效果

    最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平台首先去要注册一个账号,在设置里面

随机推荐