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