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中如何生成动态的图片验 ...
随机推荐
- 李航统计学习方法(第二版)(十):决策树CART算法
1 简介 1.1 介绍 1.2 生成步骤 CART树算法由以下两步组成:(1)决策树生成:基于训练数据集生成决策树,生成的决策树要尽量大;(2)决策树剪枝:用验证数据集对己生成的树进行剪枝并选择最优子 ...
- python 生成器(二):生成器基础(二)惰性实现
简介 设计 Iterator 接口时考虑到了惰性:next(my_iterator) 一次生成一个元素.懒惰的反义词是急迫,其实,惰性求值(lazy evaluation)和及早求值(eager ev ...
- 空间金字塔池化 ssp-net
<Spatial Pyramid Pooling in Deep Convolutional Networks for Visual Recognition>,这篇paper提出了空间金字 ...
- Python2爬取学生名单
背景: 学校的网站可以根据学号查学生姓名和成绩(三年后的补充:借助sql注入漏洞跳过密码,但是该网站现在已经被弃用了),所以我希望通过Python的爬虫得到年级所有同学的学号与姓名对应表. 实现: 首 ...
- vue : 对 vue-class-component 的个人理解
vue-class-component 是 vue 的官方库,作用是用类的方式编写组件. 这种编写方式可以让.vue文件的js域结构更扁平,并使vue组件可以使用继承.混入等高级特性. 简单的示例: ...
- IDEA 2020.1.2安装破解激活 idea 2020.1.3下载 安装 一键破解
IDEA 2020.1.2 idea 2020.1.3下载 安装 破解 本项目只做个人学习研究之用,不得用于商业用途!若资金允许,请点击链接购买正版,谢谢合作!学生凭学生证可免费申请正版授权!创业公司 ...
- [spring] -- bean作用域跟生命周期篇
作用域 singleton : 唯一 bean 实例,Spring 中的 bean 默认都是单例的. prototype : 每次请求都会创建一个新的 bean 实例. request : 每一次HT ...
- 时间复杂度为O(nlogn)的排序算法
时间复杂度为O(nlogn)的排序算法(归并排序.快速排序),比时间复杂度O(n²)的排序算法更适合大规模数据排序. 归并排序 归并排序的核心思想 采用"分治思想",将要排序的数组 ...
- Python 什么时候会被取代?
以下是译文: Python经过了几十年的努力才得到了编程社区的赏识.自2010年以来,Python得到了蓬勃发展,并最终超越了C.C#.Java和JavaScript. 但是,这种趋势将持续到什么 ...
- 理解Linux的硬链接与软链接-转载
理解Linux的硬链接与软链接 来自:https://www.ibm.com/developerworks/cn/linux/l-cn-hardandsymb-links/index.html