前端 javascript 練習題--Math、Data及函數封裝

好程式員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對象

數位時鐘

思路分析：将時分秒的圖檔，按照一定規則命名，友善後續根據時間設定圖檔路徑

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

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