使用原生js仿写win10时钟

Posted 2020-10-13

　　学习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 }

 

　　学习了一个月，很多编程习惯还没养成，存在诸多瑕疵~~不过从一个编程小白能写出这样的效果，暂时还是满足了，以后继续加油了！