生活随笔
收集整理的這篇文章主要介紹了
电子日历制作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
電子日歷
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title
</title><link rel="stylesheet" href="style.css">
</head><body onload="showDate()"><h3>簡單電子日歷的設計與實現
</h3><hr /><div id="wrapper"><div><button onclick="lastMonth()">上個月
</button><div id="month"></div><button onclick="nextMonth()">下個月
</button></div><div><div class="everyday">日
</div><div class="everyday">一
</div><div class="everyday">二
</div><div class="everyday">三
</div><div class="everyday">四
</div><div class="everyday">五
</div><div class="everyday">六
</div></div><div id="day"></div></div>
</body>
</html>
css
div {text-align: center
;margin-top: 10px
;margin-bottom: 10px
;
}
#wrapper {width: 400px
;margin: auto
;
}
button{width: 25%
;height: 40px
;float: left
;
}
#month{width: 50%
;height: 20px
;float: left
;
}
.everyday{width: 14%
;float: left
;
}
js
<script
>var today
= new Date();var year
= today
.getFullYear(); var month
= today
.getMonth() + 1;var day
= today
.getDate(); var allday
= 0; function count() {if (month
!= 2) {if ((month
== 4) || (month
== 6) || (month
== 9) || (month
== 11)) {allday
= 30;} else {allday
= 31;}} else {if (((year
% 4) == 0 & (year
% 100) != 0) || (year
% 400) == 0) {allday
= 29;} else {allday
= 28;}}}function showMonth() {var year_month
= year
+ "年" + month
+ "月";document
.getElementById("month").innerHTML
= year_month
;}function showDate() {showMonth();count();var firstdate
= new Date(year
, month
- 1, 1); var week
= firstdate
.getDay(); var daterow
= document
.getElementById("day");daterow
.innerHTML
= "";if (week
!= 0) {for (var i
= 0; i
< week
; i
++) {var dayElement
= document
.createElement("div");dayElement
.className
= "everyday";daterow
.appendChild(dayElement
);}}for (var j
= 1; j
<= allday
; j
++) {var dayElement
= document
.createElement("div");dayElement
.className
= "everyday";dayElement
.innerHTML
= j
+ "";if (j
== day
) {dayElement
.style
.color
= "red";}daterow
.appendChild(dayElement
);}}function lastMonth() {if (month
> 1) {month
-= 1;} else {month
= 12;year
-= 1;}showDate();}function nextMonth() {if (month
< 12) {month
+= 1;} else {month
= 1;year
+= 1;}showDate();}</script
>
總結
以上是生活随笔為你收集整理的电子日历制作的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
