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 获取验证码按钮改变案例的更多相关文章

  1. [RN] React Native 获取验证码 按钮

    React Native 获取验证码 按钮 效果如图: 实现方法: 一.获取验证码 按钮组件 封装 CountDownButton.js "use strict"; import ...

  2. iOS “获取验证码”按钮的倒计时功能

    iOS 的倒计时有多种实现细节,Cocoa Touch 为我们提供了 NSTimer 类和 GCD 的dispatch_source_set_timer方法去更加方便的使用计时器.我们也可以很容易的的 ...

  3. Angular.js 使用获取验证码按钮实现-倒计时

    获取验证码界面效果如图: 需要实现以下逻辑 按钮不可选 --输入电话号码,按钮可选 --点击获取,进入倒计时,按钮不可选 --倒计时结束,回到初识状态 核心代码: var cd = 60; var t ...

  4. 前端:JS获取单击按钮单元格所在行的信息

    在操作表格前后端交互式时,总会遇到将所要操作的行的信息传至后台进行数据库更新的操作,本文适用于标准的html页面和js库,并提出了三种操作方式根据实际情况进行选择 1.表格格式如图所示 2.表格代码如 ...

  5. JS获取验证码后倒计时不受刷新及关闭影响

    HTML部分 <input type="button" id="code_btn" value="获取验证码"> JS部分 // ...

  6. js获取验证码 秒表效果(原创)

    <script src="http://code.jquery.com/jquery-latest.js"></script> <input type ...

  7. JS 获取验证码 倒计时

    setInterval 一个定时器搞定 <style> button{ background: #45BCF9; color: #fff; padding: 4px 10px; borde ...

  8. js 获取验证码计时器

    效果图: 贴上代码: <div class="logintitle"> <input type="tel" id="mobile&q ...

  9. ASP.NET中图片验证码与js获取验证码的值

    现在的程序中,为了防止用户恶意点击,我们一般都会加上验证,现在比较普遍的是加上图片验证码或者手机短信验证.验证码一般都是防机器不防人,有效的防止了恶意点击. 那么在webform中如何生成动态的图片验 ...

随机推荐

  1. java 面向对象(十二):面向对象的特征二:继承性 (一) 前言

    1.为什么要有类的继承性?(继承性的好处) * ① 减少了代码的冗余,提高了代码的复用性 * ② 便于功能的扩展 * ③ 为之后多态性的使用,提供了前提图示: 2.继承性的格式:class A ext ...

  2. tensorflw-gpu 运行 。py程序出现gpu不匹配的问题

    安装好了tensorflow-gpu版本,然后程序中写好了 with tf.device('/gpu:0'):   但是python3 .py程序时还是有错误. 报错为: 2018-04-24 12: ...

  3. mysql中DDL库和表的管理

    #DDL /* 数据定义语言 库和表的管理 一.库的管理 创建.修改.删除 二.表的管理 创建.修改.删除 创建:create 修改:alter 删除:drop */ #一.库的管理 #1.库的创建 ...

  4. Hangfire实战(一)------Hangfire+SQL Server实现简单的任务调度

    Hangfire:一个开源的任务调度框架 开发环境:VS2017,SQL Server 2012,.NET Framework 4.5 项目类型:控制台应用程序 1.在vs的程序包控制台中为项目添加H ...

  5. Spring AOP里的静态代理和动态代理,你真的了解嘛?

    什么是代理? 为某一个对象创建一个代理对象,程序不直接用原本的对象,而是由创建的代理对象来控制原对象,通过代理类这中间一层,能有效控制对委托类对象的直接访问,也可以很好地隐藏和保护委托类对象,同时也为 ...

  6. 读取文件夹内容解析为Tree结构

    package com.mine.io; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArray; import ...

  7. Go Pentester - TCP Proxy

    Building a TCP Proxy Using io.Reader and io.Writer Essentially all input/output(I/O). package main i ...

  8. vue学习(七) v-model 双向数据绑定

    //html <div id="app"> <input type="text"v-model="msg" style=& ...

  9. python基础--14大内置模块(上)

    python的内置模块(重点掌握以下模块) 什么是模块 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类 ...

  10. 服务器入侵应急响应排查(Linux篇)

    总体思路 确认问题与系统现象 → 取证清除与影响评估 → 系统加固 → 复盘整改 常见入侵 ① 挖矿: 表象:CPU增高.可疑定时任务.外联矿池IP. 告警:威胁情报(主要).Hids.蜜罐(挖矿扩散 ...