定時器：
定時器，當設定的時間間隔達到了，就執行一次某個操作，可以用在凡是動態效果的情景中，
對於setInterval可以在動態效果中運用，重複很多次，除非有終止條件達到,可以使用的場景：時鐘，淡入淡出，滾動，懸浮欄等等
對於setTimeout可以在延時的時候運用，當持續多長時間之後才執行某個操作（setTimout(某個操作, 持續多長時間)）
| 格式 |
setInterval(show, 1000) setTimeout(show,1000) |
show是函數，function show() {} 1000是間隔時間 在show裏面的動作可以每隔1000毫秒執行一次 setInterval可以執行很多次，除非有終止條件 setTimeout只能執行一次 |
|
| 得到一個定時器變量 |
var timer=null; timer=setInterval(function() {}，1000） |
||
| 停止定時器 | clearInterval(timer)
clearTimerout(timer) |
<script type="text/javascript">
window.οnlοad=function ()
{
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var timer=null;
oBtn1.οnclick=function () {
timer=setInterval(function() {
alert('a');
}, 1000);
};
oBtn2.οnclick=function() {
clearInterval(timer);
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="begin" />
<input id="btn2" type="button" value="end" />
</body>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
數碼時鐘：
---效果思路 12:23:06
設置圖片路徑 -----將str[i]變量和圖片名字結合使用<--從Date()對象獲得當前時間轉化爲字符串
charAt方法 -------字符串獲得某個字符string.charAt(i) 一般==string[i], 比起後者更具兼容性
---獲取系統時間
Date對象 -----var oDate=new Date()
getHours, getMinutes, getSeconds ---返回的都是整數類型 ，可以使用n=''+n轉爲字符型
getFullYear(), getMonth()+1, getDate(), getDay()+1
---顯示系統時間
字符串的連接 +，
空位補零 ---使用if else判斷<10， n='0'+n (n=''+n) ---且將整數轉爲字符型
---定時器的特性：
它被打開後，並不會立即執行，而是等（那個間隔時間）1000毫秒後，才執行，所以
在程序執行中會有一個延遲
setInterval(function() {}, 1000);
更改爲： function tick(){}; setInterval(tick,1000); tick() -----> 這樣程序在設置爲定時器後，會執行tick（）
並且：如果在多個地方使用某個時鐘操作，可以將該定時器裏面的函數單獨拿出來，然後使用setInterval(函數名，時間）來多次調用。
<script type="text/javascript">
function toDou(n)
{
if(n<10)
{
return '0'+n;
}
else
{
return ''+n;
}
}
window.οnlοad=function()
{
var aImg=document.getElementsByTagName('img');
//var str="012321";
function tick() {
var oDate=new Date();
var str=toDou(oDate.getHours()) + toDou(oDate.getMinutes())+ toDou(oDate.getSeconds());
for(var i=0;i<aImg.length;i++)
{
aImg[i].src='img/'+str.charAt(i)+'.png';
}
};
setInterval(tick,1000);
tick();
};
</script>
</head>
<body style="background:black; color: white; font-size:50px;">
<image src="img/0.png" />
<image src="img/0.png" />
:
<image src="img/0.png" />
<image src="img/0.png" />
:
<image src="img/1.png" />
<image src="img/1.png" />
:
<image src="img/1.png" />
<image src="img/1.png" />
</body>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
延時提示框：
---效果展示：
例如qq頭像，鼠標移入，則顯示了qq秀； 鼠標移出，則qq秀框消失；當鼠標移出，不應該立即隱藏，而應該延時隱藏，因爲如果從qq頭像移動到qq秀框，qq秀框應該仍然顯示的，
所以這裏就該使用定時器，讓qq秀框隱藏的行動延時發生。。。
---最初的想法：
移入顯示，移出隱藏（但是這樣會造成問題，如果想從A移到B的時候，B已經消失了，無法對其進行操作了）
---改進方法：
對其消失的動作，使用延時定時器：setTimeout(消失，500);500毫秒後再隱藏
---簡化代碼：
合併兩個相同的onmouseover和onmouseout
在編寫代碼時，遇到了問題，需要注意的javascript代碼：
0. <style>裏面設置左浮動，float:left，則div1，div2 從豎向排列變爲橫向
1. 需要使用延時定時器進行延時 setTimeout(function(){}, 500)
2.在移入到B時，B還是會消失，原因是因爲原來在A裏面移出時我們設置了定時器，當時間到了，它仍然會執行隱藏操作，所以此時要clearTimeout(timer)
3. div的display的屬性，在<style>標籤裏面設置才生效 display=none, 不加雙引號， 在行間樣式裏面設置不生效
在代碼裏面設置的時候oDiv.style.display="none" 要加引號
4. 界面上元素的動態事件跟函數結合 ：1. 在行間樣式裏面 直接添加屬性 <input .... οnclick=tick()>
2. 在腳本里面： oBtn1.onclick=functiontick() { } (這裏，函數名tick可以省略）
注意：不管是在定時器裏面timer=setInterval(function() {}, 500); 函數在事件裏面 oBtn1.onclick=function() {}， 函數可以看作是一組操作的集合，做完返回值直接賦值給其他。。
<style>
#div1 {width:209; height: 100; background: red;float:left;margin:20px;display:none; }
#div2 {width:209; height: 100; background: green;float:left;margin: 20px;}
</style>
<script type="text/javascript">
window.οnlοad=function() {
var oDiv2=document.getElementById('div2');
var oDiv1=document.getElementById('div1');
var timer=null;
oDiv1.οnmοuseοut=oDiv2.οnmοuseοut=function() {
timer=setTimeout(function()
{
oDiv1.style.display='none';
}, 500);
};
oDiv1.οnmοuseοver=oDiv2.οnmοuseοver=function() {
clearTimeout(timer);
oDiv1.style.<span style="font-size:10px;">display="block</span>";
};
};
</script>
</head>
<body >
<div id="div2" type="div" ></div>
<div id="div1" type="div"></div>
</body>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
無縫滾動：
---效果展示：
4 張圖片從左往右，從右往左滾動，鼠標移動上去，會暫停，移出，繼續滾動
---原理：(div裏面ul，ul下4個li放4個圖片）
讓ul一直往左或者往右移動，當達到一半的時候拉回到原來的位置
---最初方法：
定時器不斷增加其left,這樣就產生了向右移動的效果：
setInterval(function () {
oUl.style.left=oUl.offsetLeft-2+'px';
},30);
但是這樣產生了問題，就是它會一直往左移動，出了它所在div的界限，漏出div的背景色。於是引出下面的方法
---方法：
我們使用兩組一樣的圖片，橫向放置在一起，然後當第二組移動到達起點的時候，我們迅速將整個一組圖片向右拉回來，恢復最初狀態
<---- ||1 2 3 4|| 1 2 3 4 <----- 1 2 3 4 ||1 2 3 4|| <----- ||1 2 3 4|| 1 2 3 4
複製li, innerHTML的使用（我們使用了一模一樣兩組li列表圖片（ul.innerHTML=ul.innerHTML*2)
修改ul的width
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;// using 2 times of 4 pictures
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
滾動過界後，重設位置
判斷過界，如果向做移動，判斷條件是offsetleft是否<-oUl.offsetWidth/2; 如果向右移動，判斷是否>0
改變滾動方向：根據button指示左右，修改speed(正，負），判斷過界
if(oUl.offsetLeft < -oUl.offsetWidth/2) <<------1 2 3 4||
1 2 3 4 ||
{
oUl.style.left='0';
}
if(oUl.offsetLeft>0) ||1 2 3 4||
1 2 3 4 ------>>
{
oUl.style.left=-oUl.offsetWidth/2+'px';
}
鼠標移入暫停：移入時關閉定時器，移出重新開啓定時器（即調用setInterval())
<span style="font-size:10px;"> <style>
* {margin:0; padding:0;}
#div1 {width:702px; height:108px; margin：100px; position: absolute;background: red; overflow: hidden;}
#div1 ul {position: absolute;left: 0; top: 0;}
#div1 ul li {float: left; width: 178px; height: 108px; list-style: none; }
</style>
<script type="text/javascript">
window.οnlοad=function()
{
var oDiv=document.getElementById('div1');
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var speed=2;
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;// using 2 times of 4 pictures
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
function move() {
if(oUl.offsetLeft < -oUl.offsetWidth/2)
{
oUl.style.left='0';
}
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
};
var timer=setInterval(move,30);
oDiv.οnmοuseοver=function() //stop move
{
clearInterval(timer);
};
oDiv.οnmοuseοut=function() //create the timer again
{
timer=setInterval(move,30);
};
document.getElementsByTagName('a')[0].οnclick=function()
{
speed=-2;
}
document.getElementsByTagName('a')[1].οnclick=function()
{
speed=2;
}
};
</script>
</head>
<body >
<a href="javascript:;" >move to left</a>
<a href="javascript:;" >move to right</a>
<div id="div1" type="div">
<ul>
<li>img src="img/1.png" /> </li>
<li>img src="img/2.png" /> </li>
<li>img src="img/3.png" /> </li>
<li>img src="img/4.png" /> </li>
</ul>
</div>
</body></span>
1. 在<style>裏面給元素設置邊距的時候，比如top,left之類的，必須要設定position：absolute才能生效，而margin則不受此限制
2.當多個地方使用同一個定時器操作時，將定時器裏面的那段函數操作單獨拿出來做一個有名函數，然後setInterval(函數名，time) 多次調用
3.注意定時器的關閉場景，防止時間達到時，原來定時器觸發的操作影響其他操作
4.移動操作主要就是根據定時器，元素位置的改變（所以left, top, offsetLeft, offsetWidth這些要掌握好）
5.div屬性裏面的oveflow:hidden可以將它的孩子只顯示在它的範圍內。
這一節學到的一些函數即屬性：
Date()
getHours, getMinutes, getSeconds
oDate.getFullYear()
getFullYear(), getMonth()+1, getDate(), getDay()+1
string.charAt(i)
setInterval(function() {}, time);
setInterval(funname,time);
setTimeout(...);
clearInterval(...);
clearTimeout(...);
元素.οnmοuseοver=function(){}
onmouseover
onmouseout
onclick