js案例:5秒后再次点击

m0_63400611

已于 2022-05-18 16:03:22 修改

阅读量636

点赞数

分类专栏： js 文章标签： javascript 开发语言 ecmascript

于 2022-01-03 17:05:38 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/122289530

版权

js 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

分析

点击按钮后禁用按钮(disabled=true)
点击按钮后内容发生变化,通过innerHTML修改
利用定时器修改秒数
时间为0即停止定时器并且重新设定时间,复原按钮状态

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
	<style>
		
	</style>
</head>

<body>
	
	手机号码:<input type="number" placeholder="请输入手机号"/>
    <button>发送</button>

<script>

	var btn = document.querySelector('button');
    var time = 5;

    btn.addEventListener('click', function () {
        btn.disabled = true;
        timer = setInterval(function () {
            if(time <= 0) {
                //清除定时器并且复原按钮
                clearInterval(timer);
                btn.disabled = false;
                btn.innerHTML = '发送';
                time = 5;
            } else{
            btn.innerHTML = '还剩下'+ time +'秒';
            time--;
            }
        }, 1000)
    })
	
</script>
	
</body>
</html>

m0_63400611

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js案例:5秒后再次点击

分析点击按钮后禁用按钮(disabled=true) 点击按钮后内容发生变化,通过innerHTML修改利用定时器修改秒数时间为0即停止定时器并且重新设定时间,复原按钮状态代码<!doctype html><html><head><meta charset="utf-8"><title>Document</title> <style> </style></head&
复制链接

扫一扫

专栏目录