js原生日历（小白的版本）

最新推荐文章于 2022-10-10 19:31:31 发布

weixin_34357928

最新推荐文章于 2022-10-10 19:31:31 发布

阅读量125

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000015908741

版权

原生日历

图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日历</title>
<style type="text/css">
*{
    margin:0;
    padding:0;
    list-style:none;
}
#out{
    position: absolute;
    width: 300px;
    height: 300px;
    /*border: 1px solid black;*/
    /*background: lightgreen;*/
    top: 100px;
    left:500px;
}
#calendar{
    margin: 25px auto;
    width: 252px;
    height: 255px;
    background: white;
    border: 1px solid black;
    font-size: 12px;
    font-family: Arial;
    box-shadow: 5px 5px 5px green outset;
}
#calendar .top{
    height:45px;
    width:100%;
}
#calendar .top span{
    display:block;
    width:84px;
    height: 23px;
    line-height:23px;
    float:left;
    text-align:center;    
}
#calendar .top span a{
    text-decoration: none;
}
#calendar .top span a:hover{
    color:blue;
}
#calendar .top h4{
    width: 100%;
    height: 19px;
    text-line: center;
    line-height: 19px;
    float:left;
    text-align:center;
}
#calendar .list ul{
    width: 100%;
    height: 100%;
}
#calendar .list ul .week{
    width: 36px;
    height: 30px;
    line-height: 30px;
    float: left;
    text-align:center;
    background-color:#ccc;
}
#calendar .list ul .day{
    background-color:white;
}
</style>
<script type="text/javascript">
var months = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
window.onload = function(){
    var iDate = new Date();
    var yearBox = document.getElementById('year');
    var monthBox = document.getElementById('month');
    var day = iDate.getDate();
    yearBox.innerHTML = iDate.getFullYear();
    monthBox.innerHTML = months[iDate.getMonth()];
    createList(iDate);
    doMark(day);
}
function doMark(day){
    var addBox = document.getElementById('add');
    var lis = addBox.children;
    for(var i=lis.length - 1;i > 6;i--){
        if(lis[i].innerHTML == day){
            lis[i].style.cssText = 'background-color:lightgreen;border-radius:10px;';
            break;
        }
    }
}
function nextMonth(){
    var yearBox = document.getElementById('year');
    var monthBox = document.getElementById('month'); 
    var index = getIndex(monthBox);
    if(index == 11){
        yearBox.innerHTML = parseInt(yearBox.innerHTML) + 1;
    }
    var next = (++index) % (months.length);
    monthBox.innerHTML = months[next];
    var date = new Date();
    date.setYear(parseInt(yearBox.innerHTML));
    date.setMonth(next);
    removeList();
    createList(date);
}
function lastMonth(){
    var yearBox = document.getElementById('year');
    var monthBox = document.getElementById('month');
    var index = getIndex(monthBox);
    if(index == 0){
        yearBox.innerHTML = parseInt(yearBox.innerHTML) - 1;
    }
    var last = (--index + months.length) % (months.length)
    monthBox.innerHTML = months[last];
    var date = new Date();
    date.setYear(parseInt(yearBox.innerHTML));
    date.setMonth(last);
    removeList();
    createList(date);
}
function getIndex(monthBox){
    for(var i = 0;i < months.length;i++){
        if(months[i] == monthBox.innerHTML)
            return i;
    }
}
Date.prototype.getMonthDays = function(){
    var iDate = new Date();
    iDate.setYear(this.getFullYear());
    iDate.setMonth(this.getMonth() + 1);
    iDate.setDate(0);
    return iDate.getDate();
} 
function createList(date){
    var days = date.getMonthDays();
    date.setDate(1);
    var fir = date.getDay();
    var liNums = fir + days;
    var addBox = document.getElementById('add');
    for(var i = 0;i < liNums;i++){
        var liBox = document.createElement('li');
        liBox.className = 'week day';
        if(i >= fir){
            liBox.innerHTML = (i- fir + 1);
        }
        addBox.appendChild(liBox);
    }
}
function removeList(){
    var addBox = document.getElementById('add');
    var lis = addBox.children;
    //记住要从后往前删，因为removeChild方法会实时改变原有的索引
    for(var i=lis.length - 1;i > 6;i--)
        addBox.removeChild(lis[i]);
}
</script>
</head>
<body>
<div id="out">
    <div id="calendar">
        <div class="top">
            <span><a href="#" onclick="lastMonth()">上一月</a></span>
            <span id="year"></span>
            <span><a href="#" onclick="nextMonth()">下一月</a></span>
            <h4 id="month"></h4>
        </div>
        <div class="list">
            <ul id="add">
                <li class="week">日</li>            
                <li class="week">一</li>            
                <li class="week">二</li>            
                <li class="week">三</li>            
                <li class="week">四</li>            
                <li class="week">五</li>            
                <li class="week">六</li>                            
            </ul>
        </div>
    </div>
</div>
</body>
</html>