用原生js写一个简单的信息对话框

最新推荐文章于 2022-10-27 17:02:02 发布

Saw丶

最新推荐文章于 2022-10-27 17:02:02 发布

阅读量952

点赞数

分类专栏： JavaScript 案例操作文章标签： js 对话框原生自我对话

本文链接：https://blog.csdn.net/s841520166/article/details/100074651

版权

JavaScript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

案例操作

4 篇文章 0 订阅

订阅专栏

提示

因为要实现两个对话框效果，所以我们这边设置的是自我对话，无聊的同学可以用这个来打发时间，说不定能找到更多灵感(●’◡’●)

JS代码

var oBtn = document.getElementById("btn");
		var oMsg = document.getElementById("text");
		var oChat = document.querySelector("#chat");
		var oDel = document.getElementById("del"); 		//这里是多出来的删除按钮。不想要的可以不要
		oBtn.onclick = function(){
		//判断函数的值是否为空，若不为空，则输入框的颜色变为红色
			if(oMsg.value == ""){
				oMsg.style.border = "1px solid #E84A7E";
			}else{
			//这里让颜色恢复默认
				oMsg.style.border = "1px solid #ccc";
				//创建一个新的p标签用来存放输入的内容，判断输入的顺序，这是自我聊天需要的
				var content = oChat.appendChild(document.createElement("p"));
				if(oChat.children.length%2==1){
				//设置内容样式，这里也可以在CSS里面写，用nth-chlid(odd/even)来写
					oChat.lastElementChild.style.cssText='float: left;padding: 5px;border-radius: 5px;margin: 0;background:#EAE9E9 ;';
					console.log(1234);
				}else{
					oChat.lastElementChild.style.cssText='float: right;padding: 5px;border-radius: 5px;margin: 0;background:limegreen;';
				}
				content.innerText = oMsg.value;
				oChat.scrollTop = oChat.scrollHeight;
			}
			oMsg.value = ''; //清除对话框里的内容
		}
		// 删除信息，不要的可以连这上面的一起删除
			oDel.onclick = function(){
				oChat.lastElementChild.remove()
			}

CSS样式

这边使用的是弹性盒子模型

<style type="text/css">
			#box {
				border: 1px solid #288BC4;
				padding: 10px;
				width: 300px;
				display: flex;
				flex-direction: column;
				align-self: flex-end;
				position: relative;
			}
			#chat{
				box-sizing: border-box;
				width: 100%;
				height: 300px;
				overflow-y: scroll;
				border: 1px dotted #50B9FD;
			}
			textarea{
				height: 50px;
				margin: 10px 0;
			}
			#btn{
				float: right;
				bottom: 0px;
				width: 30%;
			}
			p{
				clear: both;
				max-width: 200px;
				word-wrap:break-word;
			}
		</style>

HTML内容

<body>#
		<div id="box">
			<div id="chat">
			</div>
			<textarea id="text"></textarea>
			<div id="sbtn">
			<input type="button" name="" id="btn" value="发送" />
			<input type="button" name="" id="del" value="删除" />
			</div>
		</div>
	</body>