好程序员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