点击按钮倒计时小功能js方法

最新推荐文章于 2024-01-24 15:24:22 发布
最新推荐文章于 2024-01-24 15:24:22 发布
阅读量316 收藏
点赞数
分类专栏： js小功能 文章标签： js小功能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41604354/article/details/80799318
版权
var wait = 60;
function time(btns) {
var btn = document.getElementById(btns);//获取按钮对象
    if (wait == 0) {
        btn.removeAttribute("disabled");
btn.value = "获取验证码";
    wait = 60;
} else {
    btn.setAttribute("disabled", true);
btn.value = wait + "秒后重新获取验证码";
        wait--;
        setTimeout(function () {
            time(btns);
        },
        1000)
    }
}
无能为力者的梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现点击注册按钮开始读秒倒计时的小例子
12-12
js 代码如下:[removed] <!– 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...
按钮点击限时
PerfectUrl的博客
05-08 461
var countdown=10; function settime(val){     if(countdown==0){     val.removeAttribute("disabled");     val.value='获取验证码';     countdown=10;     return;//这里必须跳出循环，不然一直循环         }else{     v
Js中关于按钮倒计时显示（setTimeout 和 setInterval）
yicunyangguang的博客
02-24 4646
目标：实现一个按钮点击，同时按钮禁用并显示倒计时的js功能函数。 分析：首先要有一个按钮，绑定一个事件，这个事件功能就是定时改变按钮显示值，同时禁止按钮进行二次点击。 此功能函数需要使用js周期调用函数 setTimeout 或则setInterval，来定时改变显示值。 setTimeout 和 setInterval的区别是什么，又该如何选择呢？其实 setTimeout 和 setInterval 的最本质的区别是 触发 setTimeout 方法只执行一次，而触发 setInterval 方.
JS实现倒计时和短信验证码倒计时功能
weixin_50367873的博客
06-19 3811
html30分钟倒计时。短信验证码倒计时功能。
JS实现为控件添加倒计时功能
szd_happy的博客
07-04 2267
在有些报表需求中，需要为控件添加倒计时功能，限制到某一个时间点后能进行一项操作或不能进行某项操作，比如查询，导出功能等等，又需要人性化地显示还有多少时间，即倒计时功能
js代码实现点击按钮出现60秒倒计时
11-26
本文将详细介绍如何使用JavaScript实现点击按钮后显示60秒倒计时的功能，常见于手机短信验证或重试操作等场景。 首先，我们来看一个基础的例子。在这个例子中，我们创建了一个HTML按钮元素，并通过JavaScript来控制...
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
10-18
从上述文件内容中我们可以了解到关于JavaScript实现倒计时恢复按钮点击功能的相关知识点，主要包括： 1. JavaScript中的倒计时实现原理：使用了`setInterval`函数，这是一个JavaScript内置的定时器函数，能够按照...
JS点击按钮自动倒计时特效代码
03-20
在JavaScript编程中，点击按钮自动倒计时特效是一种常见的交互设计，它通常用于提升用户体验，例如强制用户阅读条款或等待验证码。以下将详细介绍这两种应用场景及其相关的JavaScript实现。 **示例一：阅读条款后...
WPF Button控件实现点击倒计时读秒
weixin_65414269的博客
08-18 499
这里注意：IsEnabled是button的属性，在设置触发器时需要将此功能放在button style下，而不是上面的borderstyle。点击button按钮后，按钮背景颜色改变（变灰色），按钮实时显示60s倒计时，在此期间按钮不可再点，直到结束后按钮恢复原来的颜色（蓝色）。在XAML界面设计中，重写button样式，把按钮变成圆形or椭圆，这里使用border来完成。使用button按钮实现点击发送后倒计时60s，并且此期间button不可点击。2.改变button原样式实现实现该功能。
js，css倒计时样式
04-23
js与css写的非常漂亮的倒计时效果，与大家一起分享
JS实现点击按钮显示倒计时
最新发布
m0_66403070的博客
01-24 1202
JS实现点击按钮显示倒计时
JS实现倒计时功能
热门推荐
qq_48954625的博客
12-27 4万+
一、前言 网站在做活动时，会出现一个截止时间倒计时的提示。效果如图： 二、分析 ①提示时间是每秒不断变化的，需要用到定时器(setInterval) //1000表示每隔一秒变化一次，单位为毫秒 setInterval(countDown, 1000); ②三个盒子通过innerHTML进行赋值，放入时、分、秒 ③计算当前时间到截至时间的时间（时间戳：指的不是当前时间，而是距离1970年1月1号过了多少毫秒） +new Date() ④截止时间的时间戳减当前时间的时间戳 ⑤通过..
vue之事件绑定
deep_zhuheihei的博客
07-20 317
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
JS倒计时按钮
weixin_45921972的博客
11-29 829
利用定时器 ，制作按钮在有效时间内失效的效果 可用作于接收验证码 避免了用户多次连续点击 【效果如下】 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/jav...
js设置按钮倒计时
a3289780的博客
05-07 1657
下面是我在工作中遇到的一个问题，也成功的解决了，贴出来分享下，希望大家提出宝贵的建议。 问题提出： 为了防止传真发送接口的堵塞，程序要求传真发送按钮每过5分钟才能点击一次。即使关闭当前页面甚至浏览器，再重新打开，仍然能够判断，并做出读秒倒计时提示。 效果图： 问题解决： 首先，我们写个按钮状态更新的js函数 function update(num) { var se...
ext和js定时器
菜鸟学java
08-09 379
[b]1、Ext定时器（Ext的定时器，每隔2秒刷新store）[/b] var task = { //Ext的定时器，每隔2秒刷新store。 run : function() { moneyStore.load(); if(moneyStore.getAt(0)){ if(f==0){ ...
react按钮倒计时效果（发送验证码按钮）
李公子的博客
07-08 2712
1.今天需要做一个用验证码登陆的功能，所以简单把一个按钮的点击效果分享一下，也是参考了一些资料。先看下效果图 Video_2019-07-08_212843.gif 想实现这个按钮的效果还是挺简单的，首先分析下需要做哪些工作。 1.点击按钮之后按钮变成不可点击状态。 2.点击按钮之后出现倒计时。 不可点击状态用disabled属性，倒计时就用setInterval()方...
js按钮点击禁用时间,刷新怎么保留倒计时
06-08
你可以使用 JavaScript 中的定时器 setInterval() 来实现按钮点击禁用时间和倒计时功能。具体实现如下： 1. 定义一个计时器变量，用于存储定时器的 ID。 ``` var timer; ``` 2. 给按钮添加点击事件，点击按钮后禁用按钮并开始倒计时。 ``` document.getElementById("btn").onclick = function() { // 禁用按钮 document.getElementById("btn").disabled = true; // 设置倒计时时间 var seconds = 60; // 启动定时器 timer = setInterval(function() { // 更新倒计时时间 seconds--; // 显示倒计时时间 document.getElementById("countdown").innerHTML = seconds + "秒"; // 倒计时结束，清除定时器 if (seconds <= 0) { clearInterval(timer); // 恢复按钮 document.getElementById("btn").disabled = false; // 清除倒计时显示 document.getElementById("countdown").innerHTML = ""; } }, 1000); } ``` 3. 页面刷新后，需要保留倒计时时间。可以使用浏览器的本地存储（localStorage）来实现。在页面加载时，读取本地存储中的倒计时时间，如果存在则恢复倒计时，否则不进行操作。 ``` window.onload = function() { // 从本地存储中读取倒计时时间 var seconds = localStorage.getItem("countdownSeconds"); // 如果倒计时时间存在，恢复倒计时 if (seconds) { // 禁用按钮 document.getElementById("btn").disabled = true; // 启动定时器 timer = setInterval(function() { // 更新倒计时时间 seconds--; // 显示倒计时时间 document.getElementById("countdown").innerHTML = seconds + "秒"; // 倒计时结束，清除定时器 if (seconds <= 0) { clearInterval(timer); // 恢复按钮 document.getElementById("btn").disabled = false; // 清除倒计时显示 document.getElementById("countdown").innerHTML = ""; // 移除本地存储中的倒计时时间 localStorage.removeItem("countdownSeconds"); } else { // 更新本地存储中的倒计时时间 localStorage.setItem("countdownSeconds", seconds); } }, 1000); } } ``` 4. 在定时器中更新本地存储中的倒计时时间，以便在页面刷新后恢复倒计时。 ``` // 更新本地存储中的倒计时时间 localStorage.setItem("countdownSeconds", seconds); ``` 注意，以上代码仅供参考，具体实现需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值