好程式設計師web前端分享前端javascript練習題一

好程式設計師web前端 教程將會為大家持續 分享 前端javascript練習題 系列。

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