JS-模拟对话框

最新推荐文章于 2024-03-26 22:03:24 发布

BBBuild~

最新推荐文章于 2024-03-26 22:03:24 发布

阅读量166

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/gogaogao/article/details/129624701

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

<body>
<div id="userBox">
	姓名：
	<input type="" name="" id="userIpt">
	<input type="button" name="" value="确认" id="btnNode">
</div>

<div id="toMsg">
</div>

<div id="MsgBox">
	<input type="" name="" id="msgNode"> 
	<input type="button" name="" value="确认"  id="MsgIpt">
</div>
</body>
<script type="text/javascript">
	/* 登记完了名字之后，登记名字的元素消失
     如果没有登记名字，下方内容点击发送，提示没有登记名字
    登记之后点击发送，可以发送消息名字消息内容 */

     var user='';
    // 确认名字
     btnNode.onclick=function(){
     	if (userIpt.value=='') {
     		alert('名字不能为空');
     	}else{
     		user=userIpt.value;
            userBox.style.display='none';
     	}
     }
   
   //发送消息的按钮
     MsgIpt.onclick=function(){
     	if (msgNode.value=='') {
     		alert('您的输入的信息不能为空');
     		return;
     	}
     	if (userIpt.value=='') {
     		alert('您还没有登记名字');
     	}else{
     		var oDl=document.createElement('dl');
     		oDl.innerHTML='<dd>'+user+'</dd>'+'<dt>'+msgNode.value+'</dt>';

            var allDl=toMsg.children;
            //发送的内容始终位于上方
            if (allDl.length==0) {
               toMsg.appendChild(oDl);
            }else{
                toMsg.insertBefore(oDl,toMsg.children[0]);
            }
     		
            //消息发送后输入框内容为空
     		msgNode.value='';
     	}
     }