1课堂知识
a js中函数的调用
可以作为一个函数来调用，也可以作为函数中的方法来调用
b 闭包，时贤的目的就是为了能够读取其他函数内部变量，主要是变量作用域的问题，向上行，向下不行；
c DOM的学习
一个是访问节点，一个是获取并修改内容；
结合函数，可以实现对css较好的控制；
b实例
1 轮播图
收藏
<!DOCTYPE html>
<html>
<head>
<title>javascript学习</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<!-- <script type="text/javascript" src="static/a.js"></script> -->
<style type="text/css">
div{
margin:20px auto;
width: 500px;
height: 300px;
overflow: hidden;
position: absolute;top:30px;
border:0 2px 2px;
}
img{
width: 500px;
height: 300px;
}
p{
color: #000;
width: 500px;
height: 10px;
position: absolute; bottom:10px; right:-400px;
z-index: 999;
line-height: 10px;
}
span{
display: inline-block;
width: 10px;
height:10px;
text-align: center;
background: #ccc;
cursor: pointer;
}
</style>
</head>
<body>
<div id="photo">
<!-- 图片列表 -->
<a href=""><img src="static/images/1.jpg"></a>
<a href=""><img src="static/images/2.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/4.jpg"></a>
<a href=""><img src="static/images/5.jpg"></a>
<!-- 图片按钮 -->
<p>
<span onclick="change(0)">1</span>
<span onclick="change(1)">2</span>
<span onclick="change(2)">3</span>
<span onclick="change(3)">4</span>
<span onclick="change(4)">5</span>
</p>
</div>
<script type="text/javascript">
function change(num){
var obj=document.getElementById('photo');
var obj_a=obj.getElementsByTagName('a');
for(var i=0;i<obj_a.length;i++){
obj_a[i].style.display="none";
}
obj_a[num].style.display="block"
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2 tab切换
<!DOCTYPE html>
<html>
<head>
<title>javascript学习</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<!-- <script type="text/javascript" src="static/a.js"></script> -->
<style type="text/css">
ul{
position:relative;
float: left;
}
li{
list-style: none;
width: 80px;
height: 30px;
box-shadow:2px inset;
border-top-right-radius: 25px;
line-height: 30px;
text-align: center;
background: rgba(95,8,33,0.6);
float: left;
}
div{
margin:20px 40px;
width: 500px;
height: 300px;
overflow: hidden;
position: absolute;top:30px;
border:0 2px 2px;
}
img{
width: 500px;
height: 300px;
}
.c{clear: both;}
</style>
</head>
<body>
<ul>
<li onclick="change(0)" style="background: skyblue;">天蓝</li>
<li onclick="change(1)" style="background: pink;">红色</li>
<li onclick="change(2)" style="background: yellow;">黄色</li>
<li onclick="change(3)" style="background: orange;">橙色</li>
<li onclick="change(4)" style="background: green;">绿色</li>
</ul>
<div class="c"></div>
<div id='photo'>
<a href=""><img style="background: skyblue;"></a>
<a href=""><img style="background: pink;"></a>
<a href=""><img style="background: yellow;"></a>
<a href=""><img style="background: orange;"></a>
<a href=""><img style="background: green;"></a>
</div>
<script type="text/javascript">
function change(num){
var obj=document.getElementById('photo');
var obj_a=obj.getElementsByTagName('a');
for(var i=0;i<obj_a.length;i++){
obj_a[i].style.display="none";
}
obj_a[num].style.display="block";
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3心得
a、css的知识还需要加强，几天不用就生疏了；
b、js的功能确实很强大，省了很多重复的工作，加强了程序的复用性；
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
