![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
选项卡作业代码演示：http://111.231.88.20/front/html/0330/1.html
通过这个作业了解了for循环语句的基本使用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0330选项卡作业练习</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 550px;
height: 500px;
background-color: #FFF;
border: 1px solid #808080;
margin: 100px auto;
box-shadow: 0 0 3px #111;
}
.box div:first-child{
width: 247px;
height: 50px;
text-align: center;
background-color: #eee;
float: left;
border-bottom: 1px solid #808080;
}
h2{
color: #00CED1;
margin-left: 10px;
float: left;
padding-top: 10px;
}
p{
color: #999999;
float: left;
margin-left: 5px;
padding-top: 20px;
}
.box ul{
height: 50px;
list-style-type: none;
float: right;
background-color: #eee;
}
.box ul li{
width: 100px;
height: 100%;
float: left;
text-align: center;
line-height: 50px;
border-left: 1px solid #808080;
border-bottom: 1px solid #808080;
}
.box li.choose{
height: 48px;
background-color: #fff;
border-top: 3px solid #1b64f8;
border-bottom: none;
}
.box div{
display: none;
clear: both;
}
ol{
list-style-type: none;
height: 432px;
margin-left: 10px;
background: url(images/sort_icon.png) no-repeat;
}
ol li{
margin-left: 45px;
line-height: 2.3em;
}
ol li a:first-child{
text-decoration: none;
color: #888;
}
ol li a:last-child{
float: right;
text-decoration: none;
color: #ccc;
margin-right: 10px;
}
ol li a:hover{
color: #000;
}
</style>
<body>
<div class="box">
<div style="display: block;">
<h2>热闻排行</h2>
<p>给你好看</p>
</div>
<ul>
<li class="choose">日榜</li>
<li>周榜</li>
<li>月榜</li>
</ul>
<div class="list" style="display: block;">
<ol>
<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
<li><a href="">干掉免费Wifi钥匙的可能不是法律 而是5G</a><a href="">贾敬华</a></li>
</ol>
</div>
<div class="list">
<ol>
<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
<li><a href="">30万炒家哭晕在厕所！一公司遭遇史上最大利空</a><a href="">齐俊杰看财经</a></li>
</ol>
</div>
<div class="list">
<ol>
<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
<li><a href="">一文读懂中国独角兽，下一个BAT为什么还没有出现？</a><a href="">俊世太保</a></li>
</ol>
</div>
</div>
<script type="text/javascript">
// 1、首先获取选项卡和区块信息列表
var box = document.getElementsByClassName('box')[0] //获取最外层的div
var ul = box.getElementsByTagName('ul')[0] //获取到选项卡中第一个ul
var tab = ul.getElementsByTagName('li') //获取到ul里面所有的li
var list = box.getElementsByClassName('list')
//2、给每个新闻列表添加事件：循环添加
for (var i = 0; i < tab.length; i++) {
//给当前选中的选项卡添加一个自定义属性 index
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 = 'choose'
list[this.index].style.display = 'block'
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
模拟聊天机器人作业代码演示：http://111.231.88.20/front/html/0330/2.html
通过这个代码作业了解了新建节点元素并插入html文档的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>客服机器人作业</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 450px;
margin:50px auto;
border:1px solid #000;
border-radius: 10px;
}
.head{
width: 100%;
height: 40px;
background-color: #37465d;
color: #dadad9;
border-radius: 10px 10px 0 0;
}
.head p{
line-height: 40px;
margin-left: 5px;
}
.head a{
text-decoration: none;
color: #dadad9;
float: right;
line-height: 40px;
margin:-40px 20px 0 0;
}
.show{
width: 100%;
height: 330px;
border-bottom:1px solid #000;
overflow-y: scroll;/*垂直内容溢出后，出现滚动条*/
}
ul{
list-style-type:none;
padding-top: 10px;
}
ul li{
margin:0 10px;
}
table{
width: 95%;
height: 70px;
margin:5px auto;
}
textarea{
width: 95%;
resize: none;
}
button{
width: 65px;
height: 45px;
margin-bottom: 4px;
background-color: #37465d;
border: none;
border-radius: 20%;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<div class="head">
<p>您好，您可以直接给我发送问题哈！</p>
<a href="">意见反馈</a>
</div>
<div class="show">
<ul>
<li></li>
</ul>
</div>
<table>
<tr>
<td><textarea cols="50" rows="3" name="text"></textarea></td>
<td align="left"><button type="button">发送</button></td>
</tr>
</table>
</div>
<script type="text/javascript">
//获取页面中的按钮，文本域，对话区
var btn = document.getElementsByTagName('button')[0]
var text = document.getElementsByName('text')[0]
var list = document.getElementsByTagName('ul')[0]
//获取按钮点击事件，得到用户数据并显示到对话框中
btn.onclick = function(){
//获取用户提交的内容
//对于用户提交的内容进行判断（不可为空）
if (text.value.length == 0) {
alert('您是不是忘记输入内容了？')
text.focus()
return false
}
//把用户的输入内容声明一个变量
var userContent = text.value
//在发送后清除用户的内容区
text.value = ''
//创建一个新的节点li
var li = document.createElement('li')
li.style = 'text-align:right;'
li.innerHTML = userContent
//创建一个用户头像变量
var userPic = '<img src="images/userico.jpg" width="30px" style="border-radius:50%">'
li.innerHTML = userPic + userContent
//将新的节点li，添加到对话框中
list.appendChild(li)
//添加一个定时回复
setTimeout(function(){
//添加随机回复内容
var info = ['您好，请问有什么需要？','这个问题你自己去想','拜拜，我要睡觉了','呵呵']
//添加随机回复的函数
var temp = info[Math.floor(Math.random()*4)]
//创建一个随机回复的节点li
var reply = document.createElement('li')
var csPic = '<img src="images/csico.jpg" width="30px" style="border-radius:50%">'
//reply.innerHTML = csPic + '<span style="color:red">'+temp+'</span>'
reply.innerHTML = csPic + '<span style="color:red">'+temp+'</span>'
list.appendChild(reply)
},1000)
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手抄代码作业【模拟聊天机器人】
通过手抄代码后，对于JS的基础语法更加熟悉了一点，然后对于一些代码的拼写也记忆更加深刻了
总结：
1、通过这两个作业的练习，首先对于之前学习的html和css又加深了一些记忆
2、通过选项卡作业，学习了for循环语句的基本使用场景和使用方法
3、通过模拟聊天机器人作业，学习了如何新建一个元素节点并且插入到html的方法，通过自己的一些练习，还学习了如何给通过JS给元素内添加CSS属性
4、通过这两个作业的练习和上节课的JS基础语法，让我对于学习编程更有信心了！
