html+css+js设计电子日历
生活随笔
收集整理的這篇文章主要介紹了
html+css+js设计电子日历
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML：?
<!DOCTYPE html> <html><head><title>簡單電子日歷的設計與實現</title><meta charset="utf-8"><link rel="stylesheet" href="css/calendar.css"><script src="js/calendar.js"></script></head><body onload="showDate()"><h3>簡單電子日歷的設計與實現</h3><hr /><div id="calendar"><!--狀態欄--><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; }#calendar{width: 400px;margin:auto; }button{width: 25%;float:left;height:40px; }#month{width: 50%;float:left; }.everyday{width: 14%;float:left; }js:?
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;//4、6、9、11月份為30天} else {allday = 31;//其他月份為31天（不包括2月份）}} else {//如果是2月份需要判斷當前是否為閏年if (((year % 4) == 0 && (year % 100) != 0) || (year % 400) == 0) {allday = 29;//閏年的2月份是29天} else {allday = 28;//非閏年的2月份是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 xiqi = firstdate.getDay();//動態添加HTML元素var daterow = document.getElementById("day");daterow.innerHTML = "";//如果本月第一天不是周日，則前面需要用空白元素補全日期if (xiqi != 0) {for (var i = 0; i < xiqi; 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(); }?
總結
以上是生活随笔為你收集整理的html+css+js设计电子日历的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 人社部又官宣了！电子劳动合同怎么保存、应
- 下一篇： （干货）关于发布劳动合同示范文本的说明