JQuery按钮倒计时

最新推荐文章于 2023-11-29 15:57:06 发布
最新推荐文章于 2023-11-29 15:57:06 发布
阅读量308 收藏
点赞数
分类专栏： JQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_33644920/article/details/50467911
版权 
<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQuery按钮倒计时</title>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>

<body>
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />
<script type="text/javascript">
    var countdown=60;
    function settime(val) {
        if (countdown == 0) {
            val.removeAttribute("disabled");
            val.value="免费获取验证码";
            countdown = 60;
            return;
        } else {
            val.setAttribute("disabled", true);
            val.value="重新发送(" + countdown + ")";
            countdown--;
        }
        setTimeout(function() {
            settime(val)
        },1000)
    }
</script>
</body>
</html>
极客世杰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery实现倒计时按钮具体方法
10-26
本文将详细解释如何使用JQuery来实现一个倒计时按钮。 首先，我们需要理解JQuery的基本用法。JQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画设计以及Ajax交互。在JQuery中，我们通常通过选择器...
jquery 实现倒计时60秒
最新发布
DHLSP15的博客
12-13 943
jquery 实现倒计时60秒
jQuery 实现倒计时按钮
相逢不晚的博客
12-15 838
<button onclick="send()" id="sendBtn">发送验证码</button> function send () { var time = 60; function downTime () { time--; $("#sendBtn").attr({"disabled":"disabled"}); $("#sendBtn").text(time + ' S后重获'); if (tim
前端——倒计时实现
sunfragrence的博客
12-12 1203
js脚本： &lt;script type="text/javascript"&gt; var intDiff = parseInt(180);//倒计时总秒数量 function timer(intDiff) {     window.setInterval(function() {         var day = 0,                 hour = 0,  ...
jq实现点击按钮后倒计时
Honins的博客
01-31 5447
按钮上设置onclick，传入的参数为this 按钮上的div <input type="button" class="btn" id="btn" style="color: red; background-color: #FFFAFA" onclick="setTime(this)" value=
使用jquery实现倒计时，正计时，且支持页面上多个时间分别倒计时与正计时
qq_35150992的博客
11-29 381
该功能一共有三个核心技术点（1）减时间（2）增时间（3）减时间到0之后，开始增时间（4）页面上多个时间，该增加的增加，该减少的减少小声嘀咕：好像说了跟没说一样。。。正片成果不想看长篇大论的可以直接拿走代码运行增时间先来说增时间吧先看js代码，这是增时间的核心代码增时间比较简单，主要思想就是，先判断最小单位，小于59的话，无脑增加，如果大于等于59的话，赋值0之后给上一位加1，上一位加的时候也要判断是否满足进1条件，满足的话，依次处理。
JQuery实现的按钮倒计时效果
11-24
本文实例讲述了JQuery实现的按钮倒计时效果。分享给大家供大家参考，具体如下： 一个实现了在按钮上显示倒计时，倒计时完毕自动将按钮设置为不可用的效果，具体代码如下： <html> <head> <title>...
jQuery实现倒计时按钮功能代码分享
10-25
主要介绍了jQuery实现倒计时按钮功能代码分享,一般用在短信发送倒计时按钮情景,本文给出了几个例子,需要的朋友可以参考下
JQuery实现倒计时按钮的实现代码
12-09
代码如下: <head> <title>test count down button</title> [removed][removed] [removed] $(function () { $(‘#btn’).click(function () { var count = 3; var countdown = setInterval...
原创jquery实现点击按钮后倒计时效果，防页面刷新！
09-13
实现思路： 1.实现点击按钮，对手机号进行验证（是否为空或是否正确手机号）， 图形验证码验证（判断是否填写图形验证码）。 2.验证通过验证后，调用接口发送短信。 3.返回发送状态,如果发送成功，实现等待倒计时，锁定按钮处于禁用状态。 同时把倒计时数据写入 cookie 防止页面被刷新 4.倒计时的实现不采用全局变量，避免污染全局，或被其他函数修改。 5.按钮点击时先判断 cookie 里面有没有保存的倒计时值，如果有就从该值开 始倒计时。同时锁定按钮 6.对实现代码进行封装，方便使用！ 调用实例： 6688 点击获取短信验证码 $(function(){ smsSend.init($('#smsBox'),10,myfunc); /* 或者 smsSend.init($('#smsBox'),30); */ }); function myfunc(){ alert('我是传过去的函数'); }
jQuery实现倒计时效果
岁月如歌去，十年弹指间
02-27 1534
【代码】jQuery实现倒计时效果。
Jquery实现按钮倒计时
weixin_30814319的博客
07-10 309
1.关于button按钮： （1）button跟input不同，<button>比<input>更厉害的地方就在于它可以包含内容。它的值并不是写在value属性里，而是包含在标签中，其value值不会显示在页面上，若通过JS修改Button上显示的值，可以使用text属性修改 $("#btn").text("我要投诉"); （2） 使用button时，需始终...
使用 jQuery 来实现当点击 #Button 按钮时进行 15 秒的倒计时功能
03-25 374
【代码】使用 jQuery 来实现当点击 #Button 按钮时进行 15 秒的倒计时功能。
jQuery实现倒计时功能
qq_46490937的博客
05-18 3158
jQuery实现倒计时到0
jquery实现按钮倒数7秒后才可以点击
辉少的博客
02-24 5978
方法一：&lt;input type="button" value="下一步" id="button" disabled&gt;&lt;script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript&q
jquery 点击按钮后,倒计时60秒才能再次点击发送
fishermanmax的博客
05-10 5574
本文章来给大家介绍关于jquery 点击按钮后,倒计时60秒才能再次点击发送 效果，有需要了解的同学可进入参考参考。 例  代码如下 复制代码 var wait=60; function time(o) {         if (wait == 0) {             o.removeAttribute("disable
JQuery 解决按钮上的倒计时问题
weixin_33795093的博客
04-05 282
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="te...
按钮点击-30秒钟Jquery倒计时实现
weixin_34221332的博客
01-24 1517
2019独角兽企业重金招聘Python工程师标准>>> ...
Jquery 点击获取验证码按钮， 倒计时
越努力，越幸运！
09-20 2603
1.具体思路         点击获取验证码按钮 —&gt; 调用获取验证码接口（忽略）—&gt;获取验证码按钮切换到不可点击状态，按钮背景色呈灰色，按钮文字呈现为“倒计时秒数+后可重新获取”—&gt; 倒计时60s后按钮恢复可点击状态，按钮背景呈橙色，按钮文字呈现为“重新发送” 2.HTML代码 &lt;button type="button" class="feachBtn"&gt;获...
jquery 遮罩层倒计时
09-30
jQuery遮罩层倒计时可以通过使用jQuery插件和Bootstrap来实现。你可以使用Bootstrap的模态框组件来创建遮罩层，并且使用jQuery的计时器功能来实现倒计时。 首先，你需要在页面中引入jQuery和Bootstrap的相关文件。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值