可以使用 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. qt调用js，js调用qt

    <html> <script language="JavaScript"> function qtcalljs() { alert("sdfsd& ...

  2. 关于innodb mtr模块

    mtr (mini-transaction)微事务 mtr作用 mtr模块主要保证物理操作的一致性和原子性 1 一致性:通过读写锁来保证 2 原子性:涉及到的物理更新,都记入redo日志 mtr何时使 ...

  3. python常用模块之-random模块

    random模块顾名思义就是生成随机数的模块. random模块有以下常见方法: 1,打印0-1之间的任意随机浮点数,不能指定区间. print(random.random()) 2,打印随机符点数, ...

  4. win Server 2008 笔记

    1.开启tsmmc 远程登录连接 需要在入站规则中启用一下规则 远程管理(RPC-EPMAP) 远程管理(RPC) 远程管理(RPCNP-IN) 远程管理(TCP-IN) 远程管理 - RemoteF ...

  5. JS获取元素宽高的两种情况

    JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用     document.getElementById('xxx'). ...

  6. 推荐：Asp.Net MVC 多语言（html+js共用一套资源文件）

    此文主要是最近做多语言的工作的一个经验分享.文中的内容为参照多位大神的方案后,自己揉捏出来的一个新的方案,对于html和javascript部分的多语言的切换,共用一套资源文件.代码中主要是使用 IH ...

  7. Spine Skeleton Animation(2D骨骼动画)

    骨骼动画 首先我们来看到底什么是骨骼动画: 在早期的机器上,渲染本身已经占用了很多CPU资源,因此,对于渲染,往往采取的是一种空间换时间的策略,以避免在模型的渲染中继续加重CPU的负担.帧动画模型在这 ...

  8. mysql 表格操作指令大全（Show、desc、create、insert into、delete、select、drop、update、alter）

    使用数据库 use 数据库名 eg: use weiying 2. 查看库里所有的表 Show tables 3.查看所表的结构  desc 表名 desc score 4.建表create tabl ...

  9. 【转】Linux思维导图

    [原文]https://www.toutiao.com/i6591690511763898888/ 1.Linux学习路径: 2.Linux桌面介绍: 3.FHS(文件系统目录标准): 4.Linux ...

  10. sysbench压力工具报错：

    [root@ sysbench-]# /usr/local/sysbench/bin/sysbench --version : cannot open shared object file: No s ...