手机发送短信案例

最新推荐文章于 2024-09-24 10:50:41 发布

Sandrahh

最新推荐文章于 2024-09-24 10:50:41 发布

阅读量340

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Sandrahh/article/details/107320019

版权

手机发送短信案例

思路：
1、按钮点击之后，会禁用disable为true同时按钮里面的内容会变化，
2、注意button的值通过innerHTML修改
3、里面的秒数再点击按钮之后会变化因此会用到计时器
4、定义一个变量，在定时器里面不断递减
5、如果变量为0，说明到了时间，需要清除定时器并复原按钮

<!DOCTYPE html>
<html lang="en">
<head>   	
	<meta charset="UTF-8">    																								  
	<metaname="viewport"content="width=device-width, initial-scale=1.0">  
<title>Document</title></head>
<body>    
   手机号码：<input type="number"><button>发送</button>    
<script>        
	var btn = document.querySelector("button");        
	var time = 3; //定义剩下的秒数        
	btn.addEventListener("click", function() {            
	btn.disabled = true; //禁用按钮           
	 var timer = setInterval(function() {                
	 if (time === 0) {                    
	 	clearInterval(timer); //清除定时器                  
	 	btn.disabled = false; //复原按钮 
	 	btn.innerHTML="发送";
	 	time=3;             
	 	  } else {                    
	 	  btn.innerHTML = "还剩下" + time + "秒";                    																							                                     
	 	  time--;              
	 	    }           
	     }, 1000);        
	 })    
	 	
 </script>
 </body>
</html>