电灯开关
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关</title>
</head>
<body>
<img src="img/off.gif" id="light">
<script>
/* 事件:对某些元素做的某些动作,产生某些行为
点击图片,换图片
获取对象*/
var light = document.getElementById("light");
//绑定点击事件
var flag = false;
light.onclick = function () {
if (flag) {
//改变图片的src属性
light.src = "img/off.gif";
flag = false;
} else {
light.src = "img/on.gif";
flag = true;
}
}
</script>
</body>
</html>
轮播图
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img src="img/banner_1.jpg" id="b1" width="100%">
<input type="button" id="back" value="后退">
<script>
/*
分析:
1.在页面上使用img标签展示图片
2.定义一个方法,修改图片对象的src属性
3.定义一个定时器,每隔3秒调用方法一次。
*/
var number=1;
//定义换图片的方法
function fun() {
number++;
//如果number>3变为
if (number>3) {
number=1;
}
// //获取img对象并修改src属性
document.getElementById("b1").src="img/banner_"+number+".jpg";
}
//设置定时器格式: setInterval(方法对象,毫秒值);
setInterval(fun,2000);
}
</script>
</body>
</html>
自动跳转首页
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p{
float: right;
}
p span{
color: red;
}
</style>
<meta charset="UTF-8">
<title>自动跳转首页</title>
</head>
<body>
<p><span id="span">5</span>秒后,自动跳转首页</p>
<script>
/*
分析:
1.显示页面效果 <p>
2.倒计时读秒效果实现
2.1 定义一个方法,获取span标签,修改span标签体内容,时间--
2.2.在方法中判断时间如果<= 0 ,则跳转到首页
3.定义一个定时器,1秒执行一次该方法
*/
var number=5;
var span = document.getElementById("span");
//设置fun方法
function fun() {
number--;
if(number<=0){
location.href="http://www.baidu.com";
}
//修改标签体内容
span.innerHTML=number;
}
//设置定时器,参数为fun方法
setInterval(fun,1000);
</script>
</body>
</html>