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

好程序员web前端教程官网：http://www.goodprogrammer.org/html5_class.shtml