学习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 }
学习了一个月，很多编程习惯还没养成，存在诸多瑕疵~~不过从一个编程小白能写出这样的效果，暂时还是满足了，以后继续加油了！
时间： 2024-10-08 12:25:31