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中如何生成动态的图片验 ...
随机推荐
- Python之爬虫(二十五) Scrapy的中间件Downloader Middleware实现User-Agent随机切换
总架构理解Middleware 通过scrapy官网最新的架构图来理解: 这个图较之前的图顺序更加清晰,从图中我们可以看出,在spiders和ENGINE提及ENGINE和DOWNLOADER之间都可 ...
- 前端02 /HTML标签
前端02 /HTML标签 目录 前端02 /HTML标签 1.特殊字符 2.标签分类 标签嵌套 1.块级标签(行内标签) 1.1div标签(块标签) 1.2p标签(块标签) 2.内联标签 2.1 sp ...
- Burp Suite Target Module - 目标模块
模块目的之一:获取网站分析 1.从Proxy - HTTP history界面选中需要加入Target Scope的Host 地址,右击,选中Add to Scope. 2.打开Target - Sc ...
- Ethical Hacking - GAINING ACCESS(13)
CLIENT SIDE ATTACKS Backdoor delivery method2 - backdooring exe downloads Backdoor any exe the targe ...
- SDS——重用StringBuilder
package example.java; /** * @author 杜科 * @description 简单动态字符串,非线程安全.采取类似buffer的设计,使其成为一个可以方便重用的Strin ...
- 从LocalDateTime序列化探讨全局一致性序列化
日拱一卒无有尽,功不唐捐终入海. 楔子 前两周发了三篇SpringSecurity和一篇征文,这周打算写点简单有用易上手的文章,换换脑子,休息一下. 今天要写的是这篇:从LocalDateTime序列 ...
- 基于Python爬虫采集天气网实时信息
相信小伙伴们都知道今冬以来范围最广.持续时间最长.影响最重的一场低温雨雪冰冻天气过程正在进行中.预计,今天安徽.江苏.浙江.湖北.湖南等地有暴雪,局地大暴雪,新增积雪深度4-8厘米,局地可达10- ...
- 【Nginx】如何使用Nginx搭建流媒体服务器实现直播?看完这篇我会了!!
写在前面 最近几年,直播行业比较火,无论是传统行业的直播,还是购物.游戏.教育,都在涉及直播.作为在互联网行业奋斗了多年的小伙伴,你有没有想过如果使用Nginx搭建一套直播环境,那我们该如何搭建呢?别 ...
- boot camp要求独立的fat分区
先在windows把u盘用diskpart clean掉分区表 然后在苹果里面,给u盘重新分区,分区表不要选择GUID,选择主引导记录,格式选择fat,OK
- SpringBoot + Spring Cloud Eureka 服务注册与发现
什么是Spring Cloud Eureka Eureka是Netflix公司开发的开源服务注册发现组件,服务发现可以说是微服务开发的核心功能了,微服务部署后一定要有服务注册和发现的能力,Eureka ...