简单的日历实现
index.html
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>簡單日歷實現</title><link rel="stylesheet" type="text/css" href="index.css"/><script src="index.js"></script></head><body onload="showDate()"><h3 class="center_h3">簡單日歷的設計與實現</h3><hr ><div id="calendar"><!-- 狀態欄 --><div class="flo"><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; } .center_h3{text-align: center; } #calendar{width: 400px;margin: auto; } button{width: 25%;float: left;height: 40px; } #month{width: 50%;float: left; } .flo{overflow: hidden; } .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}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 xiqi = firstdate.getDay();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() }?
總結
- 上一篇： Qt-Onvif客户端
- 下一篇： 我的膝盖检查报告