可以使用 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. DevOps之基础设施-电力

    唠叨话 关于噢屁事的知识点,仅提供精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <基础设施-电力> 关于基础设施的电力部分,知识与技能的层次(知道.理解.运用),理论与实践的 ...

  2. SQL Server 跨网段（跨机房）通过备份文件初始化复制

    笔者最近碰到了需要搭建跨网段的SQL Server复制,实际的拓扑结构如下草图所示: 发布端A服务器位于CDC机房中 订阅端B服务器位于阿里云 因为SQL Server复制不支持通过IP连接分发服务器 ...

  3. 在命令行中创建Django项目

    1.终端先进入你要放项目的目录. 在命令行输入:django-admin startproject 项目名  .回车,此时创建了一个项目. 例:django-admin startproject my ...

  4. 类Unix上5个最佳开源备份工具 Bacula/Amanda/Backupninja/Backuppc/UrBackup

    当为一个企业选择备份工具的时候,你都考虑什么呢? 确定你正在部署的软件具有下面的特性 开源软件 – 你务必要选择那些源码可以免费获得,并且可以修改的软件.确信可以恢复你的数据,即使是软件供应商/项目停 ...

  5. 《SQL Server 2008从入门到精通》--20180716

    1.锁 当多个用户同时对同一个数据进行修改时会产生并发问题,使用事务就可以解决这个问题.但是为了防止其他用户修改另一个还没完成的事务中的数据,就需要在事务中用到锁. SQL Server 2008提供 ...

  6. linux内核完全剖析——基于0.12内核-笔记（1）-CPU 数据通信

    CPU数据通信总线 CPU通过地址线.数据线.控制信号组成的本地总线(或称为内部总线)与系统其它部分进行数据通信. 地址总线 地址总线用于内存或I/O设备的地址,即指明需要读/写数据的具体位置. 数据 ...

  7. RSA 非对称加密，私钥转码为pkcs8 错误总结

    RSA 非对称加密,私钥转码为pkcs8 错误总结 最近在和某上市公司对接金融方面的业务时,关于RSA对接过程中遇到了一个坑,特来分享下解决方案. 该上市公司简称为A公司,我们简称为B公司.A-B两家 ...

  8. 打开word文档时提示“Microsoft Office Word已停止工作”

    我的电脑(Win10)有Office 2003和2013两个版本,可能由于之前超长待机等原因导致word 2003的文件(.doc)不能正常打开,没次都会提示“Microsoft Office Wor ...

  9. 本博客已不再更新，新文章将发布在我的个人博客：https://www.tapme.top

    如题,本博客已不再更新,请访问个人博客:www.tapme.top

  10. Tengine 2.1.2 (nginx/1.6.2)安装配置，淘宝 Web 服务器

    简介 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.Tengine的性能和稳定性已经在大型的网站如淘宝网,天猫商城等得到了很 ...