收藏
批改状态：合格
老师批语：
原生JavaScript实例
js 选项卡实例
首选使用 document.getElementByClassName('tab')[0] 得到当前总区块
再依次得到下面的 ul li 以及div 子块，获取完毕之后再给选项卡添加 onmouseover 鼠标移动事件
并且根据临时添加的序号来改变显示某选项卡对应的div
具体源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡实例</title>
<style type="text/css">
h2{
text-align: center;
}
.tab{
width: 400px;
height: 300px;
background-color: white;
border:1px solid #ccc;
margin: 20px auto;
color: #363636;
}
.tab > ul{
margin: 0;
padding: 0;
background: #f8f8f8;
overflow: hidden;
}
.tab > ul li{
list-style-type: none;
width: 70px;
height: 30px;
float: left;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
line-height: 30px;
text-align: center;
}
.tab ul + span{
float: right;
margin-right: 8px;
line-height: 30px;
margin-top: -30px;
font-size: 14px;
}
.tab ul + span a{
text-decoration: none;
color: #363636;
}
.tab li.preferred{
font-weight: bolder;
border-bottom: none;
border-top: 2px solid #FF2E12;
}
.tab div{
display: none;
}
.tab div ul{
margin: 0;
padding:0px;
list-style-type: none;
}
.tab div ul li{
margin-left: 5px;
line-height: 1.5em;
}
.tab div ul li a{
text-decoration: none;
}
.tab div ul li a:hover{
font-weight: bolder;
}
.tab div ul li span{
float: right;
margin-right: 10px;
color: red;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h2>选项卡实例</h2>
<div class="tab">
<ul>
<li class="preferred">最新文章</li>
<li>今日话题</li>
<li>社会新闻</li>
<li>七天热门</li>
</ul>
<span><a href="">更多下载>></a></span>
<!-- 选项卡中对应的div -->
<div style="display: block;">
<ul>
<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
<li><a href="">new | 习近平主持中共中央政治局会议</a><span>2018-03-30</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
<li><a href="">最火 | 因“玩具枪”坐牢的故事要结束了</a><span>2018-03-30</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
<li><a href="">社会 | 实拍特战队员魔鬼极限训练</a><span>2018-03-30</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
<li><a href="">7Day | 坚决不做游戏的马云食言了</a><span>2018-03-30</span></li>
</ul>
</div>
</div>
<script type="text/javascript">
// 1.先获取到选项卡对应的ul列表头信息
var tab = document.getElementsByClassName('tab')[0] //得到总的区块
var ul = tab.getElementsByTagName('ul')[0] //得到第一个 ul
var li_list = ul.getElementsByTagName('li') //得到所有 li
var div_list = tab.getElementsByTagName('div') //得所所有的子块div
// 循环给选择卡添加事件
for (var i = 0; i < li_list.length; i++) {
// 1.首先给每个选项卡添加一个临时的序号
li_list[i].index = i
// 开始添加事件
li_list[i].onmouseover = function(){
//循环清空非当前样式的标签样式 跟 div 显示
// 因为不清空会把之前的记录累加在一起
for (var i = 0; i < li_list.length; i++) {
li_list[i].className=''
div_list[i].style.display='none'
}
// 鼠标移动到某项列表时将列表对应的class设置为 preferred(首选)
this.className='preferred'
// 通过临时序号的索引来更新显示对应 ul 标签的 div
div_list[this.index].style.display = 'block'
}
}
</script>
</body>
</html>效果图：
点击 "运行实例" 按钮查看在线实例
2.js 自动应答机器人
用户块：
同上例一样，先获取到ul、text、button以及div块 再根据按钮添加事件，
并使用动态函数 document.createElement('li') 动态创建 li 标签 然后使用 innerHTML 进行拼接对应
的样式图片等，最后通过 先前获取到的 ul 利用 ul 下面的 appendChild 将 li 添加到 ul 的子项中显示
机器人块：
机器回复 使用 setTimeout(func,delay) 函数进行廷时控制回复信息，并从消息数组随机获取内容进行
回复，使用 Math.random() 产生随机数，从数组中随机抽取内容，由于Math.random()产生的随机数
是带小数据点的，所以要用 Math.floor() 函数取数字的最大整数，对数字进行下舍入
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动应答机器人</title>
<style type="text/css">
.box{
width: 500px;
height: 500px;
background-color: #1ADCEF;
margin: 20px auto;
}
h2{
text-align: center;
}
.box .box-msg{
width: 90%;
height: 350px;
background-color: #999797;
margin: auto;
margin-bottom: 10px;
color: #fff;
font-weight: bolder;
overflow:auto;
}
.box .box-msg ul li{
list-style-type: none;
}
.box .inText{
height: 66px;
text-align: center;
line-height: 66px;
}
</style>
</head>
<body>
<div class="box">
<h2>自助问答系统</h2>
<div class="box-msg" contenteditable="true" id="msgview">
<ul>
<li></li>
</ul>
</div>
<div class="inText">
<textarea rows="4" cols="54" name="text" style="resize:none"></textarea>
<button>发送</button>
</div>
</div>
<script type="text/javascript">
// 获取页面中的消息框、输入框、发送按钮
var msgbox = document.getElementsByTagName('ul')[0] //得到页面中的ul
var text = document.getElementsByName('text')[0] //得到输入框
var btn = document.getElementsByTagName('button')[0] //得到发送按钮
var div = document.getElementById('msgview') //得到当前显示消息div 用来设置滚动
// 给发送按钮添加事件
btn.onclick=function(){
// 先判断用户是否输入内容
if(text.value!=''){
var useMsg = text.value
text.value='' //清空输入框内容
// 动态创建一个 li
var li = document.createElement('li')
li.style='text-align: right;margin-right:10px;'
var userImg = '<img src="images/1.jpg" style="width:30px;border-radius: 50%">'
li.innerHTML=useMsg+userImg
// 将创建好的 li 添加到 ul 的子项中
msgbox.appendChild(li)
div.scrollTop = div.scrollHeight
// 机器人开始回复
setTimeout(function(){
// 定义文本数组
var replyArray=['您好,请问还有其它要问的吗?','欢迎您,我是在线客服','001号客服为您服务','客服不在线,请留言!']
// 随机取数据中的值
//因Math.random 产生的数值是1.00000 所以采用四舍五入
//Math.floor() 返回小于等于数字参数的最大整数，对数字进行下舍入
var temp=replyArray[Math.floor(Math.random()*3)]
var reply=document.createElement('li')
reply.style='font-size: 8px;color: blue;'
var boximg = '<img src="images/2.jpg" style="width:30px;border-radius: 50%">'
reply.innerHTML=boximg+temp
msgbox.appendChild(reply)
div.scrollTop = div.scrollHeight
},2000)
// setTimeout(func, delay) 传一个匿名函数跟廷时
}else{
alert('no input msg!')
}
}
</script>
</body>
</html>运行效果：
点击 "运行实例" 按钮查看在线实例
手写套餐
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
