模拟聊天对话框

利用原生JS里的事件对象我们可以来模拟下聊天软件的对话框效果如下：

CSS:

	*{
				margin: 0;
				padding: 0;
				font-size: 16px;
				font-family: "微软雅黑";
				
			}
			li{
				list-style: none;
			}
			.main{
				width: 800px;
				height:600px ;
				margin: 50px auto;
				border: 4px solid #B6B6B6;
				border-radius: 10px;
			    
			}
			
			#box{
				margin: 10px;
				border: 1px dotted #ccc ;
				border-radius: 10px;
				height: 400px;
				overflow-y: scroll;
			}
			
			.leftword{
				float: left;
				background: yellowgreen;
				margin: 10px;
				border-radius: 6px;
				padding: 6px;
				
			}
			#box span{
				width: 15px;
				height: 15px;
				display: inline-block;
				background: red;
				border-radius: 50%;
				float: left;
				margin: 6px;
				
			}
			
			
			.rightword{
				float: right;
				background: lightskyblue;
				margin: 10px;
				border-radius: 6px;
				padding: 6px;
				max-width: 400px;
				word-break: break-all;
                white-space: pre-wrap;
			}
			
			#txt{
				margin-left: 20px;
				width: 750px;
				height: 120px;
				overflow-y: scroll;
				border-radius: 6px;
			}
			#btn{
				width: 80px;
				height: 30px;
				text-align: center;
				float: right;
				margin-right: 20px;
				margin-top: 10px;
				
				
			}

　　HTML:

	

			

				
你好!
				

				
天王盖地虎
				

				
你好！
				

				
宝塔镇河妖
				

				
脸怎么红了
				

				
防冷涂的蜡
				

				
				
			
			
			发送
			
			
		

　　js以及注释如下：

　　

转载于:https://www.cnblogs.com/MikePan/p/9147089.html