![[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
一、以下是选项卡代码：
可以根据鼠标停留不同位置显示不同的内容，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 100%;
height: 150px;
margin:auto;
font-family: microsoft yahei;
background-color: #F8F8FF;
}
.box .bar{
width: 1000px;
height: 75px;
/*background-color: lightgray;*/
margin:auto;
}
.box .bar ul{
margin: 0;
padding: 0;
overflow: hidden;
margin: auto;
display: table;
text-align: center;
}
.box .bar ul li{
color: #000;
list-style-type: none;
width: 83px;
height: 100%;
padding:0 5px;
/*background-color: gray;*/
float: left;
line-height: 75px;
}
.box .bar ul li:first-child{
width: 60px;
}
.box .bar ul li.actived{
background-color: red;
cursor: pointer;
color: #fff;
}
.box .sbar div{
width: 1000px;
height: 60px;
/*background-color: lightgray;*/
margin: auto;
display:none
}
.box .sbar ul{
padding: 0;
margin: 0;
/*width: 300px;*/
overflow: hidden;
margin: auto;
display: table;
text-align: center;
background-color: #4a4c4f;
}
.box .sbar ul li{
color: #DCDCDC;
font-size: 14px;
list-style-type: none;
float: left;
width: 70px;
height: 100%;
line-height: 60px;
}
.box .sbar ul li:hover{
color:#CD5C5C;
cursor: pointer;
}
.box .sbar .sbar1 ul{
margin-left: 303px;
}
.box .sbar .sbar2 ul{
margin-left: 395px;
}
.box .sbar .sbar3 ul{
margin-left: 489px;
}
.box .sbar .sbar4 ul{
margin-left: 581px;
}
.box .sbar .sbar5 ul{
margin-left: 674px;
}
</style>
</head>
<body>
<div class="box">
<div class="bar" >
<ul>
<li class="actived">首页</li>
<li>公司集团</li>
<li>新闻中心</li>
<li>产品系列</li>
<li>投资关系</li>
<li>客户服务</li>
</ul>
</div>
<div class="sbar">
<div style="height: 0"></div>
<div class="sbar1" >
<ul>
<li>集团介绍</li>
<li>团队介绍</li>
<li>企业荣誉</li>
</ul>
</div>
<div class="sbar2" >
<ul>
<li>集团新闻</li>
<li>地方动态</li>
<li>媒体报道</li>
</ul>
</div>
<div class="sbar3" >
<ul>
<li>产品系列1</li>
<li>产品系列2</li>
<li>产品系列3</li>
<li>产品系列4</li>
</ul>
</div>
<div class="sbar4" >
<ul>
<li>最新公告</li>
<li>投资信息</li>
</ul>
</div>
<div class="sbar5" >
<ul>
<li>服务理念</li>
<li>服务宗旨</li>
<li>联系方式</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var bar = document.getElementsByClassName('bar')[0]
var ul = bar.getElementsByTagName('ul')[0]
var li = ul.getElementsByTagName('li')
var sbar = document.getElementsByClassName('sbar')[0]
var div = sbar.getElementsByTagName('div')
li[0].className = ''
for(var i=0;i<6;i++){
li[i].index = i;
div[i].index = i;
li[i].onmouseover = function(){
for(var i=0;i<6;i++){
li[i].className = ''
div[i].style.display = 'none'
}
this.className = 'actived'
div[this.index].style.display = 'block'
}
}
</script>点击 "运行实例" 按钮查看在线实例
二、机器聊天代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聊天窗口</title>
<style type="text/css">
body{
font-family: microsoft yahei;
}
div:nth-child(1) {
width: 450px;
height: 550px;
background-color: #F5F5F5;
margin: 10px auto;
color: #333;
box-shadow: 2px 2px 2px gray;
border-radius: 5px;
}
h2 {
font-size: 18px;
text-align: center;
margin-bottom: -5px;
padding-top: 10px;
}
div:nth-child(2) {
width: 380px;
height: 400px;
border: 3px double #1E90FF;
border-radius: 5px;
background-color: #efefef;
margin: 20px auto 10px;
}
ul {
list-style: none;
line-height: 2em;
overflow: hidden;
padding: 15px;
}
table {
width: 90%;
height:80px;
margin: auto;
}
textarea{
border: none;
resize: none;
background-color: #ADD8E6;
margin-left: 10px;
}
button {
width: 50px;
height: 62px;
background-color: #1E90FF;
color: #fff;
border-radius: 3px;
border: none;
}
button:hover {
cursor: pointer;
opacity: 0.8;
}
</style>
</head>
<body>
<div>
<h2>在线客服</h2>
<div contenteditable="true">
<ul>
<li></li>
</ul>
</div>
<table>
<tr>
<td align="right"><textarea cols="45" rows="4" name="text"></textarea></td>
<td align="left"><button type=button>Send</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]
var sum = 0
btn.onclick = function () {
if (text.value.length == 0) {
alert('input is null!')
return false
}
var words = text.value
text.value = ''
var li = document.createElement('li')
li.innerHTML = words
var userPic = '<img src="../img/2.jpg" width="30" style="border-radius:50%">'
li.innerHTML = userPic+'<span style="padding-left:10px;">'+words+'</span>'
list.appendChild(li)
sum += 1
setTimeout(function(){
var info = ['test1','test2','test3']
var temp = info[Math.floor(Math.random()*3)]
var reply = document.createElement('li')
var Pic = '<img src="../img/1.jpg" width="30" style="border-radius:50%;">'
reply.innerHTML = Pic + '<span style="color:#1E90FF;padding-left:10px;">'+temp+'</span>'
list.appendChild(reply)
sum += 1
},1500)
if (sum >8) {
list.innerHTML = ''
sum = 0
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
三、手写代码：
四、总结
这次没有点评，没有详细总结，看见首页推荐的那些，有的代码直接ctrl+c/v，没有文字说明，学习他们
