收藏
批改状态：合格
老师批语：
主题：
使用javascript实现网页动态变化，向网页元素中插入数据，改变网页元素的样式及内容。
实现效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.选项卡</title>
<style type="text/css">
h2 {
text-align: center;
}
.box {
width:500px;
height:330px;
background-color:#f3f9f1;
border:1px solid #a1a1a1;
margin:20px auto;
}
.box > ul {
margin:0;
padding:0;
background-color: #f3f9f1;
overflow: hidden; /*隐藏溢出部分*/
}
.box > ul li {
width:90px;
height:35px;
list-style-type:none;
float: left;
border-right:1px solid #801da1;
border-bottom:1px solid #801da1;
text-align: center;
line-height: 35px;
}
.box ul + span {
float: right;
width:90px;
height:32px;
line-height: 35px;
margin-top: -35px; /*块元素向上移动*/
}
/*选择.box下的ul的兄弟span元素的子元素a*/
.box ul + span > a {
text-decoration: none; /*去掉下划线*/
}
/*选择.box下的class为active的li元素*/
.box li.active {
font-weight:bold; /*设置粗体文本*/
border-bottom: none;
border-top: 3px solid #c93756;
}
.box div {
display: none; /*隐藏元素*/
}
.box div ul {
margin:0;
padding:20px;
list-style-type: none;
}
.box div ul li {
line-height: 1.5em;
}
.box div ul li a {
text-decoration: none;
}
.box div ul li a:hover {
color:#000;
}
.box div ul li span {
float:right;
color:#c93756;
}
</style>
</head>
<body>
<h2>选项卡实例</h2>
<div class="box">
<ul>
<li class="active">选项卡一</li>
<li>选项卡二</li>
<li>选项卡三</li>
<li>选项卡四</li>
</ul>
<span><a href="">更多内容>></a></span>
<div style="display:block;">
<ul>
<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
<li><a href="">第一选项卡内容</a><span>2018-03-01</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
<li><a href="">第二选项卡内容</a><span>2018-03-02</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
<li><a href="">第三选项卡内容</a><span>2018-03-03</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
<li><a href="">第四选项卡内容</a><span>2018-03-04</span></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
// 获取相应元素
var box = document.getElementsByClassName('box')[0]
var ul = box.getElementsByTagName('ul')[0]
var tab = ul.getElementsByTagName('li')
var list = box.getElementsByTagName('div')
// 循环添加选项卡事件
for (var i=0; i<tab.length; i++) {
// 需要给选项卡添加自定义属性（html渲染时非默认属性会被删除）
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 = 'active'
list[this.index].style.display = 'block'
}
}
</script>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.仿机器人聊天窗口</title>
<style type="text/css">
div:nth-child(1) {
width:400px;
height:600px;
background-color: #a1afc9;
margin:30px auto;
color:#003472;
box-shadow: 2px 2px 2px #ddd;
}
h2 {
text-align: center;
}
div:nth-child(2) {
width:350px;
height:400px;
border:1px solid #003472;
background-color: #f0f0f4;
margin:auto;
}
div:nth-child(2) ul {
padding:10px;
list-style-type: none;
line-height: 1.5em;
overflow:hidden;
}
table {
width:350px;
height:100px;
margin:10px auto;
/*border:1px solid red;*/
}
.list {
font-style: 22px;
}
button {
width:80px;
height:30px;
margin:10px;
}
</style>
</head>
<body>
<div>
<h2>逗比瞎聊</h2>
<div contenteditable="true">
<ul class="list">
<li></li>
</ul>
</div>
<table>
<tr>
<td>
<textarea name="input" id="" cols="30" rows="5"></textarea>
</td>
<td>
<button name="send">发送</button>
<button name="clean">清屏</button>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
// 获取html元素
var input = document.getElementsByName('input')[0]
var send = document.getElementsByName('send')[0]
var list = document.getElementsByClassName('list')[0]
// 创建一个计数变量用来控制聊天框中的内容条目数
var sum = 0
// 清空按键变量
var clean = document.getElementsByName('clean')[0]
// 按钮事件添加
send.onclick = function() {
// 条件判断（用户提交空内容提示）
if (input.value.length == 0) {
alert('我滴哥，瞎聊也得写点啥嘛！')
return false
}
var text = input.value
// 清空输入框已发送的内容
input.value = ''
// 以下两种方法都不适合用来添加条目
// list.innerHTML = '<li>' + input.value + '</li>'
// list.innerHTML += '<li>' + input.value + '</li>'
// 建议使用js创建元素节点的方法添加条目
var li = document.createElement('li')
// 将头像图片样式存入一个变量，方便调用
var imgStyle = '<img src="http://t1.aixinxi.net/o_1ca18ajjo5ffrun1n2s94nsd2a.jpg-w.jpg" width=30 style="border-radius:50%">'
li.innerHTML = imgStyle + text
// 将内容插入到当前节点中：父节点.appendChild(当前节点)
list.appendChild(li)
sum += 1
setTimeout(function() {
var say = ['你是个逗比，我么有你逗比！','哈哈！','给你介绍一个小姐姐怎么样？','你想要哪个小姐姐呀？告诉我就行！']
//使用Math.floor()函数取数组的元素值，Math.random()*4取0-4之间的数字
var random = say[Math.floor(Math.random()*4)]
var reply = document.createElement('li')
var sevPic = '<img src="http://t1.aixinxi.net/o_1ca18bjeh854shmjt16m9j4la.jpg-w.jpg" width=30 style="border-radius:50%">'
// 随机取自动回复数组中的字符串
reply.innerHTML = sevPic + '<span style="color:#0aa344;">' + random +'</span>'
list.appendChild(reply)
sum += 1
},2000)
if (sum > 10) {
list.innerHTML = ''
sum = 0
}
// 输入时保持焦点在输入框
input.focus()
}
// 按键清除聊天窗口内容
clean.onclick = function() {
list.innerHTML = ''
return false
}
</script>
</html>点击 "运行实例" 按钮查看在线实例
理解：
这节课较深入的了解了javascript的语法及变量定义技巧，掌握了基础的javascript编程概念，重点在于灵活运用。
还得加深理解。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
