简单的电子日历的设计与实现 web前端开发 css JavaScript HTML5

想给世界留下 1bite 的印象

已于 2022-05-11 20:52:58 修改

阅读量1.5k

点赞数 2

文章标签： css html5 javascript

于 2021-09-23 16:12:42 首次发布

本文链接：https://blog.csdn.net/qq_51272114/article/details/120437213

版权

代码与注释如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单的电子日历的设计与实现</title>
<style>
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;
    }
</style>
</head>
<!-显示当前月份->
<body onLoad="showDate()">
<!-3级标题->
<h3 align="center">简单的电子日历的设计与实现</h3>
<!-下划线->
<hr/>
<!-id为calendar的div大框架->
<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>
<script language="javascript">
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{
                    //需要判断当前是否为闰年
                    if (((year%4)==0&&(year%100)!=0)||(year%400)==0){
                        allday =29;
                        //闰年的月份为29天
                        }else{
                            allday=28;
                            //非闰年的月份为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 ="";
    //动态添加HTML元素
//如果本月的第一天不是星期天，则前面需要用空白元素补完日期
    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();
        }
</script>
</body>
</html>

想给世界留下 1bite 的印象

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
2
评论
简单的电子日历的设计与实现 web前端开发 css JavaScript HTML5

代码与注释如下<!doctype html><html><head><meta charset="utf-8"><title>简单的电子日历的设计与实现</title><style>div{ text-align:center; margin-top:10px; margin-bottom:10px; }#calendar{ width:400px; m...
复制链接

扫一扫