使用原生js仿寫win10時鐘
阿新 • • 發佈：2017-11-04
undefine 效果 d+ cloc 控制 pan roman type ext
學習web前端已經一月了，突然就像做一點什麽，於是就仿寫了一個win10時鐘（農歷計算準確度太差，於是就忽略不寫了~~）
一、HTML布局
1 <div class="wrap"> 2 <div class="time-present"> 3 <div class="time-local"> 4 <span id="hours">13</span><span>:</span><span id="minutes">11</span><span>:</span><span id="seconds">19</span> 5</div> 6 <div class="time-dty"> 7 <span id="years">2017</span><span>年</span><span id="months">10</span><span>月</span><span id="days">29</span><span>日</span><span>，</span> 8<span>星期</span><span id="wenks">日</span> 9 </div> 10 </div> 11 <div class="displaybox"> 12 <div class="times-bar mclear"> 13 <div id="oym"> 14 <span id="years-b">2017</span><span>年</span><span id="months-b">10</span><span>月</span> 15</div> 16 <div id="oy"> 17 <span id="year-b">2017</span><span>年</span> 18 </div> 19 <div id="oyy"> 20 <span id="year-bgn">2010</span><span>-</span><span id="year-end">2019</span> 21 </div> 22 <input type="image" src="img/up.png" id="up"></input> 23 <input type="image" src="img/down.png" id="down"></input> 24 </div> 25 <div class="daylists"> 26 <div class="weeklist mclear"> 27 <ul> 28 <li>一</li>*7 29 </ul> 30 </div> 31 <div class="daylist"> 32 <ul class="mclear"> 33 <li>26號</li>*42 34 </ul> 35 </div> 36 </div> 37 <div class="monthlist"> 38 <ul class="mclear"> 39 <li>1月</li>*16 40 </ul> 41 </div> 42 <div class="yearlist"> 43 <ul class="mclear"> 44 <li>2009</li>*16 45 </ul> 46 </div> 47 </div> 48 </div>
二、CSS樣式
1 body{margin:0px;} 2 ul{margin:0px;padding:0px;} 3 li{list-style:none;} 4 .mclear:after{content:"";clear:both;display:block;} 5 .wrap{height:620px;width:450px;background-color:#10446c;margin:20px auto;} 6 .time-present{border-bottom:1px solid #3e6f97;} 7 .time-local{margin-top:26px;font:40px/60px "times new roman";color:#f0ffff;text-indent:30px;} 8 .time-dty{font:20px/40px "微軟雅黑";color:#4091d3;margin-bottom:18px;text-indent:30px;} 9 .times-bar{margin-top:8px;font:18px/48px "微軟雅黑";text-indent:30px;color:#dfdfdf;position:relative;} 10 #up{ position:absolute; top:18px; right:100px; } 11 #down{ position:absolute; top:18px; right:40px; } 12 #oym,#oy,#oyy{float:left;} 13 #oym{display:block;} 14 #oy,#oyy{display:none;} 15 .daylists{display:block;} 16 .daylist{width:450px;height:300px;overflow:hidden;} 17 .daylist ul{position:relative;} 18 .weeklist ul,.daylist ul{ margin-left:20px;} 19 .weeklist ul li,.daylist ul li{ float:left; width:52px; height:44px; border:3px solid #10446c; text-align:center; } 20 .weeklist ul li{ font:13px/44px "微軟雅黑"; color:#ffffff; } 21 .daylist ul li{ font:13px/44px "微軟雅黑"; color:#708fa7;} 22 .monthlist,.yearlist{display:none;width:450px;height:350px;overflow:hidden;} 23 .monthlist ul,.yearlist ul{position:relative;} 24 .monthlist ul,.yearlist ul{ margin-left:16px; } 25 .monthlist ul li,.yearlist ul li{ float:left; width:97px; height:82px; border:3px solid #10446c; font:13px/82px "微軟雅黑"; text-align:center; color:#708fa7; } 26 .daylist ul li:hover,.monthlist ul li:hover,.yearlist ul li:hover{ border:3px solid #708fa7; } 27 .active{ color:#ffffff !important; } 28 .chsed{ border:3px solid #4097dc !important;}
三、js原生代碼
首先對頁面進行初始化，對日歷、月歷、年歷切換進行控制，以及回到當前時間進行控制~！~
1 //頁面初始化 2 clock(); 3 oYearb.innerHTML=oYrs.innerHTML; 4 oMonb.innerHTML=oMon.innerHTML; 5 oSwitch(0); 6 getDaysList(oYrs.innerHTML,oMon.innerHTML,oDay.innerHTML,oYearb.innerHTML,oMonb.innerHTML); 7 setInterval(clock,1000); 8 //展示區功能擴展 9 oDty[0].onclick=function(){//回到當前時間 10 oSwitch(0); 11 scaleShow(oDisp[0],300); 12 oMonb.innerHTML=oMon.innerHTML; 13 oYearb.innerHTML=oYrs.innerHTML; 14 getDaysList(oYrs.innerHTML,oMon.innerHTML,oDay.innerHTML,oYrs.innerHTML,oMon.innerHTML); 15 } 16 17 oym.onclick=function(){//切換至月歷 18 oSwitch(1); 19 scaleShow(oMonthList[0],300); 20 getList(oYrs.innerHTML,oMon.innerHTML,oys.innerHTML) 21 } 22 oy.onclick=function(){//切換至年歷 23 oSwitch(2); 24 scaleShow(oYearList[0],300); 25 var oNum1=Math.floor((Number(oys.innerHTML)-oYearBgn)/10); 26 oybgn.innerHTML=oYearBgn+oNum1*10; 27 oyend.innerHTML=oYearBgn+oNum1*10+9; 28 getList(oYrs.innerHTML,oMon.innerHTML,oybgn.innerHTML,oyend.innerHTML) 29 } 30 for (var i=0;i<oMonthLists.length;i++){//年歷切換月歷、月歷切換日歷控制 31 oMonthLists[i].onclick=function(){ 32 oSwitch(0); 33 scaleShow(oDisp[0],300); 34 oYearb.innerHTML=oys.innerHTML; 35 oMonb.innerHTML=parseInt(this.innerHTML); 36 getDaysList(oYrs.innerHTML,oMon.innerHTML,oDay.innerHTML,oys.innerHTML,parseInt(this.innerHTML)); 37 } 38 oYearLists[i].onclick=function(){ 39 oSwitch(1); 40 scaleShow(oMonthList[0],300); 41 oys.innerHTML=this.innerHTML; 42 getList(oYrs.innerHTML,oMon.innerHTML,this.innerHTML) 43 } 44 } 45 function clock(){//獲取當前時間程序 46 var oDate=new Date(); 47 var oYears=oDate.getFullYear();//從 Date對象以四位數字返回年份。 48 var oMonth=oDate.getMonth();//從 Date對象返回月份 (0 ~ 11)。 49 var oDays=oDate.getDate();//從 Date對象返回一個月中的某一天 (1 ~ 31)。 50 var oHours=oDate.getHours();//返回 Date對象的小時 (0 ~ 23)。 51 var oMins=oDate.getMinutes();//返回 Date對象的分鐘 (0 ~ 59)。 52 var oSecs=oDate.getSeconds();//返回 Date對象的秒數 (0 ~ 59)。 53 if (oMins<10){oMins=‘0‘+oMins;} 54 if (oSecs<10){oSecs=‘0‘+oSecs;} 55 if (oHours<10){oHours=‘0‘+oHours;} 56 oMonth++; 57 58 //設置當前時間/日期顯示 59 oHrs.innerHTML=oHours; 60 oMin.innerHTML=oMins; 61 oSec.innerHTML=oSecs; 62 oYrs.innerHTML=oYears; 63 oMon.innerHTML=oMonth; 64 65 oWenks.innerHTML=weekday(oYears,oMonth,oDays); 66 if (Number(oDay.innerHTML)!=oDays){ 67 oDay.innerHTML=oDays; 68 oYearb.innerHTML=oYears; 69 oMonb.innerHTML=oMonth; 70 getDaysList(oYrs.innerHTML,oMon.innerHTML,oDay.innerHTML,oYearb.innerHTML,oMonb.innerHTML); 71 } 72 }
然後，對日歷、農歷、年歷動態顯示進行控制，對上下翻頁這只時運用了遞歸的思路~
1 function getDaysList(y,m,d,yb,mb){ 2 //日期顯示 3 oBtnUp.onclick=null; 4 oBtnDown.onclick=null; 5 y=Number(y); 6 m=Number(m); 7 d=Number(d); 8 yb=Number(yb); 9 mb=Number(mb); 10 var aWeekday=[‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘,‘日‘]; 11 var oWeek=weekday(yb,mb,1); 12 var oNow=getDaysInMonth(yb,mb) 13 var oNum=0; 14 var otemp=0; 15 var otemps=0; 16 var oUps=0; 17 var oDowns=0; 18 mb==1?(otemp=12,otemps=yb-1):(otemp=mb-1,otemps=yb); 19 oUps=getDaysInMonth(otemps,otemp); 20 for (var j=0;j<aWeekday.length;j++){ 21 if (aWeekday[j]==oWeek){ 22 oNum=j; 23 break; 24 } 25 } 26 for (var k=0;k<oDayLists.length;k++){ 27 oDayLists[k].style.backgroundColor=‘‘; 28 oDayLists[k].classList.remove(‘active‘,‘chsed‘); 29 if(k<oNum){ 30 oDayLists[k].innerHTML=oUps-oNum+k+1; 31 oDayLists[k].classList.remove(‘active‘); 32 }else if(k>oNow+oNum-1){ 33 oDayLists[k].innerHTML=k-oNow-oNum+1; 34 oDayLists[k].classList.remove(‘active‘); 35 }else{ 36 oDayLists[k].innerHTML=k-oNum+1 37 oDayLists[k].classList.add(‘active‘); 38 } 39 } 40 for (var i=0;i<oDayLists.length;i++){ 41 oDayLists[i].index=i; 42 oDayLists[i].onclick=function(){ 43 oDowns<oNum||oDowns>oNow+oNum-1?(oDayLists[oDowns].classList.remove(‘active‘),oDayLists[oDowns].classList.remove(‘chsed‘)):oDayLists[oDowns].classList.remove(‘chsed‘); 44 this.classList.add(‘active‘,‘chsed‘); 45 oDowns=this.index; 46 } 47 if(i>=oNum&&i<=oNow+oNum-1&&Number(oDayLists[i].innerHTML)==d&&m==mb&&y==yb){ 48 oDayLists[i].style.backgroundColor=‘#0177d9‘; 49 oDayLists[i].classList.add(‘active‘,‘chsed‘); 50 oDowns=i; 51 }else if(i>oNow+oNum-1&&Number(oDayLists[i].innerHTML)==d&&Number(m)==Number(mb)+1&&y==yb){ 52 oDayLists[i].style.backgroundColor=‘#0177d9‘; 53 oDayLists[i].classList.add(‘active‘,‘chsed‘); 54 oDowns=i; 55 }else if(i<oNum&&Number(oDayLists[i].innerHTML)==d&&m==mb-1&&y==yb){ 56 oDayLists[i].style.backgroundColor=‘#0177d9‘; 57 oDayLists[i].classList.add(‘active‘,‘chsed‘); 58 oDowns=i; 59 } 60 } 61 oBtnUp.onclick=function(){ 62 mb==1?(mb=12,yb-=1):mb--; 63 oYearb.innerHTML=yb; 64 oMonb.innerHTML=mb; 65 getDaysList(y,m,d,yb,mb); 66 upDownShow(oDayUl,300,1); 67 68 } 69 oBtnDown.onclick=function(){ 70 mb==12?(mb=1,yb+=1):mb++; 71 oYearb.innerHTML=yb; 72 oMonb.innerHTML=mb; 73 getDaysList(y,m,d,yb,mb); 74 upDownShow(oDayUl,300,-1); 75 } 76 } 77 function getList(y,m,yb,mb){ 78 //月歷、年歷顯示 79 oBtnUp.onclick=null; 80 oBtnDown.onclick=null; 81 if(typeof(mb)==‘undefined‘){ 82 m=Number(m); 83 for (var i=0;i<oMonthLists.length;i++){ 84 oMonthLists[i].style.backgroundColor=‘‘; 85 oMonthLists[i].classList.remove(‘active‘); 86 } 87 for (var i=0;i<oMonthLists.length;i++){ 88 if(i<12){ 89 oMonthLists[i].innerHTML=i+1+‘月‘; 90 oMonthLists[i].classList.add(‘active‘); 91 if(y==yb&&i+1==m){oMonthLists[i].style.backgroundColor=‘#0177d9‘;} 92 }else{ 93 oMonthLists[i].innerHTML=i-12+1+‘月‘; 94 } 95 } 96 oBtnUp.onclick=function(){ 97 if(--yb<oYearBgn){yb=oYearBgn;} 98 oys.innerHTML=yb; 99 getList(y,m,yb); 100 upDownShow(oMonthUl,300,1); 101 } 102 oBtnDown.onclick=function(){ 103 ++yb; 104 oys.innerHTML=yb; 105 getList(y,m,yb); 106 upDownShow(oMonthUl,300,-1); 107 } 108 109 }else{ 110 y=Number(y); 111 yb=Number(yb); 112 mb=Number(mb); 113 var oIndexs=(yb-oYearBgn)%16; 114 oIndexs<=6?oIndexs=oIndexs:oIndexs%=4; 115 for (var i=0;i<oYearLists.length;i++){ 116 oYearLists[i].style.backgroundColor=‘‘; 117 oYearLists[i].classList.remove(‘active‘); 118 } 119 for (var i=0;i<oYearLists.length;i++){ 120 oYearLists[i].innerHTML=yb-oIndexs+i; 121 if(i>=oIndexs&&i<=oIndexs+9){ 122 oYearLists[i].classList.add(‘active‘); 123 if(y==yb-oIndexs+i){oYearLists[i].style.backgroundColor=‘#0177d9‘;} 124 } 125 } 126 oBtnUp.onclick=function(){ 127 yb-=10; 128 if(yb<oYearBgn){yb=oYearBgn;} 129 oybgn.innerHTML=yb; 130 oyend.innerHTML=yb+9; 131 getList(y,m,yb,yb+9); 132 upDownShow(oYearUl,300,1); 133 134 } 135 oBtnDown.onclick=function(){ 136 yb+=10; 137 oybgn.innerHTML=yb; 138 oyend.innerHTML=yb+9; 139 getList(y,m,yb,yb+9); 140 upDownShow(oYearUl,300,-1); 141 } 142 } 143 }
最後是動畫控制的小程序及其它小程序
1 function weekday(y,m,d){ 2 //本計算原理為蔡勒公式,僅適用於 1582 年以後 3 //W=[C/4]-2C+Y+[Y/4]+[13*(M+1)/5]+D-1 4 //W:星期,C:世紀減 1,Y:年後兩位,M:月{M=m（當m>2）；M=m+12（m<3）},D:日,[]代表向下取整 5 //w：星期； w對7取模得：0-星期日,1-星期一,2-星期二,3-星期三,4-星期四,5-星期五,6-星期六 6 y=Number(y,10); 7 m=Number(m,10); 8 d=Number(d,10); 9 if (m<3){m+=12;y-=1;} 10 var aWeekday=[‘日‘,‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘] 11 var oC=Math.floor(y/100);//世紀 12 var oY=y%100;//年後兩位 13 var w=Math.floor(oC/4)-2*oC+oY+Math.floor(oY/4)+Math.floor(13*(m+1)/5)+d-1; 14 return aWeekday[(w%7+7)%7]; 15 } 16 function getDaysInMonth(y,m){ 17 //獲取當月天數 18 //y年份，m月份 19 m=parseInt(m); 20 var temp=new Date(y,m,0); 21 return temp.getDate(); 22 } 23 function scaleShow(elem,speed) { 24 //日歷、年歷、年歷切換動畫 25 elem.style.transition=‘0ms‘; 26 elem.style.transform=‘scale(0.5)‘; 27 setTimeout(function () { 28 elem.style.transition=speed+‘ms‘; 29 elem.style.transform=‘scale(1)‘; 30 },0); 31 } 32 function upDownShow(elem,speed,num){ 33 //上下切換動畫 34 var oHeight=getComputedStyle(elem).height; 35 oHeight=oHeight.substring(0,oHeight.length-2); 36 elem.style.transition=‘0ms‘; 37 if (num==1){ 38 elem.style.top=‘-‘+oHeight+‘px‘; 39 }else{ 40 elem.style.top=oHeight+‘px‘; 41 } 42 setTimeout(function(){ 43 elem.style.transition=speed+‘ms‘; 44 elem.style.top=‘0px‘; 45 },0); 46 }
學習了一個月，很多編程習慣還沒養成，存在諸多瑕疵~~不過從一個編程小白能寫出這樣的效果，暫時還是滿足了，以後繼續加油了！
使用原生js仿寫win10時鐘