JS 获取验证码按钮改变案例
HTML代码
<div class="box">
<label for="">手机号</label> <input type="number"> <button>获取</button>
</div>
JS代码
1 var btn = document.querySelector('button')
2 var time = 10;
3 btn.addEventListener('click', function () {
4 this.disabled = true;
5 var timer = setInterval(function () {
6 if (time == 0) {
7 clearTimeout(timer)
8 btn.disabled = false;
9 btn.innerHTML = '发送'
10 time = 10;
11 } else {
12 btn.innerHTML = '还剩下' + time + '秒'
13 time--;
14 }
15 }, 1000)
16 })
效果图
JS 获取验证码按钮改变案例的更多相关文章
- [RN] React Native 获取验证码 按钮
React Native 获取验证码 按钮 效果如图: 实现方法: 一.获取验证码 按钮组件 封装 CountDownButton.js "use strict"; import ...
- iOS “获取验证码”按钮的倒计时功能
iOS 的倒计时有多种实现细节,Cocoa Touch 为我们提供了 NSTimer 类和 GCD 的dispatch_source_set_timer方法去更加方便的使用计时器.我们也可以很容易的的 ...
- Angular.js 使用获取验证码按钮实现-倒计时
获取验证码界面效果如图: 需要实现以下逻辑 按钮不可选 --输入电话号码,按钮可选 --点击获取,进入倒计时,按钮不可选 --倒计时结束,回到初识状态 核心代码: var cd = 60; var t ...
- 前端:JS获取单击按钮单元格所在行的信息
在操作表格前后端交互式时,总会遇到将所要操作的行的信息传至后台进行数据库更新的操作,本文适用于标准的html页面和js库,并提出了三种操作方式根据实际情况进行选择 1.表格格式如图所示 2.表格代码如 ...
- JS获取验证码后倒计时不受刷新及关闭影响
HTML部分 <input type="button" id="code_btn" value="获取验证码"> JS部分 // ...
- js获取验证码 秒表效果(原创)
<script src="http://code.jquery.com/jquery-latest.js"></script> <input type ...
- JS 获取验证码 倒计时
setInterval 一个定时器搞定 <style> button{ background: #45BCF9; color: #fff; padding: 4px 10px; borde ...
- js 获取验证码计时器
效果图: 贴上代码: <div class="logintitle"> <input type="tel" id="mobile&q ...
- ASP.NET中图片验证码与js获取验证码的值
现在的程序中,为了防止用户恶意点击,我们一般都会加上验证,现在比较普遍的是加上图片验证码或者手机短信验证.验证码一般都是防机器不防人,有效的防止了恶意点击. 那么在webform中如何生成动态的图片验 ...
随机推荐
- scrapy 基础组件专题(七):scrapy 调度器、调度器中间件、自定义调度器
一.调度器 配置 SCHEDULER = 'scrapy.core.scheduler.Scheduler' #表示scrapy包下core文件夹scheduler文件Scheduler类# 可以通过 ...
- python 生成器(四):生成器基础(四)标准库中的生成器函数
os.walk 这个函数在遍历目录树的过程中产出文件名,因此递归搜索文件系统像for 循环那样简单. 用于过滤的生成器函数 模块 函数 说明 itertools compress(it,sele ...
- Integer和Long部分源码分析
Integer和Long的java中使用特别广泛,本人主要一下Integer.toString(int i)和Long.toString(long i)方法,其他方法都比较容易理解. Integer. ...
- 深入理解JVM(③)再谈线程安全
前言 我们在编写程序的时候,一般是有个顺序的,就是先实现再优化,并不是所有的牛P程序都是一次就写出来的,肯定都是不断的优化完善来持续实现的.因此我们在考虑实现高并发程序的时候,要先保证并发的正确性,然 ...
- 怎样从gitHub上面拉项目
1.注册 https://gitee.com/oschina 2.拿到代码在gitHub上的地址 3.打开eclipse-->import https://git.oschina.net/cai ...
- 我一天的工作,同事一个小时就做完了?python的应用
" ONE " 众所周知,现在很多行业,都离不开用Excel: 做财务的,要用Excel做报表: 做物流的,会用Excel来跟踪订单情况: 做HR的,会用Excel算工资: 做 ...
- P4017 最大食物链计数(洛谷)
老师开始帮我们查漏补缺啦!我们的老师这两天给了我们一些我们没怎么学的函数和算法,比如STL的函数和拓扑排序之类的,这个题就是讲拓扑排序的. 先看题板: 题目背景 你知道食物链吗?Delia 生物考试的 ...
- 一次HTTP请求服务的完整过程-请求处理过程
0.DNS域名解析:递归查询.迭代查询 递归查询:客户端向第一个服务器查询,给最终结果 迭代查询:第一个服务器向根查询 1 .建立连接:接收或拒绝连接请求:三次握手的过程 提高HTTP 连接性能: 并 ...
- 华东师范大学数学分析课本p294,引理3的我的更正证明
书上的证明是一个特例,我的证明是,如果这个特例不成立,就继续做n-1,直到特例的情况出现,即可.
- rpm -ivh vsftpd-3.0.2-22.el7.x86_64.rpm出现error: open of vsftpd-3.0.2-22.el7.x86_64.rpm failed: No such file or directory的解决方法
情况一: 出现如图问题, 我当时的问题是通过安装rpmbuild工具软件解决的 以前制作rpm时,没有遇到过这个问题,几经搜索也没有解决.后来发现当前的centos没有安装 rpmbuild 工具软件 ...