JS基础教程（动态日历[1]）

作者: 浮若星尘 | 来源:发表于2017-12-17 22:07 被阅读0次

闲话不多少，先上效果图。

Screenshot_20171217_215802.png

怎么样，是不是比好很多呢？
代码如下：

Calendar.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>日历</title>
    <link rel="stylesheet" href="calendar.css" type="text/css">

</head>
<div id="frame" class="frame_low">
    <div class="top">
        <span class="left" onclick="preMonth()"></span>
        <span class="right" onclick="postMonth()"></span>
        <h2></h2>
    </div>
    <ul id="week">
        <li>Sun</li>
        <li>Mon</li>
        <li>Tue</li>
        <li>Wed</li>
        <li>The</li>
        <li>Fri</li>
        <li>Sat</li>
    </ul>

    <div id="data">
        <div class="firstLine">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
        <div class="Line">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
        <div class="Line">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
        <div class="Line">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
        <div class="Line">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
        <div class="lastLine">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>

    </div>
</div>
<script src="calendar.js" type="text/javascript"></script>
<body>
</body>
</html>

Calendar.css

*{
    margin: 0px;
    padding: 0px;
    text-align: center;
}
.frame_Low{
    width: 500px;
    height: 300px;
    border: 2px solid #DDD;
    margin: auto;
    border-radius: 5px;
}
.frame_Hight{
    width: 500px;
    height: 340px;
    border: 2px solid #DDD;
    margin: auto;
    border-radius: 5px;
}
.top{
    width: 495px;
    height: 50px;
    background-color: #f0f0f0;
    border-radius: 5px;
    margin: auto;
    margin-top:3px;
    text-align: center;
    line-height: 45px;
}
.left{
    float: left;
    background: url(ui-icons_444444_256x240.png);
    width: 18px;
    height: 20px;
    background-position: -79px -187px;
    background-repeat: no-repeat;
    margin-top: 10px;
}
.right{
    float: right;
    background: url(ui-icons_444444_256x240.png);
    width: 18px;
    height: 20px;
    background-position: -47px -187px;
    background-repeat: no-repeat;
    margin-top: 10px;
}

a:hover .left, a:hover .right{
    border: 2px solid #666666;
}
#week li{
    list-style-type: none;
    float: left;
    width: 67px;
    height: 37px;
    margin: 2px;
    background-color:orange;
    text-align: center;
    line-height: 40px;
    font-weight: 600;

}
#data span{
    float: left;
    width: 63px;
    height: 33px;
    /*这个地方可以优化一下，方角改园角*/

    margin: 2px;
    text-align: center;
}
.open{
    background-color: #f0f0f0;
    border: 2px solid #D4D4D4;
}
.close{
    background-color: #fff;
    border: 2px solid #fff;
}
.clicked{
    background-color: yellow;
    border: 2px solid #D4D4D4;
}

.Mouseover{
    display: block;
    background: #666666;
}

.Mouseout{
    display: none;
    background: #ffffff;
    float: none;
}

Calendar.js

var date=new Date();    //初始化日期
var month=["January","February","March","April","May","June","July","August",
    "September","October","November","December"];
