摘要：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聊天窗熱身總結</title> </head> <body> &nbs
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聊天窗熱身總結</title>
</head>
<body>
<div class="div1"> <!--主體-->
<div class="main"> <!--內(nèi)容-->
<ul></ul>
</div>
<div class="focus"> <!--提交部分-->
<input type="text" name="info">
<button>提交</button>
</div>
</div>
<script>
//主體框CSS
let div1=document.getElementsByClassName('div1').item(0);
console.log(div1);
div1.style.width='300px';
div1.style.height='300px';
div1.style.border='1px solid #ccc'
//內(nèi)容部分CSS
let main=document.getElementsByClassName('main')[0];
main.style.width='280px';
main.style.height='240px';
main.style.margin='0px auto 10px';
main.style.borderBottom='1px solid #ccc';
//提交部分CSS
let focus=document.getElementsByClassName('focus').item(0);
focus.style.marginLeft='10px';
//對話框部分
//獲得元素
let ul = document.getElementsByTagName('ul')[0];
let input = document.getElementsByTagName('input')[0];
let button = document.getElementsByTagName('button')[0];
button.onclick = function() {
let li = document.createElement('li'); // 創(chuàng)建列表項li
li.innerHTML = input.value; // 填充內(nèi)容
ul.appendChild(li); //將內(nèi)容添加到列表中
input.value = ''; //清空文本框
}
/* 整體邏輯: 建立提交點擊函數(shù)，創(chuàng)建一個新元素列表li，然后填充內(nèi)容等于input框的val值，
然后在父元素ul尾部添加新元素li； 并清空文本框。*/
</script>
</body>
</html>
批改老師：韋小寶批改時間：2019-03-10 13:03:59
老師總結：寫的很不錯 不管是在寫什么案例或者項目的時候 先把思路弄清楚了 再去寫就方便多了