可以使用 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. LeeTCode题解之Remove Duplicates from Sorted List

    1.题目描述 2.问题分析 对于链表中的每一个元素,找到其后面和它不相等的第一个元素,然后指向该元素. 3.代码 ListNode* deleteDuplicates(ListNode* head) ...

  2. 巧用top percent优化top 1

    废话不多说,直接上sql B.CREW_ID, E.CREW_NAME,C.OFFBLK,C.ONBLK,dbo.PEK_OPS_Date(A.STD) as STD FROM dbo.FLIGHTS ...

  3. 【MySQL运维实践】

    什么是日志 日志(log)是一种顺序记录事件流水的文件 记录计算机程序运行过程中发生了什么 多种多样的用途  帮助分析程序问题 分析服务请求的特征.流量等 判断工作是否成功执行 等等…… MySQL日 ...

  4. sysdate()简单用法

    环境: create table rq (xm varchar2(10),age number,zw varchar(10),rzrq date);insert into rq values ('小崔 ...

  5. Python实例---爬取下载喜马拉雅音频文件

    PyCharm下python爬虫准备 打开pycharm 点击设置 点击项目解释器,再点击右边+号 搜索相关库并添加,例如:requests 喜马拉雅全网递归下载 打开谷歌/火狐浏览器,按F12打开开 ...

  6. [HZNOI #koishi] Magic

    [HZNOI #514] Magic 题意 给定一个 \(n\) 个点 \(m\) 条边的有向图, 每个点有两个权值 \(a_i\) 和 \(b_i\), 可以以 \(b_i\) 的花费把第 \(i\ ...

  7. Nginx防hashdos模块使用帮助

    经过上周一周朋友们帮忙测试和bug fix,nginx_http_hashdos_module已经达到可以线上使用的水平,下面是使用记录. 下载 #wget --no-check-certificat ...

  8. python爬虫（三）

    webdriver Selenium是ThroughtWorks公司开发的一套Web自动化测试工具.它分为三个组件:Selenium IDE,Selenium RC (Remote Control), ...

  9. 13.5.SolrCloud集群使用手册之数据导入

    转载请出自出处:http://www.cnblogs.com/hd3013779515/ 1.使用curl命令方式 SolrCloud时会根据路由规则路由到各个shard. 删除所有数据 curl h ...

  10. ES6中变量解构的用途—遍历Map结构