WEB前端知识大整合之JS自动轮波波
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script> 7 //window 对象是一个最顶层对象 8 // window.setInterval("alert('123');",2000); 9 function test(){ 10 console.log("setInterval 调用了"); 11 } 12 // setInterval("test()",2000); 13 // setTimeout("test()",2000); 14 var timerID; 15 function startDinshiqi(){ 16 // timerID = setInterval("test()",2000); 17 timerID = setTimeout("test()",3000); 18 } 19 20 function stopDingshiqi(){ 21 // clearInterval(timerID); 22 clearTimeout(timerID); 23 } 24 25 </script> 26 </head> 27 <body> 28 <input type="button" value="开启定时器" onclick="startDinshiqi()" /><br /> 29 <input type="button" value="取消定时器" onclick="stopDingshiqi()"/><br /> 30 </body> 31 </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
1. 事件: 点击事件 onclick
2. 事件要触发函数: changeImg
3. 在函数中
*/
function changeImg(){
// alert("要切换了")
var img = document.getElementById("img1");
img.src = "../img/1-161104143944.gif";
}
</script>
</head>
<body>
<input type="button" value="点击切换图片" onclick="changeImg()" />
<br />
<img src="../img/222.jpg" id="img1" />
</body>
</html>
切换如片
轮波
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1. 确定事件: 文档加载完成的事件 onload
2. 事件要触发 : init()
3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
1. 开启定时器: 执行切换图片的函数 changeImg()
4. changeImg()
1. 获得要切换图片的那个元素
-->
<script>
var index = 0;
function changeImg(){
//1. 获得要切换图片的那个元素
var img = document.getElementById("img1");
//计算出当前要切换到第几张图片
var curIndex = index%3 + 1; //0,1,2
img.src="../img/"+curIndex+".jpg"; //1,2,3
//每切换完,索引加1
index = index + 1;
}
function init(){
setInterval("changeImg()",1000);
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" width="100%" id="img1"/>
</body>
</html>
微信公众号
