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中如何生成动态的图片验 ...
随机推荐
- Flask 基础组件(五):请求和响应
from flask import Flask from flask import request from flask import render_template from flask impor ...
- C#-性能-二维数组和数组的数组的性能比较
两者是3:2的消耗比例 const int NUM = 10000; int[,] vec = new int[NUM, NUM]; Stopwatch sw = Stopwatch.StartNew ...
- C#程序安装为windows服务的方式
项目开发中,需要将采集程序以windows服务的形式进行部署,可分为定时采集程序以及监控采集程序. 1.定时采集程序 采用Quartz.net框架实现定时任务,针对该种情形,可采用批处理文件的形式进行 ...
- python利用selenium(webdriver chrome)模拟登陆获取cookie
(我是在windows下进行实验的) 准备工作: 1.安装python环境. 2.python安装selenium插件(执行以下命令就行). pip install selenium 3.Wind ...
- vscode安装rainbow-fart(彩虹屁)插件,程序员只能自我鼓励了!!!
2020-7-10更新 Rainbow Fart 插件现以发布到 VSCode 商店,安装过 VSIX 版本的用户请卸载之前的版本,从商店安装. 从 VSCode 扩展商店 下载并安装.(更新vsco ...
- FileNotFoundError: [WinError 2] 系统找不到指定的文件。 解决方案
用Idle运行Python脚本的时候发现如下错误: Traceback (most recent call last): File "C:\Users\DangKai\Desktop\pyt ...
- css :clip rect 正确的使用方法
CSS clip 是一个极少使用,但又确实存在的属性. 而且,它其实在CSS2时代就有了. w3school 上有这么一句话: clip 属性剪裁绝对定位元素. 也就是说,只有 position:ab ...
- Git 推送到远程仓库
github:https://github.com/ 国内的:https://gitee.com/ (和Github非常相似的) 一.Http方式进行推送 右击同步,配置远端,将URL替换成远程仓库的 ...
- 设计模式:command模式
目的:将命令设计成类的形式,并可以组织成队列 优点: 在需要的情况下,可以比较容易地将命令记入日志 可以容易的实现对请求的撤销和重做 由于新的具体命令类不影响其他的命令类,因此增加新的具体命令类很容易 ...
- 从零开始一起学Blazor WebAssembly 开发(4)
登录模块基本完成了,登录主要用了以下几个点: 1.后端采用的Abp Vnext 框架,这个框架自带的IdentityServer4用户角色权限控制,这个框架登录研究了好一阵子,有几个坑这里说下: 1) ...