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. 数据分析02 /pandas基础

    数据分析02 /pandas基础 目录 数据分析02 /pandas基础 1. pandas简介 2. Series 3. DataFrame 4. 总结: 1. pandas简介 numpy能够帮助 ...

  2. 大话深度学习:B站Up主麦叔教你零代码实现图像分类神经网络

    之前,我在B站发布了“大话神经网络,10行代码不调包,听不懂你打我!”的视频后,因为简单易懂受到了很多小伙伴的喜欢! 但也有小伙伴直呼不够过瘾,因为大话神经网络只有4个神经元. 也有小伙伴问不写代码, ...

  3. 《利用Python进行数据分析》自学知识图谱-导航

    项目简介 Project Brief <利用Python进行数据分析-第二版>自学过程中整理的知识图谱. Python for Data Analysis: Data Wrangling ...

  4. Ripple 20:Treck TCP/IP协议漏洞技术分析

    本文由“合天智汇”公众号首发,作者:b1ngo Ripple 20:Treck TCP/IP协议漏洞技术分析 Ripple20是一系列影响数亿台设备的0day(19个),是JSOF研究实验室在Trec ...

  5. Redis中的Scan命令踩坑记

    1 原本以为自己对redis命令还蛮熟悉的,各种数据模型各种基于redis的骚操作.但是最近在使用redis的scan的命令式却踩了一个坑,顿时发觉自己原来对redis的游标理解的很有限.所以记录下这 ...

  6. 使用 forever 启动 vue 需要注意的问题

    forever 是 nodejs 生态中一个用来永久挂起一个应用(当这个应用崩溃时能自己重启)的应用(库). 但用他启动vue的时候必须注意一个问题: 在哪个路径启动vue,就在哪个路径启动forev ...

  7. Azure Traffic Manager(二) 基于权重与基于优先级的路由策略为我们的Web项目提供负载均衡

    一,引言 上一片文章我们使用 Azure Traffic Manager 分发用户请求,同时演示了两种路由策略,“Performance”,“Geographic”的两种方式,今天我们继续讲解 Tra ...

  8. [redis] -- 集群篇

    三种集群方式 主从同步:主从复制模式中包含一个主数据库实例(master)与一个或多个从数据库实例(slave) 优点: master能自动将数据同步到slave,可以进行读写分离,分担master的 ...

  9. 使用queue 做一个分布式爬虫(一)

    这个作为调配的 taskMaster.py #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/12/23 15:21 # @au ...

  10. Python之生成器、迭代器

    生成器 生成器类似返回值为数组的一个函数,这个函数可以接受参数,可被调用,但只能产生一个值,所以大大节省内存. 生成器表达式的语法非常简单,只需要将列表推导式的中括号改成小括号就可以了 [x+x fo ...