前端 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 . 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].>

            // 將所有的 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";

        }

    }