可以使用 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. OneASP 安全公开课，深圳站， Come Here, Feel Safe!

    在这个世界上,一共有两种公司:一种被「黑」过,另一种,不知道自己被「黑」过. 在安全攻击频发的今天: 如何构建完善的安全防护壁垒? 如何借助威胁情报改善安全态势? 如何检测新形式下的漏洞? 答案,就在 ...

  2. 03-04_配置并启动Managed Server(受管服务器)

    本文重点: 配置Managed Servers(受管服务器) 启动Managed Servers 原理 运行多个Managed Servers实例             一.配置Managed Se ...

  3. js经典应用

    一.js字符串转数字: 1.parseInt()和parseFloat()两个转换函数: 2.强制类型转换,Number(value)——把给定的值转换成数字(可以是整数或浮点数): 3.利用js变量 ...

  4. python基础学习16----模块

    模块(Module)的引入 import 模块名 调用模块中的函数的方式为 模块名.函数名 这种方式引入会相当于将模块中代码执行一遍,所以如果引入的模块中有输出语句,那么只写import 模块名,运行 ...

  5. python基础学习10----集合

    集合具有无序性,互异性 一.集合的建立 空集合 s=set() s={}#这样默认为是一个空字典 集合内的元素是可哈希的即不可变的数据类型 s={1,2,3,4} s=set([1,2,3,4]) s ...

  6. 粗略的整改一下blog

    一.先找个简约的模板:看个人喜好咯 二.页面定制CSS: 1.首先,查看主页源码,了解一下各个标签的id,引用的class等 2.通过操作相应的id,class,和标签,进行个性化.这里需要具备看懂和 ...

  7. 【Alpha 冲刺】 6/12

    今日任务总结 人员 今日原定任务 完成情况 遇到问题 贡献值 胡武成 建立数据库 未完成 表结构文档已设计好,服务器mysql刚配置完成,但是,SpringMVC框架还没有熟络,不清楚如何使用该框架去 ...

  8. Stop Bitbucket prompting for password in git

    出处:http://qosys.info/485/bitbucket-git-prompt-for-password In some cases after adding public ssh key ...

  9. 分析占用了大量CPU处理时间的java进程中的进程

    分析占用了大量 CPU 处理时间的是Java 进程中哪个线程 下面是详细步骤: 1. 首先确定进程的 ID ,可以使用 jps -v 或者 top 命令直接查看 2. 查看该进程中哪个线程占用大量 C ...

  10. day4-课堂代码

    # ---------------------------------------------------------------------- # def my_function1(name, ad ...