本次学习了好多新知识：
学习了在ul新增li节点；
结合css知识，js实现正确调用页面元素对象，实现良好的外观；
掌握了部分index序号知识以及随机数等知识；
选项卡代码：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>选项卡</title> <style type="text/css"> #box{ width:440px; height:300px; background-color:white; margin:20px auto; border:1px solid #92CEEA; } #box>ul{ margin:0; padding:0; background-color:#EDF7F8; overflow:hidden; } #box>ul li{ float:left; list-style:none; width:120px; height:40px; line-height:40px; text-align:center; border-right:1px solid #92CEEA; border-bottom:1px solid #92CEEA; } #box ul li.act{ background-color:white; color: #f33; font-weight: bold; border-top:3px solid red; border-bottom: none; border-right:none; } #box div{ display:none; } #box div ul{ margin:10px; /* padding:20px; */ } #box div ul li{ padding:10px; } #box div ul li a{ text-decoration:none; } #box div ul li a:hover{ text-decoration:underline; color:red; font-size:1.05em; } </style> </head> <body> <div id="box"> <ul> <li class="act">要闻</li> <li>东营新闻</li> <li>军事|新闻</li> </ul> <div style="display:block;"> <ul> <li ><a href="">彻底打赢脱贫攻坚“硬仗中的硬仗”</a></li> <li><a href="">领航新时代中国经济航船</a></li> <li><a href="">成长印记 数看雄安一周年</a></li> <li><a href="">看新一轮国家机构改革做好利国利民大文章</a></li> <li><a href="">朝鲜半岛缓和的又一重举</a></li> </ul> </div> <div> <ul> <li><a href="">东营运动员|亚洲滑雪登山锦标赛获佳绩</a></li> <li><a href="">200余名青岛学子走进黄河口研学采风感受大美东营</a></li> <li><a href="">福特汽车（中国）有限公司召回部分进口探险者</a></li> <li><a href="">你的车牌又添新功能！东营这9个地方开始试点</a></li> <li><a href="">不骗你！这批新规明起实施！</a></li> <li><a href="">东营高速交警发布清明扫墓出行提示</a></li> </ul> </div> <div> <ul> <li><a href="">财大气粗!美军*炮机动射击训练</a></li> <li><a href="">中国空军震撼发布强军大片：全面提升打赢能力</a></li> <li><a href="">中国空间站核心舱首次公开 团队平均年龄仅35岁</a></li> <li><a href="">中国核潜艇之父曾差点学医 因日本轰炸改志报国</a></li> <li><a href="">驱23名还不够 俄外交部：50多名英外交人员应离俄</a></li> <li><a href="">加沙上万巴勒斯坦人示威变流血冲突 伤亡逾千人</a></li> </ul> </div> <script type="text/javascript"> var box=document.getElementById('box') var ul=box.getElementsByTagName('ul')[0] var tab=ul.getElementsByTagName('li') var list=box.getElementsByTagName('div') for(var i=0;i<tab.length;i++){ tab[i].index=i; tab[i].onmouseover=function(){ for (var i = 0; i<tab.length; i++) { tab[i].className=''; list[i].style.display = 'none'; } this.className='act' list[this.index].style.display ='block'; } } </script> </div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
聊天室代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>售后服务台</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div:nth-child(1) {
width: 500px;
height: 700px;
background-color: #43ADED;
margin: 20px auto;
border-radius: 10px;
overflow: hidden;/*使h2margin-top生效*/
}
h2 {
text-align: center;/* padding-top:10px; */
margin-top: 20px;
}
div:nth-child(2) {
width: 400px;
height: 500px;
background-color: #CFEBED;
margin: 10px auto;
border: 3px double #D72A2A;
}
div:nth-child(3) {
width: 410px;
margin: auto;
}
textarea{
border:none;
resize:none;
background-color:#BCE5F0;
}
button {
width: 60px;
height: 30px;
background-color: #6C18DE;
color: white;
border: none;
}
button:hover {
background-color: #B3EB0C;
color: black;
}
ul {
list-style: none;
line-height: 2em;
overflow: hidden;
padding: 15px;
}
</style>
</head>
<body>
<div>
<h2>售后服务台</h2>
<div >
<ul>
<li></li>
</ul>
</div>
<div>
<textarea cols="55" rows="4" name="text" ></textarea>
<br>
<button type="button">提交</button>
</div>
</div>
<script type="text/javascript">
// 获取到页面中的按钮,文本域,对话内容区
var text = document.getElementsByName('text')[0]
var btn = document.getElementsByTagName('button')[0]
var show = document.getElementsByTagName('ul')[0]
var total = 0
text.focus()// 加载焦点
// 添加按钮点击事件，将数据传递至展示页面
btn.onclick = function() {
if (text.value.length == 0) {
alert('请输入内容啊！')
text.focus()
return false
}
var word = text.value
// 清空对话区内容
text.value = ''
var li1 = document.createElement('li')
var userpic = '<img src="images/user.png" width="30" style="border-radius:50%">'
li1.innerHTML = userpic + word
// 在ul增加li节点
show.appendChild(li1)
total += 1
text.focus()// 加载焦点
// 等待2秒
setTimeout(function() {
var aq = ['您好，我在的。', '有什么问题吗？', '让您久等了。', '关于换货、返修问题请仔细描述，谢谢']
var temp = aq[Math.floor(Math.random() * 4)]
var li2 = document.createElement('li')
var serverpic = '<img src="images/server.jpg" width="30" style="border-radius:50%">'
li2.innerHTML = serverpic + '<span style="color:red">' + temp + '</span>'
show.appendChild(li2)
total += 1
}, 2000)
if (total > 11) {
show.innerHTML = ''
total = 0
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1、学习一定不能死学，要举一反三灵活使用；2、注意部分代码的书写格式，jS要大小写区分开，textarea要写在一行，否则会出现空格；3、切记代码名称不要写错，否则后期会很难找到错误；4.多用alert进行测试；5、代码一定要注意逻辑性，符合人机对话的和谐。
手写代码照片如下：
