定时器
/*
定时器：时间概念
var timer = setInterval( 函数, 毫秒 ); 重复执行（发动机）
clearInterval( timer ); 清除
var timer = setTimeout( 函数, 毫秒 ); 执行一次（炸弹）
clearTimeout( timer );
*/
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 </head>
7
8 <body>
9
10 <input type="button" value="换背景吧" />
11 <input type="button" value="停" />
12
13 <script>
14 var aBtn = document.getElementsByTagName('input');
15 var arrUrl = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg' ];
16 var num = 0;
17 var timer = null;
18
19 aBtn[0].onclick = function (){
20 clearInterval( timer ); // null、未定义
21 timer = setInterval(function(){
22 document.body.style.background = 'url('+ arrUrl[num] +')';
23 num++;
24 num%=arrUrl.length;
25 }, 1000);
26 };
27 aBtn[1].onclick = function (){
28 clearInterval( timer );
29 };
30
31 // oBody.style.background = 'url('+ arrUrl[num] +')';
32
33 </script>
34
35 </body>
36 </html><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body { background:url(img/sina.jpg) no-repeat center 0; text-align:center; }
img { display:none; }
</style>
<script>
window.onload = function (){
var miaov = document.getElementById('miaov');
setTimeout( function(){
miaov.style.display = 'inline-block';
setTimeout(function(){
miaov.style.display = 'none';
}, 3000);
}, 2000);
};
</script>
</head>
<body>
<img id="miaov" src="img/miaov.jpg" />
</body>
</html>
图片滚动示例，定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul { padding:0; margin:0; }
li { list-style:none; }
body { background:#333;}
#pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(loader_ico.gif) no-repeat center #fff; }
#pic img { width:400px; height:500px; }
#pic ul { width:40px; position:absolute; top:0; right:-50px; }
#pic li { width:40px; height:40px; margin-bottom:4px; background:#666; }
#pic .active { background:#FC3; }
#pic span { top:0; }
#pic p { bottom:0; margin:0; }
#pic p,#pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
</style>
</head>
<body>
<div id="pic">
<img src="" />
<span>数量正在加载中……</span>
<p>文字说明正在加载中……</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
window.onload= function () {
var oDiv = document.getElementById('pic');
var oImg = oDiv.getElementsByTagName('img')[0];
var oSpan = oDiv.getElementsByTagName('span')[0];
var oP = oDiv.getElementsByTagName('p')[0];
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var num=0;
var arrUrl = ['1.png', '2.png', '3.png', '4.png'];
var arrText = [ '小宠物', '图片二', '图片三', '面具' ];
//定时器-----------------------------------------------
var timer=null
function autoPlay(){
timer=setInterval(function(){
num++;
num%=arrText.length;
fnTab();
},1000)
}
// autoPlay();
setTimeout(autoPlay,2000);
oDiv.onmouseover= function () {
clearInterval(timer);
}
oDiv.onmouseout=autoPlay;
//初始化-----------------------------------------------
function fnTab(){
oImg.src=arrUrl[num];
oSpan.innerHTML=1+num+'/'+arrUrl.length;
oP.innerText=arrText[num];
//全部先清空颜色 class
for( var i=0; i<aLi.length; i++ ){
aLi[i].className = '';
}
//当前点击的再给添加class
aLi[num].className = 'active';
}
fnTab();
//遍历点击按钮
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onclick=function(){
num=this.index;
fnTab();
}
}
}
</script>
</body>
</html>
