电子日历的设计和实现

最新推荐文章于 2023-11-07 20:15:35 发布

不见蝴蝶不见君。

最新推荐文章于 2023-11-07 20:15:35 发布

阅读量5.6k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/gabby____/article/details/82926660

版权

js 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="haha.css">
</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>
<script>
    var today=new Date();
    var year=today.getFullYear();
    var month=today.getMonth()+1;
    var day=today.getDate();
    var allday=0;

    function showMonth(){
        var year_month=year+"年"+month+"月";
        document.getElementById("month").innerHTML=year_month;
    }

    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 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();
    }
</script>

</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;
}

不见蝴蝶不见君。

关注

1
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
电子日历的设计和实现

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" href="haha.css&
复制链接

扫一扫