原生 JS 实现手机验证码倒计时
可以使用 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 实现手机验证码倒计时的更多相关文章
- js获取手机验证码倒计时的实现
方案一 <div class="div user-input"> <input type="number" class="code& ...
- js&jq 发送验证码倒计时
<input type="text" name='' id="btn"> //发送验证码倒计时var wait=30; function t ...
- AngularJS $timeout和 $interval ，定时器手机验证码倒计时
$interval是 window.setInterval的Angular包装形式.$interval指每次延迟时间后执行响应的函数(也可以说:每次执行函数的间隔时间).$interval多数用于计时 ...
- jquery实现获取手机验证码倒计时效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【jQuery】手机验证码倒计时效果
<ul class="ulist"> <li class="group"> <label class="label&qu ...
- js实现发送验证码倒计时效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js实现发送验证码倒计时按钮
在写注册页面时,有时候需要发送注册邮件来获取验证码,但是为了防止多次重复发送邮件, 必须让按钮隔一段时间后才能再次使用. 代码如下: <html> <head> <met ...
- 原生js实现发送验证码
var form = { myfun:function(){ var el = form.config().el; var button = form.config().button; var tim ...
- 微信小程序发送手机验证码---倒计时
var currentTime = 59 //倒计时的事件(单位:s)var interval = null //倒计时函数 Page({ data: { time:59 //倒计时 }, onLoa ...
随机推荐
- 学习vue.js的正确姿势(转载)
最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序 ...
- windows安装Anaconda3
目录 windows安装Anaconda3 环境 安装 windows安装Anaconda3 by 铁乐与猫 环境 windows7 64位 Anaconda3 5.2.0版本 windows64位 ...
- [WPF]启动参数
在App.xaml.cs中重写方法OnStartup protected override void OnStartup(StartupEventArgs e) { //e.Args为命令行参数 // ...
- Python中日期时间案例演示
案例:准备10个人姓名,然后为这10个人随机生成生日[都是90后] 1.统计出那些人是夏季[6月-8月]出生的. 2.最大的比最小的大多少天 3.谁的生日最早,谁的生日最晚 备注:春季[3-5]夏季[ ...
- DevExpress04、LayoutControl、GalleryControl
首先需求是通过LayoutControl控件设计下图所示的窗体: 从该界面的设计过程 1.向窗体中添加LayoutControl控件 在将该控件拖入窗体后,最好立即设置该控件的尺寸和位置.拖入后,在如 ...
- String真的是不可变的吗？
你可能问一个人String是可变的吗?想必他们都会一口同生的说String是不可变的,因为String是final修饰的,而且它底层的是final修饰的char[]数组. 可以看到String源码: ...
- AndroidStudio编译error:app:validateReleaseSigning'Keystore file not found for signing config 'release
使用AndroidStudio编译时提示error: Error:Execution failed for task ‘:app:validateReleaseSigning’. > Keyst ...
- 【转】 最新版chrome谷歌浏览器Ajax跨域调试问题
Ajax本身是不支持跨域的,而我们在开发工作中,可能会遇到本地开发环境未配置相关代码,需要到其他服务器上获取数据的情况,尤其在用HTML5开发app的过程中,前后台完全分离,使用Ajax进行数据交互, ...
- JAVA框架：hibernate（四）
一.绑定本地session 原理:之前connection实现事务一个道理,2种方法:1.变量下传.2.因为servlet是单线程,和本地当前线程绑定. 配置: 1)配置核心配置文件hibernate ...
- Flask 邮件发送
欢迎关注小婷儿的博客: csdn:https://blog.csdn.net/u010986753 博客园:http://www.cnblogs.com/xxtalhr/ 有问题请在博客下留言或加QQ ...