当前位置：
首页 >
电子日历制作
发布时间：2023/12/20
46
豆豆
电子日历
<!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(); //返回对应的星期几//动态添加HTML元素；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>总结
- 上一篇： make[2]: *** 没有规则可制作
- 下一篇： 计算机word除法公式,word怎么用函