JavaScript实现10秒后再次获取验证码

JavaScript网页制作–10秒后再次获取验证码，供大家参考，具体内容如下

通常在注册或者登陆页面时，都会需要短信验证码，在点击按钮获取验证码后会有一段时间无法点击按钮，避免短时间内大量的获取验证码。今天制作这样一个功能。

功能实现：

1、点击获取验证码后禁用按钮
2、按钮中的文字内容改变，每一秒都改变
3、按钮倒计时变为0时恢复按钮，改回文字，重置倒计时t

代码实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>再次获取验证码</title>
</head>
<body>
  <input type="text">
  <button>获取验证码</button>
  <script>
    var btn = document.querySelector('button');
    var t = 10;

    //设置监听事件，按下按钮后禁用按钮
    btn.addEventListener('click',function(){
      btn.disabled = true;
      //添加定时器，时间间隔为一秒
      var time = setInterval(function(){
        if(t==0){//如果倒计时等于0了，清除计时器，恢复按钮，将t重置为10，否则按钮中文字改变，t递减。
          clearInterval(time);
          btn.disabled=false;
          btn.innerHTML='获取验证码';
          t=10;
        }else{
        btn.innerHTML='您可以在'+t+'秒后再次获取';
        t--;
        }
      }, 1000);

    })
  </script>
</body>
</html>

页面预加载后出现获取验证码的按钮

按下获取验证码的按钮后，按钮禁用，倒计时，计时结束后恢复

这个程序看起来不是很难，但是在自己写的时候对于刚接触语言的同学们来说，逻辑的实现还是得好好想一想。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现点击获取验证码倒计时效果

    js实现点击获取验证码倒计时效果

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

  • 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

  • JavaScript获取短信验证码（周期性）

    本文实例为大家分享了js周期性获取短信验证码的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text"/> <input type=

  • JS获取短信验证码倒计时的实现代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: $(function() { var phone_num = /^1\d{10}$/; var flag = 1; //短信发送时标志位 $(".getcode").click(function() { if($("#phone").val() == "") { alert("请输入电话号码!"); return false; }; if(!phone_num.test($

  • JS/jQ实现免费获取手机验证码倒计时效果

    JS/jQ实现免费获取手机验证码倒计时效果

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

  • js实现简单的获取验证码按钮效果

    js实现简单的获取验证码按钮效果

    效果图: 图(1)初始图 图(2)点击后 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>pro.html</title> <style type="text/css"> .checkCode { cursor: pointer; border: 1px solid black; text-ali

  • ionic+AngularJs实现获取验证码倒计时按钮

    ionic+AngularJs实现获取验证码倒计时按钮

    按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 主要实现原理:点击后,设置一个$interval,每一秒更改一次剩余时间,并依赖Angular数据绑定实时显示在页面中.设置一个$timeout,60秒后将按钮初始化到可用状态. 实现代码: (1)js代码,设置成一个directive以便多次调用. angular.module('winwin').directive('timerbutton', function($timeout, $interval){

  • Angular.js实现获取验证码倒计时60秒按钮的简单方法

    Angular.js实现获取验证码倒计时60秒按钮的简单方法

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

  • JS+HTML5实现获取手机验证码倒计时按钮

    JS+HTML5实现获取手机验证码倒计时按钮

    效果图如下所示: HTML: <input type="button" value="获取验证码"> CSS: input[type=button] width: 150px; height: 30px; background-color: #ff3000; border: 0; border-radius: 15px; color: #fff; } input[type=button].on { background-color: #eee; colo

  • JS实现用户注册时获取短信验证码和倒计时功能

    JS实现用户注册时获取短信验证码和倒计时功能

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

随机推荐