聊天窗热身总结
李涛2019-03-10 11:02:28222<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聊天窗热身总结</title>
</head>
<body>
<div class="div1"> <!--主体-->
<div class="main"> <!--内容-->
<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'
//内容部分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'); // 创建列表项li
li.innerHTML = input.value; // 填充内容
ul.appendChild(li); //将内容添加到列表中
input.value = ''; //清空文本框
}
/* 整体逻辑: 建立提交点击函数，创建一个新元素列表li，然后填充内容等于input框的val值，
然后在父元素ul尾部添加新元素li； 并清空文本框。*/
</script>
</body>
</html>