<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#msg{
border: 1px solid red;
width:200px;
text-align: center;
font-size:20px;
height:30px;
line-height: 30px;
}
</style>
<script>
var id;
function send(){
//若id非空,就不要再启动
if(id){
return;
}
var p = document.getElementById("msg");
p.innerHTML = "正在发送...";
id = setTimeout(function(){
p.innerHTML = "已发送!";
id = null;//让id启动
}, 3000);
}
//撤销
function back(){
//id非空时,表示定时器已启动,此时可撤销
if(id){
var p = document.getElementById("msg");
p.innerHTML = "已撤销";
clearTimeout(id);
id = null;//让id启动
}
}
</script>
<title>Insert title here</title>
</head>
<body>
<p>
<input type="button" value="发送" οnclick="send()" >
<input type="button" value="撤销" οnclick="back()" >
</p>
<p id="msg"></p>
</body>
</html>