jquery 实现 点击按钮后倒计时效果

最新推荐文章于 2023-06-05 18:46:57 发布
最新推荐文章于 2023-06-05 18:46:57 发布
阅读量4.7k 收藏
点赞数
分类专栏： 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>
<script src="HTML/js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

var InterValObj; //timer变量，控制时间
var count = 5; //间隔函数，1秒执行
var curCount;//当前剩余秒数

function sendMessage() {
  　curCount = count;
　　//设置button效果，开始计时
     $("#btnSendCode").attr("disabled", "true");
     $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
     InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
　　  //向后台发送处理数据
     $.ajax({
     　　type: "POST", //用POST方式传输
     　　dataType: "text", //数据格式:JSON
     　　url: 'Login.ashx', //目标地址
    　　 data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,
    　　 error: function (XMLHttpRequest, textStatus, errorThrown) { },
     　　success: function (msg){ }
     });
}

//timer处理函数
function SetRemainTime() {
            if (curCount == 0) {                
                window.clearInterval(InterValObj);//停止计时器
                $("#btnSendCode").removeAttr("disabled");//启用按钮
                $("#btnSendCode").val("重新发送验证码");
            }
            else {
                curCount--;
                $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
            }
        }
</script>
</head>
<body>
        <input id="btnSendCode" type="button" value="发送验证码" οnclick="sendMessage()" /></p>
</body>
</html>
風中漫步
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery实现的按钮倒计时效果
11-24
本文实例讲述了JQuery实现的按钮倒计时效果。分享给大家供大家参考，具体如下： 一个实现了在按钮上显示倒计时，倒计时完毕自动将按钮设置为不可用的效果，具体代码如下： <html> <head> <title>test count down button</title> [removed][removed] [removed] $(function () { $('#btn').click(function () { var count = 10; var
10个很棒的jQuery倒计时脚本
08-22 131
我们已经在大多数的网站，如Rapidshare，互联星空等，使您可以下载文件，但让你等待指定的秒数为您提供下载链接见过的倒计时功能的足够样本。 我们大概也看到了不在线还用倒计时来告诉游客回来在一个非常动态的方式网站。 倒计时脚本有很多有用的情况下，好消息是，有你可以使用你的网站的一些很好的jQuery的脚本。 看看我们的10真棒jQuery的名单计数楼下脚本。 请享用！ 更新03/01/20...
jquery 循环倒计时
php_lidong的博客
05-16 1397
效果：代码:
jquery倒计时
qq_32087995的博客
05-31 171
公式 秒 = 明日凌晨时间-当前时间，例如 秒数 =2021/6/3 00:00:00 — 2021/6/1 12:25:16
jquery 页面循环倒计时
饭桶一生奋斗
01-15 2504
<html> <head> <script type="text/javascript" src="jquery.js"></script><script type="text/javascript"> function countDown(secs){ var $n1 = $("#n1"); // 输出n1的当前坐标 var coord = $n1.offset(); va
jQuery 5 秒倒计时
韩世雷 程序员专栏
01-04 1万+
var wait=5; timeOut(); function timeOut(){ if(wait==0){ feedbackObj.fadeOut(100,function(){ feedbackObj.remove(); }); $('#opacity-mask').fadeOut(100); }else{ setTimeout(functio
html 倒计时 重定向,使用jQuery setInterval函数延迟5秒后跳转到另一个页面
weixin_42420393的博客
06-23 1071
本文将介绍如何使用jQuery延迟一段时间(比如3秒或5秒)后跳转到另一个页面。使用Query延迟一段时间后，JavaScript setInterval()函数将用于跳转到另一个页面。使用jQuery延迟5秒后跳转到另一个页面使用jQuery延迟5秒后重定向到另一个页面以下HTML标记由一个button和一个DIV组成，这个DIV包含一个用于显示倒计时计时器的SPAN元素。另外为button分配...
无限循环的计时器
caowen414的专栏
11-25 1388
var c=0 var t function timedCount() { document.getElementById('txt').value=c c=c+1 t=setTimeout("timedCount()",1000) } 请点击上面的按钮。输入框会从 0 开始一直进行计时。
JQUERY 来一个4分钟循环倒计时和毫秒倒计时效果。
神夜空间
06-05 170
【代码】JQUERY 来一个4分钟循环倒计时和毫秒倒计时效果。
jquery实现60秒倒计时
热门推荐
山有木兮木有枝 心悦君兮君不知
08-21 1万+
代码： var time = 60; //倒计时 function getRandomCode() { if (time === 0) { time = 60; return; } else { time--; $('#time i').text(time); } setTimeout(function()...
利用jq实现倒计时功能
08-17
利用jq实现倒计时功能，添加jquery.min.js js库的引用即可使用，代码有提示
jQuery 实现倒计时天,时,分,秒功能
10-18
本文通过html代码和js代码给大家介绍了实现倒计时天,时,分,秒功能，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
倒计时按钮与单击按钮失效.html
03-25
倒计时按钮与单击按钮失效.html 倒计时按钮与单击按钮失效.html
原创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实现倒计时按钮具体方法
10-26
页面中需要实现某个按钮点击完后，禁用它，并显示倒计时。这个默认是3秒，代码如下
JQuery实现倒计时按钮的实现代码
12-09
代码如下: <head> <title>test count down button</title> [removed][removed] [removed] $(function () { $(‘#btn’).click(function () { var count = 3; var countdown = setInterval...
springboot(酒店管理系统)
04-25
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ 需要加v19306446185
BP神经网络matlab实例.doc
最新发布
04-25
数学模型算法
设计.zip
04-25
设计.zip
jquery 遮罩层倒计时
09-30
jQuery遮罩层倒计时可以通过使用jQuery插件和Bootstrap来实现。你可以使用Bootstrap的模态框组件来创建遮罩层，并且使用jQuery的计时器功能来实现倒计时。 首先，你需要在页面中引入jQuery和Bootstrap的相关文件。然后，你可以按照下面的步骤来实现遮罩层倒计时： 1. 创建一个按钮或者其他触发事件的元素，当用户点击该元素时，触发倒计时和遮罩层的显示。 2. 使用jQuery的计时器功能来实现倒计时。你可以使用`setInterval`函数来设置一个定时器，每隔一定的时间更新倒计时的显示内容。 3. 在定时器的回调函数中，更新倒计时的显示内容，并根据剩余时间判断是否显示遮罩层。你可以使用jQuery选择器来获取遮罩层的元素，并使用`show`和`hide`函数来控制其显示和隐藏。 4. 当倒计时结束时，你可以触发弹出模态框（遮罩层）的操作。你可以使用`modal`方法来显示模态框。 这是一个简单的实现示例代码： ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> </head> <body> <button id="startCountdown" class="btn btn-primary">开始倒计时</button> <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">警告</h5> </div> <div class="modal-body"> <p>您的时间已经用完</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-success" data-dismiss="modal">确定</button> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <script> $(document).ready(function() { $("#startCountdown").click(function() { var countdown = 10; // 设置倒计时的秒数 var countdownTimer = setInterval(function() { countdown--; if (countdown <= 0) { clearInterval(countdownTimer); $("#myModal").modal("show"); // 显示模态框 } else { $("#countdownDisplay").text(countdown); // 更新倒计时显示 } }, 1000); }); }); </script> </body> </html> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值