前端 javascript 練習題 -簡易年曆及tab切換

前端 javascript 練習題 -簡易年曆及tab切換

簡易年曆

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[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[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="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";
    }
}