收藏
批改状态：合格
老师批语：
内容较多重点是：
for循环：for(i=0;i<10;i++){}
创建新节点document.createElement()
插入节点不覆盖appendChild()
js生成随机整数Math.floor(Math.random()*num)
计时器函数setTimeout()
学习原生js思路，首先选择要操作的元素，能准确取到需要的值，通过动作触发函数，函数对取到的元素进行操作，操作结果直接返回给需要的地方，原理简单但是技术高深，不易掌握，还是勤加练习吧。
tab标签代码：（tab标签案例，css上要用到!important声明，否则样式会有差别，添加active后，列表永远执行原高度声明；干脆给了active权重，一下漂亮多了）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab标签</title>
</head>
<style type="text/css">
.box{
width:480px;
height:360px;
border:1px solid #aaa;
margin:0 auto;
}
.box>ul{
list-style: none;
overflow: hidden;
margin:0;
padding:0;
background: #eee;
}
.active{
color:coral;
height:38px !important;
font-size: 1.02em;
background: #fff;
border-bottom: none !important;
border-top:3px solid coral;
}
.box>ul li{
float: left;
width:80px;
height:40px;
line-height: 40px;
text-align: center;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
}
.box>ul+span{
height:40px;
line-height: 40px;
padding: 0 5px;
float: right;
margin-top: -40px;
font-size: 14px;
}
.list{
width:95%;
margin:0 auto;
display: none;
}
.list ul{
overflow: hidden;
list-style: none;
margin:0;
padding:0;
}
.list li{
margin: 10px 0;
}
.list li a{
text-decoration: none;
color: #000;
}
.list li a:hover{
color:orange;
font-size: 1.05em;
}
.list li span{
float: right;
color:coral;
}
</style>
<body>
<div class="box">
<ul id="tablist">
<li class="active">技术文章1</li>
<li>技术文章2</li>
<li>技术文章3</li>
<li>技术文章4</li>
</ul>
<span>查看更多>></span>
<div class="list" style="display:block;">
<ul>
<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法1</a><span>2018-03-30</span></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法2</a><span>2018-03-30</span></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法3</a><span>2018-03-30</span></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法4</a><span>2018-03-30</span></li>
</ul>
</div>
</div>
<script type="text/javascript">
// 取得tab标签元素
var box = document.getElementsByClassName('box')[0]
var ul = box.getElementsByTagName('ul')[0]
var li=ul.getElementsByTagName('li')
// 取得标签对应内容
var list=box.getElementsByTagName('div')
// 一个循环给标签分别添加鼠标事件
for(var i=0;i<li.length;i++){
li[i].index=i
li[i].onmouseover=function(){
for (var i=0;i<li.length;i++) {//加一个清空操作，清除数据，循环实现
li[i].className=''
list[i].style.display='none'
}
this.className='active'//添加active类
list[this.index].style.display='block'//给列表添加显示属性
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
tab标签运行效果：
聊天机器人代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0330仿机器人聊天窗口</title>
<style type="text/css">
ul{list-style: none}
.box{
width:600px;
height:800px;
background:yellow;
margin: auto;
}
h2{text-align: center}
.talkbox{
width:90%;
height:80%;
margin:0 auto;
background: pink;
}
</style>
</head>
<body>
<div class='box'>
<h2>美女客服</h2>
<div class="talkbox" contenteditable="true">
<ul>
<li></li>
</ul>
</div>
<table>
<tr>
<td align="right"><textarea cols="70" rows="4" name="text"></textarea></td>
<td align="left"><button type='button' id='btn'>发送</button></td>
</tr>
</table>
</div>
<script type="text/javascript">
//获取到页面中的元素
var btn = document.getElementById('btn')
var text = document.getElementsByName('text')[0]
var list = document.getElementsByTagName('ul')[0]
var sum = 0
//添加按钮点击事件,进行脚本操作
btn.onclick = function () {
//判断输入内容是否为空
if (text.value.length == 0) {
alert('请输入内容')
return false
}
var userComment = text.value
//点击按钮后清空发送框
text.value = ''
//创建一个新节点li
var li = document.createElement('li')
// li.innerHTML = userComment
//定义头像为指定图片，给新节点指定内容
var userPic = '<img src="images/me.jpg" width="30" style="border-radius:50%">'
li.innerHTML = userPic+userComment
//将新节点插入到对话列表中
list.appendChild(li)
sum += 1
//添加计时器，2000毫秒
setTimeout(function(){
var info = ['你好老板','老板大方','老板是偶像']
var temp = info[Math.floor(Math.random()*3)]//生成一个整数
var reply = document.createElement('li')
var kefuPic = '<img src="images/meinv.jpg" width="30" style="border-radius:50%;">'
//回复客服消息
reply.innerHTML = kefuPic + '<span style="color:red">'+temp+'</span>'
list.appendChild(reply)
sum += 1
},2000)
//超过10条清屏
if (sum > 10) {
list.innerHTML = ''
sum = 0
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行效果（没进行美化，保留DOM结构练习js脚本）：
手抄：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
