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