原声js写对话框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.container{
				width: 280px;
				margin: 20px auto;
				border: 1px solid #ddd;
				
			}
			
			.container .content{
				height: 400px;
				padding: 10px;
				overflow: auto;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.clear{
				clear: both;
			}
			.footer{
				
				border-top: 1px solid #ddd;
				padding: 10px;
				/*height:30px;*/
			}
			.footer img{
				float: left;
			}
			
			.btn{
				padding: 7px 8px;
				outline: none;
				border: none;
				background: #8A2BE2;
				color: #fff;
			}
			.active{
				background: darkgreen;
				color: #eee;
			}
			.text{
				word-break: break-all;
				max-width: 210px;
			}
			.msgL,.msgR{
				margin-bottom: 15px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="content" id="content">
					
			</div>

			<div class="footer">
				<textarea name="" id="text" cols="30" rows="10"></textarea>
				<button class="btn" type="button" id="send" "sss()">发送</button>
			</div>
			
		</div>
		
		<script>
		//首先创建一个空的div，用于保存创建的盒子进行插入操作
		//然后创建一个多行文本框进行值传递
		//生成一个按钮的点击事件，进行内容的添加
		//然后创建div盒子中的子节点
		//在子节点之中创建一个图片
		//生成一个随机数用以保存图片的下标和昵称的下标
		//使用setAtribute对图片src进行设置
		//然后生成一个图片右边的一个行内快元素的div盒子
		//然后再在盒子中创建一个昵称盒子和一个发言盒子，进行插入
			var oSend = document.getElementById("send")//获取发送按钮的id
			var oText = document.getElementById("text")//获取多行文本框的值
			var oContent = document.getElementById("content")//获取上传内容的边框

			function sss(){
				var littleDiv = document.createElement("div");//创建每一个小的div节点
				oContent.appendChild(littleDiv);//插入节点
				var img = document.createElement("img");//创建图片
				littleDiv.appendChild(img);//插入图片
				var arr = ['image/tou01.jpg','image/tou02.jpg','image/tou03.jpg','image/tou04.jpg'];//保存图片数组
				var brr = ["小可爱","么么哒","亲爱的","默默踹"];//随机昵称
				var lucky = Math.round(Math.random() * 3);//随机数
				img.setAttribute("src",arr[lucky]);//给图片设置属性
				img.style.width = "40px";//设置宽
				img.style.height = "40px";//设置高
				var rightdiv = document.createElement("div");//创建一个图片右边的边框
				rightdiv.style.display = "inline-block";//设置其为行内快元素
				littleDiv.appendChild(rightdiv);//插入到大盒子中
				var ncheng = document.createElement("p");//创建一个昵称的盒子
				rightdiv.appendChild(ncheng);//插入昵称盒子
				ncheng.innerHTML = brr[lucky];//设置随机昵称
				var ly = document.createElement("p");//在创建一个昵称下面的留言框
				ly.innerHTML = oText.value;
				rightdiv.appendChild(ly);//插入盒子
				dsb(oContent);
				oText.value = "";
				
			}

			function dsb(e){
				e.scrollTop = e.scrollHeight;//使当前元素到的内容高度与滚动条到元素顶部的高度保持一致，使当前内容最优先显示
			}
			//enter发送内容
			document.onkeydown = function(e){
				var a = e || window.event;
				if(a.keyCode == 13){
					sss();
					return false;
				}
				console.log(a);
			}
		</script>
		
	</body>
</html>
猜你喜欢
