目录
1，案例：轮播图
2，JS样式修改【重点】
2.1：className
2.2：style
3，案例：定时弹广告
1，案例：轮播图
需要编写程序，完成自动切换图片功能.。
每2秒切换一次图片。
- 分析：
关键点：
- 页面加载完成时：window.οnlοad=function(){};
- 循环定时器：setInterval(function(){},2000);
- src属性切换: 图片对象.src=""
步骤：
- 页面加载完成时，设置一个2秒重复循环定时器
- 定时器中，每隔2秒，修改图片的src
修改src顺序：1--->2--->3--->1.....
- 代码实现：
<script>
var num = 2;
window.onload=function () {
setInterval(function () {
//1、获取图片对象
var lbt = document.getElementById("lbt");
//2、修改图片的src
lbt.src="img/"+(num++)+".jpg";
//对Num维护，只能是1---》2---》3----》1....
if(num==4){
num=1;
}
},2000);
};
</script>
<!-- 网站大轮播图 -->
<tr>
<td>
<img id="lbt" src="img/1.jpg" width="100%"/>
</td>
</tr> |
2，JS样式修改【重点】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.skyblue{
width: 100px;
height: 100px;
background-color: skyblue;
}
.pink{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="skyblue"></div>
<input type="button" value="点我修改样式"/>
</body>
</html>
|
2.1：className
获取/修改 class属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.skyblue{
width: 100px;
height: 100px;
background-color: skyblue;
}
.pink{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script>
function run() {
var d1 = document.getElementById("d1");
d1.className = "pink";
}
</script>
</head>
<body>
<div id="d1" class="skyblue"></div>
<input type="button" value="点我修改样式" onclick="run()"/>
</body>
</html>
|
若需要元素进行class值的切换，可以使用 元素.className="";
2.2：style
修改 style中的CSS代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.skyblue{
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
<script>
function run() {
var d1 = document.getElementById("d1");
d1.style = "background-color: pink;";//行内样式:<div id="d1" class="skyblue" style="background-color: pink;"></div>
}
</script>
</head>
<body>
<div id="d1" class="skyblue"></div>
<input type="button" value="点我修改样式" onclick="run()"/>
</body>
</html>
|
若仅需要修改部分css样式：
元素.style="css代码"; // 相当于为元素添加了行内样式
3，案例：定时弹广告
- 分析：
关键点：
1、涉及到样式切换（class属性值切换）
元素.className=""
2、一次性定时器
setTimeout(代码,2000);
3、页面加载完成时，启动定时器
window.onload = function(){
};
步骤：
- 页面加载完成时，启动定时器
- 该定时器在页面加载完成后两秒，将图片展示出来
- 图片展示完成后，还需要启动“关闭图片用的”定时器
- “关闭图片用的”定时器 启动后，将图片隐藏起来
- 代码实现：
<script>
//1、页面加载完成时，启动定时器
window.onload = function () {
//2、该定时器在页面加载完成后两秒，将图片展示出来
setTimeout(function () {
//2.1、获取图片对象
var img = document.getElementById("ad");
//2.2、修改图片对象的className 为showImg
img.className = "showImg";
//3、图片展示完成后，还需要启动“关闭图片用的”定时器
setTimeout(function () {
//4、“关闭图片用的”定时器 启动后，将图片隐藏起来
img.className = "hiddenImg";
},2000);
},2000);
};
</script>
|
BUG说明：
两个定时器是同时启动的，可能在展示的瞬间关闭。可能先进行关闭，在进行展示，导致无法收回
