手机短信点击发送按钮后按钮显示还剩下多少秒

最新推荐文章于 2021-03-10 13:47:57 发布
最新推荐文章于 2021-03-10 13:47:57 发布
阅读量339 收藏 1
点赞数
文章标签： 手机短信点击发送按钮后按钮显示还剩下多少秒
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43934134/article/details/102510806
版权

当手机填写验证码时，需要点击发送按钮，然后这个按钮变成灰色，变成倒计时60秒，59秒，58秒…，当倒计时为0之后，这个按钮又会变成复原成发送，如何实现：

需要用到按钮的disabled属性，以及当点击了按钮之后，利用定时器，把变化的时间通过innerHTML放到button中，当时间到了之后就调用清除定时器来把按钮进行复原。

在这里插入图片描述
结果如图：
在这里插入图片描述

weixin_43934134
关注
点击发送按钮倒计时
TheShycc的博客
07-14 313
手机号：<input type="text" /> <button>发送</button> HTML代码 <script> var btn = document.querySelector('button'); //获取元素 var tim = 3; btn.addEventListener('click',function(){ //注册点击事件 btn.disabled = t...
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
10-16
在JavaScript（JS）中，实现发送短信验证码以及“59秒后重新发送验证短信”的功能是常见的用户身份验证过程的一部分。这个功能确保用户能够获取验证码并有足够的时间输入，同时防止滥用服务。以下是对实现这一功能的...
Android开发之获取短信验证码后按钮背景变化并且出现倒计时
09-02
在开发是经常会遇到获取短信验证码，然后获取验证码后需要等待n秒倒计时，这时是不能再次发送短信请求的，这是需要一个倒计时程序，本文给大家分享了实现此功能的代码，需要的朋友参考下
网页上发送短信时验证码变灰倒计时显示
06-24
网页注册时经常要填写手机号并收到短信,发送短信时验证码变灰倒计时显示。
js实现点击按钮后变灰不可再点并进入倒计时
qq_30908729的博客
06-04 2360
js实现点击按钮后变灰不可再点并进入倒计时 解决方法： 1. 核心方法：http://www.yayihouse.com/yayishuwu/chapter/1961 2.用法 点击导出按钮后按钮不可再点并进入10秒倒计时，时间到了才可以再次导出 excelConfirm(10,"导出");//其中导出是你的按钮名称，10是倒计时的时长（秒） ...
jquery实现点击按钮变灰不可点击并开始倒计时10秒特效代码
徊忆羽菲
10-09 2417
jquery实现点击按钮变灰不可点击并开始倒计时10秒特效代码实现代码代码解析1、给按钮绑定一个点击事件2、设置一个初始的时间值，决定按钮过多少秒恢复3、进行判断,若time==0则表示当前的按钮计时完毕,需要将按钮恢复,并且重新赋值,若!=0则表明当前正在计时，按钮禁用，并且时间time-14、设置一个计时器 实现代码 <!DOCTYPE html> <html> &lt...
js实现 点击发送短信剩余秒数
qq_095的博客
09-07 342
js实现 点击发送短信剩余秒数 完整代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;b
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
12-02
一般原理是“当点击发送按钮时，发送ajax请求到服务器发送短信验证码，成功则把发送按钮设置为不可点击，并且调用定时器，按钮显示倒计时”。如果就这样不对倒计时存储做处理，那么当刷新页面，会出现倒计时失效，...
基于JavaScript实现手机短信按钮倒计时(超简单)
11-23
通过这种方式，我们可以轻松地在网页中实现手机短信发送按钮的倒计时功能，提高用户对系统操作的理解，降低服务器的压力。这个示例虽然简单，但在实际项目中可以作为基础进行扩展，例如添加错误处理、动画效果或者...
js代码实现点击按钮出现60秒倒计时
11-26
本文将详细介绍如何使用JavaScript实现点击按钮后显示60秒倒计时的功能，常见于手机短信验证或重试操作等场景。 首先，我们来看一个基础的例子。在这个例子中，我们创建了一个HTML按钮元素，并通过JavaScript来控制...
JS实现点击发送验证码 xx秒后重新发送功能
10-16
在一些注册类的网站，经常遇到这样的需求，点击发送验证码，xx秒后重新发送，这样的功能怎么实现呢，接下来通过本文给大家分享js点击发送验证码 xx秒后重新发送功能，需要的朋友参考下吧
点击实现倒计时,按钮变成不可点击,倒计时结束,按钮重新可点击
10-07
点击实现倒计时,按钮变成不可点击,倒计时结束,按钮重新可点击
点击提交按钮后按钮变灰色不可用状态的三种方法
09-05
当点击提交后，提交按钮变灰色不可用，这样可有效防止重复提交，本代码就是实现这样一个功能
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)
10-21
主要介绍了基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
发送短信验证后，按钮倒计时，防止刷新倒计时失效
小阳子 的博客
07-07 2596
应用场景 在开发“发送短信验证”功能时候，要解决一个问题，防止恶意或频繁发送短信验证码问题。一般原理是“当点击发送按钮时，发送ajax请求到服务器发送短信验证码，成功则把发送按钮设置为不可点击，并且调用定时器，按钮显示倒计时”。如果就这样不对倒计时存储做处理，那么当刷新页面，会出现倒计时失效，按钮可点击。提供以下解决方案： 利用cookie存储倒计时 利用HTML5的loca
让按钮变灰的协议倒计时
benben
12-05 172
&lt;html&gt; &lt;body&gt; benben &lt;table name=agree border="0" cellpadding="10" cellspacing="0" align=center width="80%"&gt; &lt;tr align=center&gt; &lt;td width="50%"
php提示时间,php 显示活动剩余时间
weixin_36309562的博客
03-10 164
//时间差function time2Units ($time){$year = floor($time / 60 / 60 / 24 / 365);$time -= $year * 60 * 60 * 24 * 365;$month = floor($time / 60 / 60 / 24 / 30);$time -= $month * 60 * 60 * 24 * 30;$week = flo...
点击按钮出现60秒倒计时js代码
caixiajia的专栏
10-13 2843
无标题文档            var countdown=60;  function settime(val) {  if (countdown == 0) {  val.removeAttribute("disabled");     val.value="免费获取验证码";  countdown = 60;  } else {  val.setAttrib
点击button 验证倒计时
weixin_34081595的博客
12-30 85
<script type="text/javascript"> var countdown = 60; function settime(val) { if (countdown == 0) { val.removeAttribute("disabled"); ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值