模拟智能在线客服系统（1）

摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模拟智能客服在线系统</title> <style> .contents{ width:500px; height:550px; background:&n

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模拟智能客服在线系统</title>
<style>
.contents{
width:500px;
height:550px;
background: pink;
margin:30px auto;
box-shadow: 3px 3px 3px #808080;
}

h2{
text-align: center;
margin-bottom: -10px;

}

ul{
list-style: none;
line-height: 20px;
overflow: hidden;
padding: 10px;
}

.content{
width:450px;
height:420px;
background: lightblue;
margin:10px auto;
border:1px solid green;
}

table{
width: 450px;
height:80px;
margin:0 auto;
}

textarea{
border:none;
background: lightyellow;
resize: none;
width: 380px;
}

button{
width: 60px;
height:60px;
border:none;
background: #12B7F5;
color: #FFF;
}

button:hover{
cursor:pointer;
background: orange;
}

</style>
</head>

<body>
	<div class="contents">
		<h2>在线客服</h2>
		<div class="content">
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
				<tr>
					<td ><textarea id="textss" cols="50" rows="4"></textarea></td>
					<td ><button>发送</button></td>					
				</tr>	
		</table>
	</div>

	<script type="text/javascript">
	//获取元素
	let texts = document.getElementById('textss');
	let butn = document.getElementsByTagName('button')[0];
	let ul = document.getElementsByTagName('ul')[0];

	butn.onclick = function(){
		let list = document.createElement('li');
		list.innerHTML = texts.value;
		ul.appendChild(list);
		texts.value="";

	}
	</script>
</body>
</html>

根据TagName来获取元素:

getElementsByTagName('标签名');

根据Name来获取元素,name属性只有特定的元素才会有:

getElementsByName('name名');

innerHTML:

将元素内容全部读出,包括html代码

appendChild():

插入元素

批改老师：查无此人批改时间：2019-01-04 13:41:41
老师总结：做的不错，之后的作业，可以加上自己的看法，我能知道你的逻辑，完善你哪里不足。继续加油。

模拟智能在线客服系统（1）

热门词条