JS 实现获取验证码倒计时功能

2024-12-01 10:44:39

setInterval 一个定时器搞定

<style>
button{
  background: #45BCF9;
  color: #fff;
  padding: 4px 10px;
  border: none;
  outline: none;
  cursor: pointer;
}
button:hover{
  background: #00a8fe;
}
button.disabled{
  background: #000;
  cursor: auto;
}
button.disabled:hover{
  background: #000;
}
</style>
<button type="button" onclick="fn()">获取验证码</button>
<script>
function fn(){
  var oBtn = document.getElementsByTagName('button')[0];
  var time = 60;
  var timer = null;
  oBtn.innerHTML = time + '秒后重新发送';
  oBtn.setAttribute('disabled', 'disabled');  // 禁用按钮
  oBtn.setAttribute('class', 'disabled');   // 添加class 按钮样式变灰
  timer = setInterval(function(){
    // 定时器到底了 兄弟们回家啦
    if(time == 1){
      clearInterval(timer);
      oBtn.innerHTML = '获取验证码';
      oBtn.removeAttribute('disabled');
      oBtn.removeAttribute('class');
    }else{
      time--;
      oBtn.innerHTML = time + '秒后重新发送';
    }
  }, 1000)
}
</script>

总结

以上所述是小编给大家介绍的JS 实现获取验证码倒计时功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

JS实现表单验证功能(验证手机号是否存在，验证码倒计时)

废话不多说直接上代码 html代码: <form method="post" id="form_hroizon" enctype="multipart/form-data" action="/"> <input type="hidden" name="phoneTemplet" id="phoneTemplet"> <input type
js实现发送验证码后的倒计时功能

之前分享过只用js实现倒计时的功能,后来测试时发现,刷新或关闭网页后,倒计时就不能用了.网上也没找到合适的解决方案,所以自己就写了个,这次的算是优化版吧,能满足刷新或重新打开网页后,倒计时依然能用特别说明: cookie最初创建的有效时间是60秒.也就是说,你如果在倒计时为20的时候,关闭网页.20秒之后再打开,是不会有倒计时显示的;但是,如果倒计时为20时,关闭页面,如果在20秒内重新打开页面,是有倒计时显示的. html代码 <input id="second" type=
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)

相关阅读: 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭) 下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂. 具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus
JS实现验证码倒计时的注册页面

原型图需求:手机号验证发送验证码之后开始60S倒计时 60s以后如果没有填写验证码,可重新发送 <!doctype html> <html> <head> <meta charset="utf-8"> <title>注册</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
js实现点击获取验证码倒计时效果

网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果.实现这个功能,一个setInterval和一个clearInterval就能搞定了,不需要太多的代码.实例效果和代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="button" style="height:
JS实现用户注册时获取短信验证码和倒计时功能

在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时. 效果如下: <div class="user-form"> <form action="{{ path('zm_member_register') }}" method="post"> <div class="form-list"> <label class="register-label"&g
JS/jQ实现免费获取手机验证码倒计时效果

最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平台首先去要注册一个账号,在设置里面
JS 实现获取验证码倒计时功能

setInterval 一个定时器搞定 <style> button{ background: #45BCF9; color: #fff; padding: 4px 10px; border: none; outline: none; cursor: pointer; } button:hover{ background: #00a8fe; } button.disabled{ background: #000; cursor: auto; } button.disabled:hover{ b
Angular.js实现获取验证码倒计时60秒按钮的简单方法

前言本文主要介绍了关于Angular.js实现获取验证码倒计时60秒按钮的相关内容,关于这个功能相信不用多介绍,大家都不陌生,所以下面话不多说了,来一起看看实现的方法吧. 一.controller中代码 angular.module('controllers') .controller('LoginCtrl', function ($scope, $location,$ionicLoading,$rootScope,$interval,$timeout) { $scope.timer = fa
JS短信验证码倒计时功能的实现（没有验证码，只有倒计时）

1.功能描述当用户想要获取验证码时,就点击免费获取验证码 ,然后开始倒计时,倒计时期间按钮文字为剩余时间x秒,且不可按状态,倒计时结束后,按钮更改为点击重新发送. 2.分析必须用到定时器.按钮点击后,在定时器内做出判断.倒计时60秒,到0结束. 3.代码实现: 重点介绍:定时器在进行下一次倒计时之前,一定要清除一下,这样的话保证下一次定时器倒计时是正常的. <!DOCTYPE html> <html> <head> <meta charset="U
Android实现获取验证码倒计时功能

本文实例为大家分享了android获取验证码倒计时功能的具体代码,供大家参考,具体内容如下获取验证码倒计时在现在的App中非常常见,他主要的功能点就是给TextView设置一个点击事件,但是当点击后或出现倒计时,在倒计时的时候点击是触发不了点击事件的. 等倒计时结束显示重新获取验证码的时候可以重新触发点击事件: 在真实的项目中一般都是设置一分钟,咱们这里就不设置那么长了,设置10秒: 首先说下我这个demo非常简单,工具类不用管,直接复制到项目中,只需要两步两行代码即可: 第一步:初始化工具类
Android 简单封装获取验证码倒计时功能

效果如下图所示: 如图所示的效果相信大家都不陌生,我们可以使用很多种方法去实现此效果,这里自己采用 CountDownTimer 定时器简单封装下此效果,方便我们随时调用. 首页先在 attrs.xml 中定义下所需的几个属性: <resources> <declare-styleable name="CountDownButton"> <attr name="millisinfuture" format="integer&q
uni-app实现获取验证码倒计时功能

本文实例为大家分享了uni-app实现获取验证码倒计时的具体代码,供大家参考,具体内容如下实现的效果页面部分是一个三目运算,codeTime是倒计时的时间. <template> <view> <view class="three"> <view class="get" @tap="getCheckNum()"> <text>{{!codeTime?'获取验证码':codeTime+
Flutter之Timer实现短信验证码获取60s倒计时功能的代码

先看下效果: 两种需求场景: 1.广告页3s后跳转到首页 2.短信验证码60s倒计时第一种的话,根据需求我们可以知道,我们想要的效果就是3s结束做出一个动作. factory Timer(Duration duration, void callback()) { if (Zone.current == Zone.root) { // No need to bind the callback. We know that the root's timer will // be invoked in
微信小程序项目实践之验证码倒计时功能

效果如下:点击发送验证码按钮,按钮背景变色,不可点击,显示倒计时文字首先js文件的data里面声明一个变量用于表示当前是否可以点击,codeIsCanClick = true, 默认是可以点击的写下界面代码: wxml文件中 <view class='centerRow'> <view class='inputLabel'>动态码:</view> <input class='inputStyle' style="flex:1 " bin
微信小程序实现手机获取验证码倒计时60s

本文实例为大家分享了微信小程序实现手机获取验证码倒计时的具体代码,供大家参考,具体内容如下功能展示: WXML: <view class="all">  <view class="tel">  <view class="icon_tel"> <image class="tel_image

JS 实现获取验证码 倒计时功能

相关推荐

随机推荐

JS 实现获取验证码倒计时功能