前端 javascript 練習題--Math、Data及函式封裝【千鋒】

前端 javascript 練習題 --Math 、 Data 及函式封裝【千鋒】

Math 物件  

1. 編寫一個函式，獲得一個十六進位制的隨機顏色的字串 ( 例如： #20CD4F)
方法：

function   f2 (){

     var  str = "0123456789abcdef" ;

     var  color = "#" ;

     for ( var  i = 0 ; i < 6 ; i ++ ){

         var  num = Math . floor ( Math . random () * str . length );

        color = color + str [ num ];

     }

    console . log ( color );} f2 ();

date 物件

數碼時鐘
思路分析：將時分秒的圖片，按照一定規則命名，方便後續根據時間設定圖片路徑

方法：

< div id =" pic ">

     < img src =" img/0.png "  alt =""   />

     < img src =" img/0.png "  alt =""   />

     < span > 時 </ span >

     < img src =" img/0.png "  alt =""   />

     < img src =" img/0.png "  alt =""   />

     < span > 分 </ span >

     < img src =" img/0.png "  alt =""   />

     < img src =" img/0.png "  alt =""   />

     < span > 秒 </ span ></ div >

< script >

    function f1(){

        var str="";

        // 透過標籤獲取所有的圖片存放在變數 imgid 中

        var imgid=document.getElementsByTagName("img");

        var oDate = new Date(); // 建立時間物件

        var h=oDate.getHours();  // 分別去獲取當前的時分秒

        var fen=oDate.getMinutes();

        var miao= oDate.getSeconds();

        var h1=h>=10?h:"0"+h;  // 保證都是由 2 位組成

        var fen1=fen>=10?fen:"0"+fen;

        var miao1=miao>=10?miao:"0"+miao;

        str=str+h1+fen1+miao1;  // 組合成一個新的字串

        for(var i=0;i<str.length;i++){  // 遍歷字串

            // 類比 src="img/0.png";

            imgid[i].src='img/'+str[i]+'.png'; // 設定每個圖片的 src 路徑

        }

    }

    setInterval(f1,1000);  // 定時器  後一個引數以毫秒為單位

函式的封裝

封裝方法：將函式作為物件的引數

eg1 ： . 判斷某年份是否為閏年，將日期格式化輸出 “2015|08|24” ，獲得某個月份的天數，判斷兩個日期相差的天數，獲得 N 天以後的日期

var  dateUtil =   {

    isLeapYear : function (year){

       if ( year % 4 == 0 && year % 100 != 0   ||  year % 400 == 0 ){

          return   true ;

       }

       return   false ;

    },

    formatDate : function (date,str){

       var  year =  date . getFullYear ();

       var  month =  date . getMonth () + 1 ;

       var  day =  date . getDate ();

       if ( month <   10 ){

         month =   "0" + month ;

       }

       if ( day <   10 ){

         day =   "0"   +  day ;

       }

       var  ss =  year + str + month + str + day

       return  ss ;

    },

    getDays : function (date){

       var  year =  date . getFullYear ();

       var  month =  date . getMonth () + 1 ;

       switch ( month ){

          case   2 :

             if ( dateUtil . isLeapYear ( year )){

                return   29 ;

             }

             return   28 ;

             break ;

          case   4 :

          case   6 :

          case   9 :

          case   11 :

             return   30 ;

             break ;

          default :

             return   31 ;

       }

    },

    getDiffDays : function (date1,date2){

       // 兩個日期相減會得到一個相差的毫秒數

       // 相差的天時分秒

       var  ss =  Math . abs (( date2 - date1 ) / 1000 );

       var  day =  Math . floor ( ss / 24 / 3600 );

       var  hour =  Math . floor ( ss / 3600 % 24 );

       var  minute =  Math . floor ( ss / 60 % 60 );

       var  second =  Math . floor ( ss % 60 );

       return  day + " 天 " + hour + " 時 " + minute + " 分 " + second + " 秒 " ;

    },

    getNDays : function (n){

       var  oDate =   new   Date ();

      oDate . setDate ( oDate . getDate () + n );

       return  oDate ;

    }};

DOM 和 BOM