javascript实现发送短信倒计时
更新时间：2021年09月30日 10:30:59 作者：qq_39111074
这篇文章主要为大家详细介绍了javascript实现发送短信倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了javascript实现发送短信倒计时的具体代码，供大家参考，具体内容如下
实现思路：
1、js获取发送按钮元素对象
2、设置一个发送间隔时间（全局变量）
3、给发送按钮元素对象绑定点击事件- - -onclick,
点击事件处理程序：
① 点击后俺按钮设置成禁用—disabled：true;
② 使用定时函数，时间间隔为1秒，
定时函数调用的函数处理程序：
判断时间是否为0
不为0- - -按钮里的描述内容变为：剩余多少秒，且时间减1
为0- - -则恢复按钮可以点击状态，里面的描述内容恢复成“发送”
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发送短信</title>
<style>
.box {
width: 360px;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box">
手机号码：<input type="number">
<button>发送短信</button>
</div>
<script>
var btn = document.querySelector('button');
var time = 10;
btn.addEventListener('click', function() {
btn.disabled = true;
var timer = setInterval(function() {
if (time == 0) {
// 清除定时器和复原按钮
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送短信';
time = 10;
} else {
btn.innerHTML = '剩余' + time + '秒';
time--;
}
}, 1000);
});
</script>
</body>
</html>
页面效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS实现滑动菜单效果代码,以实例形式实现了包括Tab,选项卡,横向等效果,非常简单实用,需要的朋友可以参考下2015-09-09
这篇文章主要给大家介绍了关于echarts提示框tooltip被遮挡的解决办法, 在制作图表中,发现有时候tooltip会被线条遮挡或者被柱子折线遮挡,这种情况会偶尔出现,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了JS document form表单元素操作,结合完整实例形式详细分析了JavaScript form表单元素获取、输出、遍历等相关操作技巧,需要的朋友可以参考下2020-01-01
这篇文章主要为大家详细介绍了原生js实现秒表计时器功能，可以开始、暂停、清除，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
javascript拖拽上传类库DropzoneJS使用方法
这篇文章主要介绍了javascript拖拽上传类库DropzoneJS使用方法，大家参考使用吧2013-12-12
执行上下文是JavaScript中非常重要的概念，它决定了代码的执行顺序和作用域链等重要信息，下面我们就来深入探讨JavaScript执行上下文的概念和工作原理吧2023-07-07
有时候我们需要在登陆表单有一些提示语言，比如“请输入用户名”和“请输入密码”等语言，通过本文给大家介绍JavaScript实现输入框(密码框)出现提示语的相关知识，对js实现输入框提示相关知识感兴趣的朋友一起学习吧2016-01-01
这篇文章主要介绍了javascript实现的固定位置悬浮窗口,以一个完整实例形式详细分析了javascript实现固定位置悬浮窗口的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JS实现从对象获取对象中单个键值的方法,涉及javascript数组对象遍历、事件监听、处理等相关操作技巧,需要的朋友可以参考下2019-06-06
下面小编就为大家带来一篇关于JS中的apply,call,bind的深入解析。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-04-04
最新评论