Web开发基础-JavaScript-15

Coder_Boy_

于 2018-07-14 13:13:59 发布

阅读量165

点赞数

CC 4.0 BY-SA版权

分类专栏： Web开发

本文链接：https://blog.youkuaiyun.com/Coder_Boy_/article/details/81042740

Web开发专栏收录该内容

108 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的消息发送功能案例。该案例利用了一次性定时器(setTimeout)来模拟消息发送的过程，并提供了取消发送的功能。通过按钮触发发送与取消操作，实时更新页面上的消息状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS中一次性定时器的使用练习

案例思路：

消息发送的演示案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>消息发送</title>
		<style type="text/css">
			p {
				border:1px solid red;
				width:200px;
				height:40px;
				line-height:40px;
				text-align:center;
				font-size:20px;
			}
		</style>
		<script type="text/javascript">
			
			var id = null;
			function send() {
				//正在发送
				var p = document.getElementById("msg");
				p.innerHTML = "正在发送...";
				//推迟2s，发送成功
				id = setTimeout(function(){
					p.innerHTML = "发送成功";
					id = null;
				},2000);
			}
			
			function cancel() {
				//若id非空，则处于正在发送的过程中
				if(id){
					clearTimeout(id);
					var p = document.getElementById("msg");
					p.innerHTML = "已取消";
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="发送" 
			οnclick="send();">
		<input type="button" value="取消"
			οnclick="cancel();">
		<p id="msg"></p>
	
	</body>

</html>

最终页面显示效果：

点击发送：