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