摘要：*{margin: 0;padding: 0} .chat{width: 360px;height: 450px;margin:0 auto;background: url(bg.jpg);background-size:100% 100%;padding: 15px;} .chat h2{font-

*{margin: 0;padding: 0}
		.chat{width: 360px;height: 450px;margin:0 auto;background: url(bg.jpg);background-size:100% 100%;padding: 15px;}
		.chat h2{font-weight: 500;text-align: center;}
		.chat_area{height: 320px;overflow: auto;}
		.chat_area li{list-style: none;}
		.chat_area li .avatar{height: 30px;line-height: 30px;}
		.chat_area li img{width: 20px;height: 20px;vertical-align: middle;margin-top: -4px;margin-right: 10px;}
		.chat_area li .text{word-wrap: break-word;word-break: normal;}
		textarea{margin-top: 10px;width: 100%;height: 50px;background: rgba(255,255,255,0.5);resize: none;}
		.chat>p{text-align: right;}
		.chat>p button{padding: 2px 10px;background: #3D7998;border: none;color: #fff;}
		.chat>p button:hover{cursor:pointer;background: orange;}

<div class="chat">
		<h2>dom聊天室</h2>
		<div class="chat_area">
			<ul>

			</ul>
		</div>
		<textarea class="message"></textarea>
		<p><button>發(fā)送</button></p>
	</div>

let btn = document.getElementsByTagName('button')[0]
		let ul = document.getElementsByTagName('ul')[0]
		let msg = document.getElementsByClassName('message')[0]
		btn.onclick = function(){
			if(msg.value!=''){
				let li = document.createElement('li')
				li.innerHTML = '<p class="avatar"><img src="demo.jpg">夢飛翔</p><p class="text">'+msg.value+'</p>'
				ul.appendChild(li)
				msg.value =''



				setTimeout(function(){
					let info = [
						'除了退貨，什么都可以問',
						'趕緊滾',
						'php是最好的語言？',
						'有話快說，別耽誤我玩游戲'
					]
					let reply = info[Math.floor(Math.random()*4)]
					li = document.createElement('li')
					li.innerHTML = '<p class="avatar"><img src="zly.jpg">客服</p><p class="text">'+reply+'</p>'
					ul.appendChild(li)

				},1000)

			}
			
			return false;			
		}

批改老師：天蓬老師批改時(shí)間：2018-12-01 21:29:44
老師總結(jié)：界面非常的美觀 現(xiàn)在原生的javascirpt的API功能已經(jīng)非常強(qiáng)大,并且越來越好用,以后工作了,推薦盡可能用原生js來寫