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

红太狼 2024-04-17 06:05 56阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，56人围观）

还没有评论，来说两句吧...

相关阅读

相关如何用JS写一个简单的键盘移动

于这个操作比较简单，我们直接上代码。 css div{ width: 50px; heig...

淩亂°似流年/ 2024年04月17日 19:54/ 0 赞/ 48 阅读

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

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

红太狼/ 2024年04月17日 06:05/ 0 赞/ 57 阅读

相关用qt写一个带阴影的对话框

我可以给你一些建议，但是要使用Qt来创建一个带阴影的对话框，你需要设置QWidget的windowOpacity属性，并且调用QWidget::setGraphicsEffec

青旅半醒/ 2024年03月25日 17:42/ 0 赞/ 61 阅读

相关 JavaScript 原生js写的一个非常简单的轮播图

JavaScript 原生js写的一个非常简单的轮播图 JavaScript 原生js写的一个非常简单的轮播图实现的方法实现的效果

r囧r小猫/ 2023年06月01日 12:57/ 0 赞/ 44 阅读

相关如何用原生js和jquery书写一个结构树

结构树的样式效果如下：样式是临时加进来的，可以微调 ![在这里插入图片描述][20210603145416475.png] html代码如下： <div cla

川长思鸟来/ 2023年03月13日 09:19/ 0 赞/ 9 阅读

相关 (精品)用原生JS写一个好看的瀑布流

css部分 ```javascript { margin: 0; padding: 0; } c

我不是女神ヾ/ 2023年03月03日 11:11/ 0 赞/ 200 阅读

相关用JS手写一个简单的Promise

参照[Promise/A+规范][Promise_A]手写了一个简化版的promise class MyPromise { constructor(fn

系统管理员/ 2022年11月28日 13:16/ 0 赞/ 296 阅读

相关用原生js写一个微博发布框，留言框。

本来这篇文章是昨晚发布的，但是昨天网上自己的网站出了一些问题。 ![这里写图片描述][SouthEast] 百度一下可能是因为配置的问题，但是自己对后端，以及命令行实在不懂

﹏ヽ暗。殇╰゛Y/ 2022年07月13日 04:19/ 0 赞/ 186 阅读

相关原生JS写出一个AJAX请求

使用JS写出一个AJAX请求 XMLHttpRequest 对象是AJAX的主要接口，用于浏览器与服务器之间的通信，可是使用多种协议，发送任何格式的数据。 XMLHttp

古城微笑少年丶/ 2022年02月19日 01:19/ 0 赞/ 295 阅读

相关用原生JS写出一个AJAX请求

let request = new XMLHttpRequest() request.open('get','/xxx') request.send()

川长思鸟来/ 2022年01月12日 02:55/ 0 赞/ 262 阅读