JS——实现短信验证码的倒计时功能(没有验证码,只有倒计时)

1、功能描述

  当用户想要获取验证码时,就点击 免费获取验证码 ,然后开始倒计时,倒计时期间按钮文字为剩余时间x秒,且不可按状态,倒计时结束后,按钮更改为点击重新发送。

2、分析

  必须用到定时器。按钮点击后,在定时器内做出判断。倒计时60秒,到0结束。

3、代码实现:

  重点介绍:定时器在进行下一次倒计时之前,一定要清除一下,这样的话保证下一次定时器倒计时是正常的。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.send{width:250px;margin:0 auto;}.send input{display: block;width:200px;font:400 16px/30px "微软雅黑";outline: none;border: none;}.send button{height:30px;border: none;outline: none;font:400 16px/30px "微软雅黑";text-align: center;}</style><script type="text/javascript">window.onload=function(){var button=document.getElementsByTagName("button")[0];button.innerText="免费获取验证码";var timer=null;button.onclick=function(){clearInterval(timer);//这句话至关重要var time=6;var that=this;//习惯
                    timer=setInterval(function(){console.log(time);if(time<=0){that.innerText="";that.innerText="点击重新发送";that.disabled=false;}else {that.disabled=true;that.innerText="";that.innerText="剩余时间"+(time)+"";time--;}},1000);}}</script></head><body><div id="send"><input type="text" name="in" id="in" value="" /><button></button></div></body>
</html>

 

转载于:https://www.cnblogs.com/sylz/p/5747937.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/395418.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为OV小米鸿蒙,华为鸿蒙开源,小米OV们会采用吗?

华为曾一直声言不会进入电视市场,由此其他国产电视企业才会采用华为的可见企业是非常担忧同业竞争关系的,而在智能手机市场,华为毫无疑问与其他国产手机企业都是竞争对手,更何况就在2019年下半年和2020年上半年华为在国内手机市场的份额超过四成直逼五成,其他国产手机企业被压得…

第22天:如何使用OpenAI Gym和Universe构建AI游戏机器人

by Harini Janakiraman通过哈里尼贾纳基拉曼 第22天&#xff1a;如何使用OpenAI Gym和Universe构建AI游戏机器人 (Day 22: How to build an AI Game Bot using OpenAI Gym and Universe) Let’s face it, AI is everywhere. A face-off battle is unfolding between Elon Musk…

软件测试基础理论(总结)

1&#xff0e; 软件的三个要素&#xff1a;程序&#xff08;实行特定功能的代码&#xff09; 文档&#xff08;支持代码运行&#xff09; 数据&#xff08;支持程序运行一切有关&#xff09; 2&#xff0e; 软件的产品质量 指的是&#xff1f; 1&#xff09;质量是指实体特性…

android studio 7200u,#本站首晒# 多图杀猫 华为MateBook X上手体验

#本站首晒# 多图杀猫 华为MateBook X上手体验2017-06-09 18:45:4437点赞33收藏78评论前几天华为开了个发布会&#xff0c;带来了三款笔记本电脑&#xff0c;有幸在第一时间借到了MateBook X&#xff0c;现在就来来做一个简单的上手&#xff0c;稍晚一些再跟大家详细聊聊使用起来…

svn强制解锁的几种做法

标签&#xff1a; svn强制解锁2013-12-16 17:40 12953人阅读 评论(0) 收藏 举报分类&#xff1a;SoftwareProject&#xff08;23&#xff09; 版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 作者&#xff1a;朱金灿 来源&#xff1a;http://blog.…

数据结构和算法练习网站_视频和练习介绍了10种常见数据结构

数据结构和算法练习网站“Bad programmers worry about the code. Good programmers worry about data structures and their relationships.” — Linus Torvalds, creator of Linux“糟糕的程序员担心代码。 好的程序员担心数据结构及其关系。” — Linux的创建者Linus Torva…

突然讨厌做前端,讨厌代码_有关互联网用户最讨厌的广告类型的新数据

突然讨厌做前端,讨厌代码You know that feeling when you’re scrolling through a blog post and then — BAM! — one of those “Sign up for our newsletter” modals pops up?当您滚动浏览博客文章&#xff0c;然后-BAM时&#xff0c;您就会知道这种感觉。 -弹出“注册我…

iOS设计模式-生成器

