好程序員web前端分享前端javascript練習題三

好程序員web前端分享前端javascript練習題三，簡易年曆
eg1：將數組中的值輸出
改變樣式可以直接改樣式，也可以修改類名
var okuang=document.getElementById("kuang");var oli=document.getElementsByTagName("li");var arr=[11,22,33,44,55];var index=0; //定義一個變量用來保存索引值for(var i=0;i<oli.length;i++){ //遍歷給每個li添加事件
oli[i].onclick=function(){
for(var j=0;j<oli.length;j++){ //排他功能
oli[j].style.backgroundColor="#666";
oli[j].style.color="#fff";
}
okuang.innerHTML=arr[index]; //此時不能用arr[i]，因爲在點擊之前for已經執行完了，此時i爲oli的元素個數值
this.style.backgroundColor="red";
this.style.color="#000";
index++;
}}
解析：
for循環是在頁面加載的時候,執行完畢了
// for(var k=0;k<5;k++){
// }
// console.log(k);
//事件是在觸發的時候,執行的
tab切換案例
點擊按鈕換圖片:
var oli=document.getElementsByTagName("li"); //獲取li標籤var oimg=document.getElementsByTagName("img")[0]; //獲取圖片標籤var index=0; //存儲索引值，因爲在點擊按鈕前for已經執行完了
for(var i=0;i<oli.length;i++){
oli[i].onclick=function (){
oimg.src='images/'+index+'.png';
index++;
}
}
案例
排他功能
一串input
var oinput=document.getElementsByTagName("input");for(var i=0;i<oinput.length;i++){
oinput[i].onclick=function(){
//先讓所有的變成原來的樣子
for(var j=0;j<oinput.length;j++){
oinput[j].value="晴天";
oinput[j].style.background="#ccc";
}
//再設置當前的樣式
this.value="陰天";
this.style.background="red";
}}
通過類名修改樣式
var oinput=document.getElementById("btn");var odiv=document.getElementById("dv");
oinput.onclick=function(){
//判斷是否應用了類樣式
if(odiv.className!="cls"){
odiv.className="cls"; //當有多個類名時需要注意 留着不需要修改的
}else{
odiv.className="dd";
}};
tab切換
主要就是排他功能的應用，下面對應的塊，選隱藏，找出點擊span時對應的li再讓它顯示
<div class="box" id="box">
<div class="hd">
<span class="current">體育</span>
<span>娛樂</span>
<span>新聞</span>
<span>綜合</span>
</div>
<div class="bd">
<ul>
<li class="current">我是體育模塊</li>
<li>我是娛樂模塊</li>
<li>我是新聞模塊</li>
<li>我是綜合模塊</li>
</ul>
</div></div><script>
var obox=document.getElementById("box");
var hd=obox.getElementsByTagName("div")[0];
var bd=obox.getElementsByTagName("div")[1];
var oli=bd.getElementsByTagName("li");
var ospan=hd.getElementsByTagName("span");
for(var i=0;i<ospan.length;i++){
ospan[i].setAttribute("index",i); //點擊之前就把索引保存在span標籤中
ospan[i].onclick=function(){
//將所有的span樣式移除
for(var j=0;j<ospan.length;j++){
ospan[j].className="";
//ospan[j].removeAttribute("class");
}
// 設置當前的span類樣式
this.className="current";

       //先將所有地li隱藏
       for(var k=0;k<oli.length;k++){
            oli[k].removeAttribute("class");
       }
        //獲取當前被點擊的索引值
        var index=this.getAttribute("index");
        //當前點擊span對應的li顯示
        oli[index].className="current";
    }
}