1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>发邮件</title> 6 <style> 7 p { 8 border: 1px solid red; 9 width: 200px; 10 height: 30px; 11 line-height: 30px; 12 text-align: center; 13 } 14 </style> 15 <script> 16 var id; 17 function send() { 18 if(id) { 19 return; 20 } 21 //显示正在发送 22 var p = document.getElementById("msg"); 23 p.innerHTML = "正在发送"; 24 //推迟3秒 25 id = setTimeout(function(){ 26 //显示已发送 27 p.innerHTML = "已发送"; 28 //自动停止定时器时,清空id 29 id = null; 30 },3000); 31 } 32 function cancel() { 33 //只有定时器启动中,才能主动停止它. 34 if(id) { 35 var p = document.getElementById("msg"); 36 p.innerHTML = "已撤消"; 37 clearTimeout(id); 38 //主动停止定时器时,清空id 39 id = null; 40 } 41 } 42 </script> 43 </head> 44 <body> 45 <input type="button" value="发送" onclick="send();"/> 46 <input type="button" value="撤消" onclick="cancel();"/> 47 <p id="msg"></p> 48 </body> 49 </html>