JS倒计时按钮

最新推荐文章于 2024-01-24 15:24:22 发布
VIP文章 最新推荐文章于 2024-01-24 15:24:22 发布
阅读量798 收藏
点赞数
分类专栏： javascript 前端 文章标签： html javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45921972/article/details/121602195
版权

利用定时器 ，制作按钮在有效时间内失效的效果

可用作于接收验证码

避免了用户多次连续点击

【效果如下】

                

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		//创建button按钮
		var _btn = document.createElement("button");
		document.body.appendChild(_btn);
		_btn.innerText = "验证码";
		_btn.style.width = "100px";
		_btn.style.height = "50px";
		_btn.style.fontSize = "20px";

		//定时器
		var count = 10;
		_btn.onclick = function() {
			var time = setInterval(function() {
				if (count <= 0) {
					_btn.disabled=false;
					count = 10;
					_btn.innerText &#
最低0.47元/天 解锁文章
深巷的猫&fan
关注
  • 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(num==wait_time)  {   document.getElementById(“reg_btn”).value=” 同意注册 “;   document.getElement
js 点击按钮倒计时10秒小功能
weixin_47239395的博客
06-28 960
按钮点击倒计时,并且不可点击
Js中关于按钮倒计时显示（setTimeout 和 setInterval）
yicunyangguang的博客
02-24 4325
目标：实现一个按钮点击，同时按钮禁用并显示倒计时的js功能函数。 分析：首先要有一个按钮，绑定一个事件，这个事件功能就是定时改变按钮显示值，同时禁止按钮进行二次点击。 此功能函数需要使用js周期调用函数 setTimeout 或则setInterval，来定时改变显示值。 setTimeout 和 setInterval的区别是什么，又该如何选择呢？其实 setTimeout 和 setInterval 的最本质的区别是 触发 setTimeout 方法只执行一次，而触发 setInterval 方.
JS实现点击按钮显示倒计时
最新发布
m0_66403070的博客
01-24 683
JS实现点击按钮显示倒计时
javascript之10秒倒计时
m7k7k999的博客
11-24 4046
javascript之十秒倒计时,定时器函数,触发事件
js实现的倒计时按钮实例
10-24
主要介绍了js实现的倒计时按钮,实例分析了javascript倒计时效果的相关实现技巧,需要的朋友可以参考下
js代码实现点击按钮出现60秒倒计时
11-26
此例子用Javascript实现点击按钮后，倒计时60秒才能再次点击发送验证码的功能。 例子1：Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /&...
JS自毁按钮倒计时语音特效
07-24
JS自毁按钮倒计时语音特效是一款基于js+css3绘制的自爆按钮装置，点击按钮弹窗警告提示，10秒倒计时语音播报自毁按钮特效。
JS如何实现一个注册按钮10秒倒计时效果
itclanCoder
11-05 1944
我们平时在逛到一些网站的时候,在一些网站的会员注册页面里,为了提高用户的责任心以及给用户留下足够的时间阅读完注册协议,可以采用10秒倒计时的方式,阅读完协议后,才可以单机注册按钮的特效其实这与发送短信验证码倒计时,是一样的01原生js实现以下是原生简易js实现varsec=10; functioncountDownTimer(){ timer=setInterval(func...
js怎么实现倒计时效果
m0_70015558的博客
05-26 8085
js怎么做倒计时，其实很简单。话不多说，直接上菜 使用 new Date() 获取当前时间， Date.parse()方法解析一个表示某个日期的字符串，并返回从1970-1-1 00:00:00 UTC 到该日期对象（该日期对象的UTC时间）的毫秒数。然后，求两个时间差。这里也可以使用 getTime() 方法获取现在时和结束时距离的毫秒数。 把时间差转换为天数、小时数、分钟数和秒数显示。主要是用%取模运算。得到距离结束时间的毫秒数（剩余毫秒数），除以 1000 得到剩余秒数，再除以 60.........
js中如何实现倒计时
Learningmakes的博客
08-08 274
js中咋写计算器
JS实现倒计时功能
weixin_50367873的博客
06-19 3240
html30分钟倒计时。短信验证码倒计时功能。
JS实现为控件添加倒计时功能
szd_happy的博客
07-04 2235
在有些报表需求中，需要为控件添加倒计时功能，限制到某一个时间点后能进行一项操作或不能进行某项操作，比如查询，导出功能等等，又需要人性化地显示还有多少时间，即倒计时功能
JavaScript实现读秒按钮，按钮计时器，倒计时结束方可点击按钮（setInterval，clearInterval）
weixin_43400431的博客
09-15 1313
实现一进入页面就开始进行读秒操作，读秒尚未结束时，按钮处于禁止状态且颜色变灰。 读秒完毕后方可进行业务操作。 <template> <div> <el-card class="boxCard"> <h1 style="text-align: center">考生须知</h1> <div class="buttons"> <button class="btnCancel" @cli
javaScript实现倒计时功能
热门推荐
qq_65715980的博客
07-08 1万+
目录一、主要思路二、css样式三、html代码四、js内容五、完整代码展示六、效果展示1.通过内置时间函数实例化日期对象获取当前时间 new Date。2.因为时间无法减去时间，有可能生成负数，所以采用时间戳的方法得到毫秒数形式的剩余时间，然后再把剩余时间转换为天、时、分、秒格式。3.最后把所获得的内容赋值给定义的变量。主要为了内容在页面展示美观，稍微美化一下。 三、html代码 定义一个默认格式为JavaScript引入定义变量。 四、js内容 1.首先获取html里面的spans里的全部标签
js设置按钮倒计时
a3289780的博客
05-07 1627
下面是我在工作中遇到的一个问题，也成功的解决了，贴出来分享下，希望大家提出宝贵的建议。 问题提出： 为了防止传真发送接口的堵塞，程序要求传真发送按钮每过5分钟才能点击一次。即使关闭当前页面甚至浏览器，再重新打开，仍然能够判断，并做出读秒倒计时提示。 效果图： 问题解决： 首先，我们写个按钮状态更新的js函数 function update(num) { var se...
js定时器,设置按钮倒计时
zhenqian52的博客
02-03 3582
有个button，在页面进入的时候，进行倒计时操作。 var backTime = 60; function setTime(val){ if(backTime == 0 ){ val.removeAttr("disabled");; val.val("已阅读并同意协议内容"); }else{ val.attr("disabled",true); val.val
JavaScript实现按钮显示倒计时
huzk4409的专栏
08-19 259
<script language="javascript"> x = 60; function language_Change() { if (2==document.login.loginlanguage.value) { document.getElementById("loginbtn").value="登录"; document.getElementById("resetbtn").value="取消"; } else ...
利用JavaScript实现一个简单的倒计时功能
前端小白的博客
03-27 3620
js实现简单的倒计时功能
使用js写一个倒计时按钮
03-25
A： ...倒计时 ``` ```javascript // 倒计时时间（秒） const countdownTime = 60; ...const countdownBtn = ...以上是一个简单的倒计时按钮实现，点击按钮后会触发倒计时函数，按钮会禁用，倒计时结束后按钮会重新启用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值