<body>
<div class="wrap">
<p id="link">按鈕</p>
<div id="div1">0</div>
</div>
<script>
//需求：給按鈕添加一個點擊事件崎脉，當(dāng)點擊按鈕時罪治，數(shù)字每500ms增加1干厚，當(dāng)再次點擊按鈕時，數(shù)字變化停止突硝，使用setTimeout()方法测摔；
var olink=document.getElementById("link");
var odiv=document.getElementById("div1");
var count=0;
olink.style.cursor="pointer";
var bOk=true;//此刻bOk相當(dāng)于一個開關(guān)；
var timer=null;
olink.onclick=function () {
if(bOk){
//此時存在一個問題解恰，就是當(dāng)點擊按鈕時锋八，數(shù)字會立刻變?yōu)橄乱粋€數(shù)，所以需要再添加一個setTimeout()來延遲變數(shù)字护盈；
setTimeout(changeCount,1000);
}else{
clearTimeout(timer);
}
bOk=!bOk;//相當(dāng)于一個開關(guān)挟纱，通過不同的布爾值，進行停止與開始黄琼；
function changeCount(){
odiv.innerHTML=++count;
timer=setTimeout(arguments.callee,1000);//在使用setTimeout定時器遞歸時樊销，調(diào)用自身函數(shù)，可以用arguments.callee;
}
};
</script>
</body>
- 考題知識點：
- 1）
var bOk=true;,bOk用作一個開關(guān)脏款；當(dāng)每次點擊后围苫，改變bOk的布爾值，來進行不同的操作撤师，bOk=!bOk;指的是每執(zhí)行一次點擊事件剂府，就改變一下bOk的值；
- 2）arguments.callee指的就是本身函數(shù)剃盾，用在setTimeout定時器遞歸時腺占，調(diào)用自身。
- 注意點：存在一個問題痒谴，就是當(dāng)點擊按鈕時衰伯，數(shù)字會立刻變?yōu)橄乱粋€數(shù)，所以需要再添加一個setTimeout()來延遲變數(shù)字积蔚；
- 添加一個點擊事件意鲸，用setInterval制作時，會存在一個問題：當(dāng)重復(fù)點擊時，函數(shù)執(zhí)行速度會越來越快怎顾；
olink.onclick=function(){
clearInterval(timer);//當(dāng)開啟定時器前读慎，要關(guān)閉所有的定時器，不然的話槐雾，重復(fù)點擊時夭委，速度會越來越快；
timer=setInterval(function(){
odiv.innerHTML=++count;
},500);
}
- 隔行換色及添加鼠標(biāo)事件考題
- 要求：
- 獲取#ul下的所有l(wèi)i募强，實現(xiàn)隔行換色株灸，偶數(shù)行為綠色，奇數(shù)行為紅色擎值；
- 鼠標(biāo)滑過每一個li蚂且，讓當(dāng)前行的背景顏變成粉色(pink),鼠標(biāo)離開后恢復(fù)開始的顏色；
- 鼠標(biāo)點擊每個li彈出"我是第N個li"（n是每一個li的索引+1）幅恋；
- 第一種方法：
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
var oul=document.getElementById("ul1");
var ali=oul.getElementsByTagName("li");
for(var i=0; i<ali.length; i++){
ali[i].index=i;//通過自定義屬性，將每個i值存在每個標(biāo)簽中泵肄；
ali[i].className="bgc"+i%2;
ali[i].onmouseover=function () {
this.className="bgc2";
}
ali[i].onmouseout=function () {
this.className="bgc"+this.index%2;
}
ali[i].onclick=function () {
alert("我是第"+(this.index+1)+"個li")
}
}
</script>
</body>
<script>
var ode=null;//創(chuàng)建一個全局變量捆交；用于儲存
var oul=document.getElementById("ul1");
var ali=oul.getElementsByTagName("li");
for(var i=0; i<ali.length; i++){
if(i%2==0){
ali[i].style.backgroundColor="red";
}else{
ali[i].style.backgroundColor="green";
}
ali[i].onmouseover=function () {
ode=this.style.backgroundColor;//利用全局變量，儲存原數(shù)據(jù)腐巢；
this.style.backgroundColor="pink";
}
ali[i].onmouseout=function () {
this.style.background=ode;//調(diào)用全局變量中的原數(shù)據(jù)品追；
};
//利用閉包函數(shù)，儲存不同的i值冯丙；
(function(index){
ali[index].onclick=function(){
alert("我是第"+(index+1)+"個li");
}
})(i);
}
</script>
- 知識點：
- 全局變量可以儲存單一的屬性值肉瓦；
- 在for循環(huán)遍歷中，將每個不同的i值儲存下來胃惜，可以用自定義屬性和函數(shù)私有作用域泞莉；
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