定义&#xff1a;将一个产品的内部表象与产品的生成过程分割开来&#xff0c;从而可以使一个建造过程生成具有不同的内部表象的产品对象。 类型&#xff1a;对象创建 类图&#xff1a; #import <Foundation/Foundation.h> interface Character : NSObject property(nonat…

《Android 应用案例开发大全(第二版)》——导读

本节书摘来自异步社区《Android 应用案例开发大全&#xff08;第二版&#xff09;》一书中的目录 &#xff0c;作者 吴亚峰 , 于复兴 , 杜化美&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看 目 录 第1章 初识庐山真面目——Android简介 1.1 Android的诞生 1…

模块--sys模块

sys模块是与python解释器交互的一个接口 import sys sys.path #python解释器找模块的环境变量import sys print(sys.path)结果:[H:\\王文静\\python\\4练习\\课堂练习, H:\\王文静\\python, C:\\Users\\Administrator\\AppData\\Local\\Programs\\Python\\Python36\\pyth…

匿名方法

与前面的可空类型是一样的&#xff0c;匿名方法也是C# 2.0里面提出来的。 1 匿名方法 1.1 什么是匿名方法&#xff1f; 顾名思义&#xff0c;就是没有名称的方法&#xff0c;因为没有名称&#xff0c;匿名方法只能在函数定义&#xff08;匿名方法是把方法的实现和定义嵌套在了一…

使用React,Redux和Router进行真正的集成测试

by Marcelo Lotif通过马塞洛洛蒂夫(Marcelo Lotif) 使用React&#xff0c;Redux和Router进行真正的集成测试 (Real integration tests with React, Redux and Router) After being bitten a couple of times by bad refactoring and a broken app — even with all my tests…

Go语言从入门到精通 - 数据类型转换

本节核心内容 介绍 Go语言数据类型转换的格式介绍 数据转换代码示例介绍 数据转换过程中的注意事项 本小节视频教程和代码&#xff1a;百度网盘 可先下载视频和源码到本地&#xff0c;边看视频边结合源码理解后续内容&#xff0c;边学边练。 Go语言数据类型转换 Go 语言使用类型…

JNI通过线程c回调java层的函数

1、参看博客&#xff1a;http://www.jianshu.com/p/e576c7e1c403 Android JNI 篇 - JNI回调的三种方法&#xff08;精华篇&#xff09; 2、参看博客&#xff1a; JNI层线程回调Java函数关键点及示例 http://blog.csdn.net/fu_shuwu/article/details/41121741 3 http://blog.cs…

signature=f7a4b29b93ef2b36608792fdef7f454a,Embedding of image authentication signatures

摘要&#xff1a;A method (), an apparatus, a computer readable medium and use of said method for authenticating an audio-visual signal (), such as a digital image or video, are disclosed. A signature is derived from all image regions, including areas with …

glob

主要是用来在匹配文件&#xff0c;相当shell中用通配符匹配. 用法: glob.glob(pathname) # 返回匹配的文件作为一个列表返回 glob.iglob(pathname) # 匹配到的文件名&#xff0c;返回一个迭代器 ps: pathname是路径, 可以是绝对和相对路径 匹配当前目录下有一个数字开头…

构建微服务:Spring boot 入门篇

Spring官方网站本身使用Spring框架开发&#xff0c;随着功能以及业务逻辑的日益复杂&#xff0c;应用伴随着大量的XML配置文件以及复杂的Bean依赖关系。随着Spring 3.0的发布&#xff0c;Spring IO团队逐渐开始摆脱XML配置文件&#xff0c;并且在开发过程中大量使用“约定优先配…

img 加载 svg占位符_如何使用SVG作为占位符以及其他图像加载技术

img 加载 svg占位符by Jos M. Prez由JosM.Prez 如何使用SVG作为占位符以及其他图像加载技术 (How to use SVG as a Placeholder, and Other Image Loading Techniques) I’m passionate about image performance optimisation and making images load fast on the web. One of…

hibernate 注解

参考链接地址&#xff1a;https://blog.csdn.net/wx5040257/article/details/78697119 主键生成策略:https://www.cnblogs.com/ph123/p/5692194.html 注解转载于:https://www.cnblogs.com/wangxuekui/p/10287647.html

iOS - UIScrollView

前言 NS_CLASS_AVAILABLE_IOS(2_0) interface UIScrollView : UIView <NSCoding>available(iOS 2.0, *) public class UIScrollView : UIView, NSCoding 移动设备的屏幕大小是极其有限的&#xff0c;因此直接展示在用户眼前的内容也相当有限。当展示的内容较多&…