<!DOCTYPE html> 自动换图片
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function changeImg(){
var img = document.getElementById("img1")
img.src = "3.jpg"
}
</script>
</head>
<body>
<input type="button" value="点击切换图片" onclick="changeImg()" /><br />
<img src="2.jpg" id="img1"/>
</body>
</html>
<!DOCTYPE html> 定时器
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//window 对象是一个最顶层的对象 window 可以省略
function test(){
console.log("执行了")
}
// window.setInterval("test()",2000)
// setTimeout("test()",2000)
var timeId
function startDingshi(){
timeId = setInterval("test()",2000)
}
function stopDingshi(){
clearInterval(timeId)
}
</script>
</head>
<body>
<input type="button" value="开启定时器" onclick="startDingshi()"/>
<input type="button" value="取消定时器" onclick="stopDingshi()" />
</body>
</html>
<!DOCTYPE html> 轮播
<html>
<head>
<!--
1、确定事件：文档加载完成的时间
2、事件触发： init()
3、init()里通常会去操作元素
开启定时器： 定时器执行切换图片的函数 changeImg()
4、checkImg() :
获得切换图片的函数、切换图片
-->
<meta charset="UTF-8">
<title></title>
<script>
var index = 1
function changeImg(){
var img = document.getElementById("img1");
var curIndex = index%3 + 1;
img.src = curIndex + ".jpg";
index = index + 1;
}
function init(){
setInterval("changeImg()",1000);
}
</script>
</head>
<body onload="init()">
<img src="1.jpg" width="100%" id="img1"/>
</body>
</html>
<!DOCTYPE html> 主要是用 display属性
<html>
<!--需求： 打开网页时，5秒后显示一个广告，让我们看5秒钟后 ，广告自动消失-->
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
* 文档加载顺序
*/
function showImg(){
var img = document.getElementById("img1")
img.style.display = ""
}
function hiddenImg(){
var img = document.getElementById("img1")
img.style.display = "none"
}
</script>
</head>
<body>
<input type="button" value="显示" onclick="showImg()" />
<input type="button" value="隐藏" onclick="hiddenImg()"/>
<img src="1.jpg" width="100%" id = "img1" style="display:"/>
</body>
</html>