JS实现按钮倒计时

最新推荐文章于 2024-08-07 16:30:20 发布
最新推荐文章于 2024-08-07 16:30:20 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： JS 文章标签： JS实现倒计时
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013457570/article/details/52711082
版权

点击按钮实现倒计时


<body>

    <input type="button" id="btn" value="免费获取验证码" οnclick="settime(this)" /> 
<script type="text/javascript"> 
var countdown=10; 
function settime(val) { 
if (countdown == 0) { 
val.removeAttribute("disabled");    
val.value="免费获取验证码"; 
countdown = 10; 
if(countdown==10){
return;
}
    } else { 
val.setAttribute("disabled", true); 
      val.value="重新发送(" + countdown + ")"; 
countdown--; 
   } 
   
setTimeout(function() { 
settime(val)},1000) 
} 
</script>
  </body>
u013457570
关注
专栏目录
JS倒计时按钮
weixin_45921972的博客
11-29 841
利用定时器 ，制作按钮在有效时间内失效的效果 可用作于接收验证码 避免了用户多次连续点击 【效果如下】 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/jav...
JS按钮倒计时函数
03-25
JS按钮倒计时函数
Ext JS 4倒计时：开发者预览版
热门推荐
黄灯桥的专栏
02-17 1万+
      作为Ext JS团队的代表，我很高兴地宣布第一个Ext JS 4开发者预览版发布了。Ext JS 4是到目前为止，我们所做的改动最大，有史以来最先进的Javascript框架。从生成HTML代码到类系统，框架的每一个领域几乎都被更新了。我们统一了Api，添加了令人难以置信的新功能和改进了整个框架的性能。       对Ext JS 4，我们有三个主要目标： 速度、 健壮性和易用性。我们想要速度更快，并尽可能在每个浏览器上足够健壮，而且很容易学习和使用的框架。为了实现这一目标，我们整个框架回到画
按钮倒计时功能-文档协议阅读倒计时
m0_58665272的博客
08-07 225
文档阅读知晓倒计时，按钮倒计时恢复点击功能
JS实现点击按钮显示倒计时
m0_66403070的博客
01-24 1269
JS实现点击按钮显示倒计时
Js中关于按钮倒计时显示（setTimeout 和 setInterval）
yicunyangguang的博客
02-24 4758
目标：实现一个按钮点击，同时按钮禁用并显示倒计时的js功能函数。 分析：首先要有一个按钮，绑定一个事件，这个事件功能就是定时改变按钮显示值，同时禁止按钮进行二次点击。 此功能函数需要使用js周期调用函数 setTimeout 或则setInterval，来定时改变显示值。 setTimeout 和 setInterval的区别是什么，又该如何选择呢？其实 setTimeout 和 setInterval 的最本质的区别是 触发 setTimeout 方法只执行一次，而触发 setInterval 方.
javascript 实现网页 倒计时 代码
01-08
在JavaScript中实现网页倒计时是一项常见的任务，尤其在创建活动页面、竞赛倒计时或者定时发布内容等场景中非常实用。本篇文章将详细介绍如何利用JavaScript编写一个网页倒计时功能，并结合提供的`index.html`和`js`...
js实现的倒计时按钮实例
12-10
本文实例讲述了js实现的倒计时按钮。分享给大家供大家参考。具体分析如下： 效果图如下： 具体代码如下： <input type="button" value="确定"id="rulesubmit" /> [removed] var secs = 3; var wait = secs ...
JS实现按钮控制计时开始和停止功能
10-19
本篇文档主要介绍了如何通过JavaScript来实现一个按钮控制计时器开始和停止的功能。接下来，将从相关知识点进行详细说明。 ### JavaScript 计时器函数 在JavaScript中，计时器功能主要通过两个函数实现：`...
js 点击按钮倒计时10秒小功能
weixin_47239395的博客
06-28 1144
按钮点击倒计时,并且不可点击
JS点击按钮自动倒计时代码.zip
07-05
JS点击按钮自动倒计时代码，示例一：要求用户阅读完条款内容才能激活按钮；示例二：要求用户激活短信通道向用户手机发送验证码。
JS倒计时 按钮
bingqingsuimeng的专栏
12-02 2696
JS实现按钮等待倒计时效果丨网页学习网丨WWW.lodidance.com JS实现按钮等待倒计时效果 document.zzjs_net.Submit.disabled = true; var speed = 1000; //速度 var wait = 10; //停留时间 function updateinfo(){ if(wait == 0
Ext JS 4倒计时：图形和图表
黄灯桥的专栏
02-10 1万+
      基本图形功能       一直以来，在Web应用程序中进行绘图是很困难的事情。虽然我们很希望在应用程序中创建丰富的交互式图表或其他图像，但是HTML真的是不是这块料。通常，我们需要使用到Adobe Flash，但这给我们带来了两个难题：我们习惯书写Javascript代码，而且Flash并不是所有设备都支持。解决这个问题的方法就是使用一个纯Javascript的图形库，通过它创建丰富的图形和图表。它可以运行在ie6到iOS等任何平台，而且它已经成为Sencha Touch的附件。      
