JS学习-17.练习【模拟QQ】

最新推荐文章于 2023-04-05 12:58:51 发布

立花泷的学习日记

最新推荐文章于 2023-04-05 12:58:51 发布

阅读量919

点赞数

分类专栏： js 文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/qq_37974765/article/details/121372672

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

模拟QQ发送消息
输入名字后，点击确定，隐藏按钮和名字信息
输入内容，点击确认，发送消息到面板上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>练习</title>
		<style type="text/css">
		*{
			margin: 0;padding: 0;
		}
			#div2{
				width: 200px;
				height: 200px;
				border: 1px solid #000000;
			}
		</style>
	</head>
	<body>
		<div id=div1>
			<input type="text"  id="txt1" placeholder="请输入姓名" />
			<input type="button"  id="btn1" value="确认"/>
		</div>
		<div id="div2">
		</div>
		<div>
			<input type="text"  id="txt2" placeholder="请输入信息" />
			<input type="button"  id="btn2" value="确认" />
		</div>
		<!--模拟QQ-->
		<script type="text/javascript">
			/**
			 * 登记完了  名字之后
			 * 登记名字的 元素消失
			 * 如果没有登记名字 下面的内容 点击发送 提示 没有登记名字
			 * 登记之后 点击发送 可以发送消息
			 */
			var user='';
			//确认名字
			btn1.onclick=function(){
				if(txt1.value==''){
					alert('请输入姓名');//输入框为空时给出提示信息
				}
				else{
					user=txt1.value;
					div1.style.display='none';	//不为空就隐藏相关元素
				}	
			}
			//确认信息并发送信息
			btn2.onclick=function(){
				if(txt1.value==''|| txt2.value==''){
					alert('信息不能为空');
				}
				else{
					var oDiv2=document.createElement('dl');//创建一个dl元素
					div2.appendChild(oDiv2);//插入到div2的尾部
					oDiv2.innerHTML='<dt>'+txt1.value+'</dt><dd>'+txt2.value+'</dd>';				
				}
			}
		</script>
	</body>
</html>

立花泷的学习日记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS学习-17.练习【模拟QQ】

模拟QQ发送消息输入名字后，点击确定，隐藏按钮和名字信息输入内容，点击确认，发送消息到面板上<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>练习</title> <style type
复制链接

扫一扫