摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模擬智能客服在線系統(tǒng)</title> <style> .contents{ width:500px; height:550px; background:&n
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模擬智能客服在線系統(tǒng)</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>發(fā)送</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>根據(jù)TagName來獲取元素:
getElementsByTagName('標簽名');
根據(jù)Name來獲取元素,name屬性只有特定的元素才會有:
getElementsByName('name名');
innerHTML:
將元素內(nèi)容全部讀出,包括html代碼
appendChild():
插入元素
批改老師：查無此人批改時間：2019-01-04 13:41:41
老師總結：做的不錯，之后的作業(yè)，可以加上自己的看法，我能知道你的邏輯，完善你哪里不足。繼續(xù)加油。