原生js 按钮点击 倒计时
清晨一场梦
12-14 9123
&amp;lt;input type=&quot;button&quot; id=&quot;lay&quot; onclick=&quot;settime(this)&quot; value=&quot;adff&quot;&amp;gt; var countdown=5; function settime(val) { if (countdown == 0) { val.removeAt
jsp实现，按钮倒计时，倒计时结束后才能点击，并跳转下一页
a1145725225的博客
11-26 1711
效果图如下 话不多说，直接上代码 js内容 <script type="text/javascript"> $(document).ready(function() { var o=$("#btn_msg"); time(o); }); var wait=2; function time(o){ if (wait == 0) { o.removeAttr("disabled"); o.val("下一步"); } else { o.a
js倒计时、计时开始
as20102010的博客
07-21 181
最近项目中用到倒计时与计时的功能，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>倒计时与从0计时</title> </head> <body> <h1>从0...
使用js函数实现按钮控制倒计时
Java_Long_Asus的博客
08-17 1140
1.设置控制倒计时的函数 function count(){ var count = 149;//倒计时开始的秒数 var countdown = setInterval(CountDown, 1000); //倒计时增量（1000为毫秒） function CountDown() { $("#sendPhoneCode").val("(" + count +...
JavaScript实现按钮显示倒计时
huzk4409的专栏
08-19 283
<script language="javascript"> x = 60; function language_Change() { if (2==document.login.loginlanguage.value) { document.getElementById("loginbtn").value="登录"; document.getElementById("resetbtn").value="取消"; } else ...
vue3.js实现按钮倒计时
最新发布
09-24
在Vue3中实现按钮的倒计时功能，通常需要结合`<script setup>`、定时器以及计算属性来完成。首先，我们需要定义一个状态变量`countdown`来存储剩余的时间，并创建一个按钮元素。然后，在`setup`中初始化这个计数，并设置一个定时器来每秒递减计数。 下面是一个简单的例子： ```html <template> <div> <button @click="startCountdown" :disabled="isDisabled">倒计时开始</button> <p v-if="showCount">{{ countdownText }}</p> </div> </template> <script setup> import { ref, onMounted } from 'vue'; // 定义计数状态 const countdown = ref(60); // 开始时设为60秒 // 计算文本 const countdownText = computed(() => { return `倒计时：${countdown.value}秒`; }); // 开始倒计时函数 const startCountdown = () => { let intervalId; const countdownJob = setInterval(() => { if (countdown.value > 0) { countdown.value--; } else { clearInterval(intervalId); countdown.value = 0; // 倒计时结束时重置 isDisabled.value = false; // 重置按钮禁用状态 } }, 1000); intervalId = countdownJob; isDisabled.value = true; // 开始时禁用按钮 }; // 数据挂载后启动倒计时 onMounted(startCountdown); </script> ``` 在这个示例中，当用户点击“倒计时开始”按钮时，会调用`startCountdown`方法，开始倒计时。倒计时结束后，按钮会自动恢复点击状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值