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. A Mountaineer 最详细的解题报告

    题目来源:A Mountaineer (不知道该链接是否可以直接访问,所以将题目复制下来了) 题目如下: D - A Mountaineer Time limit : 2sec / Stack lim ...

  2. 3dTiles 数据规范详解[4.2] i3dm瓦片二进制数据文件结构

    i3dm,即 Instanced 3D Model,实例三维模型的意思. 诸如树木.路灯.路边的垃圾桶.长椅等具有明显 重复 特征的数据.这类数据用得较少(笑,现在都喜欢搞BIM.倾斜摄影.精模.白模 ...

  3. 用matplotlib绘制图片示例(新)

    test /*! * * Twitter Bootstrap * */ /*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 201 ...

  4. 服务注册与发现【Eureka】- Eureka简介

    什么是服务治理 SpringCloud 封装了 Netflix 公司开发的 Eureka 模块来 实现服务治理. 在传统的rpc远程调用框架中,管理每个服务与服务之间依赖关系比较复杂,管理比较复杂,所 ...

  5. Maven配置文件中的版本使用-SNAPSHOT

    SNAPSHOT是什么? SNAPSHOT是快照,是一种特殊的版本,制定了某个当前的开发进度副本.不同于正式版本,Maven每次构建都会在远程仓库中检查新的快照.如此每次发布更新代码的快照到仓库中,新 ...

  6. MacOS中Mysql设置默认字符集

    一.查看字符集 mysql> show variables like 'character%'; +--------------------------+-------------------- ...

  7. 乌班图16 配置nginx

    阿里云 乌班图16 安装ngnix sudo apt install nginx nginx 启动 重启 关闭 sudo service nginx start restart stop status ...

  8. wpf中实现快捷键

    <Window.InputBindings> <KeyBinding Gesture="Ctrl+Alt+Q" Command="{Binding Yo ...

  9. django-rest-framework-源码解析004-三大验证(认证/权限/限流)

    三大验证模块概述 在DRF的APIView重写的dispatch方法中,  self.initial(request, *args, **kwargs) 这句话就是执行三大验证的逻辑, 点进去可以看到 ...

  10. DJANGO-天天生鲜项目从0到1-010-购物车-购物车操作页面(勾选+删改)

    本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’,视频讲的非常好,推荐新手观看学习 https://www.bilibili.com/video/BV1vt41147K8?p= ...