可以使用 pointer-events 来阻止元素成为鼠标事件的 target。html5 新增操作元素 class 类名的方式 classList。

classList 方法

  • add(value)：在元素中添加一个或多个类名。如果值已经存在，就不添加了。
  • contains(value): 返回布尔值，判断指定的类名是否存在。
  • remove(value)：移除元素属性列表中一个或多个类名。注意： 移除不存在的类名，不会报错。
  • toggle(value)：在元素中切换类名。如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它

原生 JS 实现手机验证码倒计时

单击“发送验证码”后，需等待 10 秒才能再次单击“重发获取”，在此期间，可以使用 pointer-events 来阻止元素成为鼠标事件的目标。源码参考如下。

<!DOCTYPE html>

<html>

<head>

    <title> 手机验证码 </title>

    <meta charset="utf-8" />

</head>

<style>

    a{

        color:red;

    }

    .disable{

        pointer-events:none;

        color:#666;

    }

</style>

<body>

    <p>

        <input type="text" placeholder="请输入手机号">

    </p>

    <p>

        <input type="text" placeholder="验证码">

        <a href="javascript:;" id="btn">发送验证码</a>

    </p>

    <script type="text/javascript">

        var oBtn = document.getElementById('btn');

        var flag = true;

        oBtn.addEventListener("click", function () {

            var time = 10;

            oBtn.classList.add('disable');

            oBtn.innerText = '已发送';

            if (flag) {

                flag = false;

                var timer = setInterval(() => {

                    time--;

                    oBtn.innerText = time + ' 秒';

                    if (time === 0) {

                        clearInterval(timer);

                        oBtn.innerText = '重新获取';

                        oBtn.classList.remove('disable');

                        flag = true;

                    }

                }, 1000)

            }

        });

    </script>

</body>

</html>

原生 JS 实现手机验证码倒计时的更多相关文章

  1. js获取手机验证码倒计时的实现

    方案一 <div class="div user-input"> <input type="number" class="code& ...

  2. js&jq 发送验证码倒计时

    <input  type="text"   name=''  id="btn"> //发送验证码倒计时var wait=30; function t ...

  3. AngularJS $timeout和 $interval ，定时器手机验证码倒计时

    $interval是 window.setInterval的Angular包装形式.$interval指每次延迟时间后执行响应的函数(也可以说:每次执行函数的间隔时间).$interval多数用于计时 ...

  4. jquery实现获取手机验证码倒计时效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 【jQuery】手机验证码倒计时效果

    <ul class="ulist"> <li class="group"> <label class="label&qu ...

  6. js实现发送验证码倒计时效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. js实现发送验证码倒计时按钮

    在写注册页面时,有时候需要发送注册邮件来获取验证码,但是为了防止多次重复发送邮件, 必须让按钮隔一段时间后才能再次使用. 代码如下: <html> <head> <met ...

  8. 原生js实现发送验证码

    var form = { myfun:function(){ var el = form.config().el; var button = form.config().button; var tim ...

  9. 微信小程序发送手机验证码---倒计时

    var currentTime = 59 //倒计时的事件(单位:s)var interval = null //倒计时函数 Page({ data: { time:59 //倒计时 }, onLoa ...

随机推荐

  1. UI第二组与数据库对接时遇到的问题记录

    此为组内某一位做UI的同学的随笔. 之前的app由于没有加入数据库,所以每次重新启动里面的东西都会回到初始状态,即不能保存内容.我们的数据库小组已经很棒地基本完成了数据库的工作,于是我就准备加入数据库 ...

  2. LUA 运算笔记

    循环 比如要实现这样的一个For for(int i=10;i>1;i—) { print(i) } lua的for循环 转换成LUA for i=10,1,-1 do print(i) end ...

  3. python基础学习15----异常处理

    异常处理,是编程语言或计算机硬件里的一种机制,用于处理软件或信息系统中出现的异常状况(即超出程序正常执行流程的某些特殊条件). 1.异常的类型 异常的类型多种多样,常见的异常有: AttributeE ...

  4. vsftp配置

    网上很多,但我还是想再整理一份属于自己的 1.vsftp简介 vsftp提供三种登陆方式:.匿名登录 .本地用户登录 .虚拟用户登录 vsftpd的特点:.较高的安全性需求 .带宽的限制 .创建支持虚 ...

  5. Docker容器学习与分享02

    1.docker容器的创建 首先运行一个centos容器,感受一下Docker容器的便捷 首先先看一下镜像仓库 发现仓库里没有镜像,也就是没有创建容器的模板,这时考虑从REPOSITORY中拉取镜像( ...

  6. linux命令1—安装optimizer

    ZendChina官方:下面介绍一下关于在linux环境下Zend Optimizer 3.3的安装方法.本篇文章是基于RHEL5架构的linux系统. (1)ZendOptimizer 3.3.3版 ...

  7. 自定义上传控件（兼容IE8）

    上传控件是 <input type="file"/> 而实际开发过程中,都会自定义一个控件,因为这个控件本身难看,而且不同浏览器效果不一样. 如IE8显示如下: 谷歌浏 ...

  8. Python3编写网络爬虫03-正则表达式的使用

    一.正则表达式(处理字符串强大的工具,有特定的语法结构)功能:实现字符串的检索,替换,匹配验证实例: 地址:http://tool.oschina.net/regex/ #测试文本Hello,my p ...

  9. 利用 share code 插件同步代码片段

    利用 Settings Sync可以同步 VS code 配置,但它只能同步插件,利用  Settings Sync 再配合 share code 插件可以同步自定义代码片段,可以把 VS code ...

  10. Docker技术入门与实战 第二版-学习笔记-9-Docker Compose 项目-2-Compose 命令说明

    Compose 命令说明 1)命令对象与格式 对于 Compose 来说,大部分命令的对象既可以是项目本身,也可以指定为项目中 的服务或者容器.如果没有特别的说明,命令对象将是项目,这意味着项目中所有 ...