js点击按钮倒计时setTimeout和setInterval
setTimeout()
用于在指定的毫秒数后调用函数或计算表达式，只执行 code 一次。
setInterval()
可按照指定的周期（以毫秒计）来调用函数或计算表达式，不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
代码实现如下
HTML部分
<body>
<div class="wrap">
<input type="tel" class="shuru" id="phone"/>
<button class="btn" id="send">发送</button>
</div>
</body>
标题为JSFidder的链接，js部分代码如下
var wait=60;
function time(){
var btn=document.getElementById("send");
var str=btn.innerText;
if(wait==1){
btn.innerText="再次发送";
btn.removeAttribute("disabled");
wait=60;
}else{
wait--;
btn.innerText=wait+"s后重新获取";
btn.setAttribute("disabled",true);
setTimeout(function(){
time();
},1000);
}
}
//点击button触发
document.getElementById("send").onclick=time;
js部分代码如下
<script type="text/javascript">
function time(){
var wait=60;
var btn=document.getElementById("send");
btn.setAttribute("disabled",true);
var timer=setInterval(function(){
if(wait==1){
btn.innerText="再次发送";
btn.removeAttribute("disabled");
wait=60;
clearInterval(timer);
}else{
wait--;
btn.innerText=wait+"s后重新获取";
}
},1000)
}
document.getElementById("send").onclick=time;
</script>
js点击按钮倒计时setTimeout和setInterval的更多相关文章
- JS点击按钮弹出窗口
由于没有系统学习过JS,遇到一个需求:点击按钮,弹出一个独立的窗口. 在网上百度了一下,并没有找到满意的结果,最重要的是各种方法很复杂.最终,仔细研究了一下,原来只是需要只要一个简单的函数就能满足自己 ...
- html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码
一:通过html锚点实现滚动定位到页面指定位置(DIV): 如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...
- JS点击按钮打开新的独立页面
工作中遇到需要点击按钮弹出一个独立的页面,并显示指定内容的问题,查了一些资料后,得到以下方法: window.open('locationPage.html', '_blank', 'height=1 ...
- js点击按钮为元素随机字体颜色和背景色
文章地址 https://www.cnblogs.com/sandraryan/ 写两个button和一个div,点击按钮分别改变背景色和前景色(字体颜色).产生的是一个随机颜色. <!DOCT ...
- js点击按钮获取验证码倒计时
//发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { ...
- js中的计时器事件`setTimeout()` 和 `setInterval()`
js中的计时器事件 在js中,通常会有一些事件,我们需要让它 间隔一段时间之后再发生,或者 每隔一段时间 发生一次,那就需要用到我们js中的计时事件 计时事件主要有两种: setTimeout() - ...
- [JS] 点击按钮触发后台事件前,弹出确认框
只需要在button中设置onclick属性触发事件即可 下面以ASP.NET代码为例, ASP.NET中按钮客户端触发js代码的属性是OnClientClick <asp:Button ID= ...
- js定时器的时间最小值-setTimeout、setInterval
HTML5标准规定 setTimeout的最短时间间隔是4毫秒: setInterval的最短间隔时间是10毫秒,也就是说,小于10毫秒的时间间隔会被调整到10毫秒 书和MDC 在John Resig ...
- JS 点击按钮后弹出遮罩层，有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
随机推荐
- js 实现ActiveXObject("Scripting.Dictionary") 功能
/* 字典 ActiveXObject("Scripting.Dictionary") 项目中用到的ActiveXObject("Scripting.Dictionary ...
- python反射的妙用
反射的简单含义: 通过类名获得类的实例对象 通过方法名得到方法,实现调用 实例: import sys class Webserver(object): def __init__(self,host, ...
- c++函数重载
为方便使用,在一定范围内,c++可以定义多个功能形似的同名函数,但是这些函数的形参必须不同(类型.个数.顺序),这就是重载函数.重载函数常用来实现功能类似而所处理的数据类型不同的问题. 看下面的一个例 ...
- springfox.documentation.service.ApiInfo配置示例
Java Code Examples for springfox.documentation.service.ApiInfo The following are top voted examples ...
- 无法作为数据库主体执行，因为主体 "dbo" 不存在、无法模拟这种类型的主体，或您没有所需的权限。 已将数据库上下文更改为
右键删除发布时报错信息: 其他信息:执行 Transact-SQL 语句或批处理时发生了异常. (Microsoft.SqlServer.ConnectionInfo)——————————无法作为数据 ...
- Linxu IO测试软件
fio 安装 apt-get install fio fdisk -l Device Boot Start End Blocks Id System/dev/sda1 * 2048 968390655 ...
- iis 应用程序池看不到 .net framework 4.0
我的情况是,先配置了iis,然后再安装.net framework 4.0 进去设置应用程序池的时候,没有找到 .net framework 4.0 ,经过一番尝试,无效,最后无奈重启. 好了.
- SQL Server 2008 数据库镜像部署实例之一 数据库准备
SQL Server 2008 数据库镜像部署实例之一 数据库准备 一.目标 利用Sql Server 2008 enterprise X64,建立异步(高性能)镜像数据库,同时建立见证服务器实现自动 ...
- UDP发送数据测试
一个合作伙伴说UDP发送数据,A(IP:192.168.1.100 子网掩码255.255.255.0)网段能发数据到B网段,但B(IP:192.168.2.100 子网掩码255.255.255.0 ...
- 【转】CwRsync简介
rsync是linux下一款用于同步文件的优秀软件,window下也可以使用它,不过名字为cwRsync.cwRsync也分为客户端和服务端,官方网址:https://www.itefix.no/i2 ...