0330————仿机器人聊天

代码如下：
实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>0330作业</title>
	<style type="text/css">
		div:nth-child(1){
			width: 800px;
			height: 600px;
			background-color: seagreen;
			padding: 0;
			margin: 0 auto;
			overflow: hidden;
			border: 3px solid skyblue;
			box-shadow: 2px 2px 2px #ff8000;
		}
		h2{
			text-align: center;
			margin: 0 ;
		}
		ul{
			line-height: 2em;
			list-style-type: none;
		}
		div:nth-child(2){
			width: 94%;
			height: 81%;
			background-color: lightgray;
			margin: auto;
		}
		table{
			padding: 0;
			margin: 0 auto;
			width: 100%;
			height: 30px;
			/*border: 2px solid #ff8000;*/
		}
		tr {
		}
		td{
			width: 400px;
			height: 100%;
			/*border: 2px solid #ff8000;*/
			margin: auto;
		}
		textarea{
				resize: none;
				background-color: lightyellow;
		}
		button{
			background-color: seagreen;
			color: white;
			cursor:pointer;
			width: 100px;
			height: 65px;
			border: none;
		}
		button:hover{
			size: 110%;
			background-color: #ff8000;
		}
	</style>
</head>
<body>
	<div>
		<h2>BOOM way旗航店客服</h2>
		<div contenteditable="true">
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
				<td><textarea cols="105" rows="4" name="text"></textarea></td>
				<td><button>发送</button></td>
			</tr>
		</table>
	</div>
	<script type="text/javascript">
		var btn = document.getElementsByTagName('button')[0]
		var text = document.getElementsByName('text')[0]
		var list = document.getElementsByTagName('ul')[0]
		var sum = 0
		btn.onclick = function () {
			if (text.value.length == 0) {
				alert('写点东西吧，傻吊')
				return false
			}
			var love = text.value
			text.value = ''
			var li = document.createElement('li')
			li.innerHTML = love
			var pic = '<img src="images/1.jpg" width="50" style="border-radius:30%">'
			li.innerHTML = pic+love
			list.appendChild(li)
			sum += 1
				setTimeout(function(){
				var info = ['亲，你好','在的，看中那样东西了?','这边已经帮你申请了，','除了钱其他都好说','不要再催了']
				var temp = info[Math.floor(Math.random()*5)]
				var reply = document.createElement('li')
				var kefuPic = '<img src="images/2.jpg" width="50" style="border-radius:30%;">'
				reply.innerHTML = kefuPic + '<span style="color:red">'+temp+'</span>'
				list.appendChild(reply)
				sum += 1
			},1000)
			if (sum > 10) {
				list.innerHTML = ''
				sum = 0
			}
		}
	</script>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图：
BV8]K`G(6AR)5(8[U~$Z2ZH.png
实例

相关文章
