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中如何生成动态的图片验 ...
随机推荐
- Log4net控制台和窗体程序无法输出记录的原因之一
在asp.net web应用程序中,读取log4net的配置文件可以这样写: [assembly:log4net.Config.XmlConfigurator(ConfigFile="Web ...
- bzoj3378[Usaco2004 Open]MooFest 狂欢节*
bzoj3378[Usaco2004 Open]MooFest 狂欢节 题意: n只奶牛,第i只听力为vi,坐标为xi,两只奶牛聊天时音量是max(vi,vj)*abs(xi-xj).求n(n-1)/ ...
- ADB-常见命令使用详解
ADB命令使用详解 ADB是一个 客户端-服务器端 程序, 其中客户端是你用来操作的电脑, 服务器端是android设备. 1.连接android设置adb connect 设备名例如:adb con ...
- 用Canvas定时显示摄像头捕获的画像(HTML5)
需要实现一个功能,大意嘛,就是标题写的那个意思.虽然用户只要求在微信中实现即可,也就是可以用JSSDK.但是前端小哥哥脑袋一根筋,就想用原生的H5和JS实现. 网上铺天盖地的资料,可惜没有一个是可以用 ...
- smartJQueryZoom(smartZoom) 的使用方法
smartZoom 是一个我很喜欢用的库. 但是这个库有一些不完善的地方. 比如BUG. 比如使用上可能遇到的问题. <article> <div id="zoom_box ...
- 设计模式:memento模式
目的:在不破坏系统封装性的前提下,记录系统每一步的状态,可以做到状态回退和前进 方法: 定义一个数据类,保存所有相关数据 定义一个管理类,提供保存和恢复的接口 具体操作类调用管理类的保存和恢复接口 例 ...
- 聊一聊Flutter的setState()
Flutter 里面包含两种widget 一种可变的,一种不可变的: 在可变的widget中可以使用 setstate(){} 函数. 官方也给出了例子: _onClick(){ setState() ...
- 【扩展推荐】Intervention/image 图片处理
Intervention/image 是为 Laravel 定制的图片处理工具, 它提供了一套易于表达的方式来创建.编辑图片. 一.环境要求 二.安装及配置 下载地址:https://packagis ...
- It还是高薪行业不?—软件测试
It还是高薪行业不?—软件测试 谁都希望拿高薪,但是并不是所有人.所有地方都能的:甚者培训出来还不能就业的大有人在,也不是所有人都适合培训后就业(年龄.学历.专业.期望就业地点.不同行业转行还是有很大 ...
- ubuntu的docker安装
安装docker 安装 介绍一下docker 的中央仓库们 Docker官方中央仓库: https://hub.docker.com/ 因为docker 网站在国外所以访问速度和你的运气有关还有网络. ...