收藏
批改状态：合格
老师批语：
本次学习了好多新知识：
学习了在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、代码一定要注意逻辑性，符合人机对话的和谐。
手写代码照片如下：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