function setData() {
    var mon=date.getMonth();    //获取月份
    var year=date.getFullYear();//获取完整格式年
    document.getElementsByTagName("h2")[0].innerHTML=month[mon]+" "+year;
    //这里的【0】是因为Elements的TagName会有多个h2，要以此为区分
    var day;
    if(mon+1==2){
        if((year%4==0&&(year%100!=0))||(year%400==0))
            day=29;
        else
            day=28;
    }
    else{
        if(mon==0||mon==2||mon==4||mon==6||mon==7||mon==9||mon==11)
            day=31;
        else
            day=30;
    }
    //调用返回的是一个数组,只有一个也是要下标的,对每一个div赋值
    for(var x=0;x<document.getElementsByClassName('firstLine')[0].childNodes.length;x++)
        document.getElementsByClassName('firstLine')[0].childNodes[x].className="open";

    for(var x=0;x<document.getElementsByClassName('Line').length;x++)
        for(var y=0;y<document.getElementsByClassName('Line')[x].childNodes.length;y++)
            document.getElementsByClassName('Line')[x].childNodes[y].className="open";

    for(var x=0;x<document.getElementsByClassName('lastLine')[0].childNodes.length;x++)
        document.getElementsByClassName('lastLine')[0].childNodes[x].className="open";

    date.setDate(1);
    var firstDay=date.getDay(); //0-6分别代表星期一到星期天
    for(var x=1;x<=firstDay;x++){
        document.getElementsByClassName('firstLine')[0].childNodes[x].className="close";
        document.getElementsByClassName('firstLine')[0].childNodes[x].innerHTML="";
    }

    var count=1;
    for(var x=firstDay+1;x<document.getElementsByClassName('firstLine')[0].childNodes.length-1;x++) {
        document.getElementsByClassName('firstLine')[0].childNodes[x].innerHTML = count++;
        //点击变黄点
        document.getElementsByClassName('firstLine')[0].childNodes[x].onclick = function () {
            clearall(firstDay);
            this.className='clicked';
        }
    }

    var flag=0;
    for(var x=0;x<document.getElementsByClassName("Line").length;x++){
        for(var y=1;y<document.getElementsByClassName('Line')[x].childNodes.length-1;y++){
            if(count<=day) {
                document.getElementsByClassName('Line')[x].childNodes[y].innerHTML = count++;
                //点击变黄点
                document.getElementsByClassName('Line')[x].childNodes[y].onclick = function () {
                    clearall(firstDay);
                    this.className='clicked';
                }
            }
            else{
                flag=1;
                document.getElementsByClassName('Line')[x].childNodes[y].className="close";
                document.getElementsByClassName('Line')[x].childNodes[y].innerHTML="";
            }

        }
    }
    if(flag==1||count==day+1){
        for(var x=0;x<document.getElementsByClassName('lastLine')[0].childNodes.length;x++){
            document.getElementsByClassName('lastLine')[0].childNodes[x].className="close";
            document.getElementsByClassName("lastLine")[0].childNodes[x].innerHTML="";
        }
        document.getElementById("frame").className="frame_Low";
    }else{
        for(var x=1;x<document.getElementsByClassName("lastLine")[0].childNodes.length-1;x++){
            if(count<=day){
                document.getElementsByClassName("lastLine")[0].childNodes[x].innerHTML=count++;

                //点击变黄点
                document.getElementsByClassName('lastLine')[0].childNodes[x].onclick = function () {
                    clearall(firstDay);
                    this.className='clicked';
                }

            }
            else{
                document.getElementsByClassName("lastLine")[0].childNodes[x].className="close";
                document.getElementsByClassName("lastLine")[0].childNodes[x].innerHTML="";
            }
        }
        document.getElementById("frame").className="frame_Hight";
    }
}

//清除黄点
function clearall(firstDay) {
    for (var x = firstDay + 1; x < document.getElementsByClassName('firstLine')[0].childNodes.length - 1; x++)
        document.getElementsByClassName('firstLine')[0].childNodes[x].className = "open";
    for (var x = 0; x < document.getElementsByClassName('Line').length; x++)
        for (var y = 0; y < document.getElementsByClassName('Line')[x].childNodes.length; y++)
            if (document.getElementsByClassName('Line')[x].childNodes[y].className != 'close')
                document.getElementsByClassName('Line')[x].childNodes[y].className = "open";
    for(var x=1;x<document.getElementsByClassName("lastLine")[0].childNodes.length-1;x++) {
        if (document.getElementsByClassName('lastLine')[0].childNodes[x].className != 'close')
            document.getElementsByClassName('lastLine')[0].childNodes[x].className = "open";
    }
}

onload=setData();
function preMonth() {
    if(date.getMonth()!=0){
        date.setMonth(date.getMonth()-1);   //设置月份减一
    }
    else{
        date.setFullYear(date.getFullYear()-1);//月份到了0，前一个年份
        date.setMonth(11);  //这里11是12月
    }
    setData();  //调用显示函数
}
function postMonth() {
    if(date.getMonth()==11){
        date.setMonth(0);
        date.setFullYear(date.getFullYear()+1);
    }
    else{
        date.setMonth(date.getMonth()+1);
    }
    setData();
}

这里上传两张用于背景的图片

请大家注意路径问题

ui-icons_444444_256x240.png

ui-icons_ffffff_256x240.png

这里经过我反复的测试，发现了一些问题。

Screenshot_20171217_220443.png

目前，因为某些原因，你懂得啦，我现在还不行。嘿嘿。

网友评论

本文标题：JS基础教程（动态日历[1]）

本文链接：https://www.haomeiwen.com/subject/otiuwxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！