js制作日历

最新推荐文章于 2024-05-17 14:54:19 发布

原创最新推荐文章于 2024-05-17 14:54:19 发布 · 404 阅读

0 ·

CC 4.0 BY-SA版权

js制作日历专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用JavaScript从头开始创建一个功能齐全的日历组件，包括日、周、月视图切换，日期选择，事件标记等功能。通过学习，你可以掌握DOM操作、日期处理以及事件监听等JavaScript核心技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

制作日历：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .rili{
        background-color: darkgrey;
        width: 300px;
        height: 530px;
        margin: 0 auto;
        padding-top: 41px;
        padding-left: 20px;
        text-align: center;

    }
    #mom div{
        padding: 2px;
        width: 80px;
        height: 74px;
        float: left;
        margin-right: 16px;
        margin-bottom: 12px;
    }
    #mom{
        display: flow-root;
    }
    #show{
        width: 284px;
        height: 133px;
        background-color: white;
        margin-top: 3px;
        text-align: left;
    }
    .text{
        color: red;
        background-color: white;
    }
</style>
<script>
    window.onload = function (){
        var mom = document.getElementById("mom");
        var divs = mom.getElementsByTagName("div");
        var show = document.getElementById("show");
        console.log(divs.length);
        // show.innerHTML = "aaa";
        for(var i = 0;i < divs.length;i++){
            divs[i].className = "";
            divs[i].onmouseover = function(){
                for(var i = 0;i < divs.length;i++){
                    divs[i].index = i+1;
                    this.className = "text";
                    show.innerHTML =  this.index + "月份真好";
                    // console.log(i);
                }
            }
            divs[i].onmouseout = function(){
                    for(var i = 0;i < divs.length;i++){
                        this.className = "";
                        show.innerHTML = "";
                    }
                    
            }
        }
    }
</script>
<body>
    <div class="rili">
        <div id="mom">
            <div>
                <span>一月</span><span>January</span>
            </div>
            <div>
                <span>二月</span><span>February</span>
            </div>
            <div>
                <span>三月</span><span>March</span>
            </div>
            <div>
                <span>四月</span><br><span>April</span>
            </div>
            <div>
                <span>五月</span><br><span>May</span>
            </div>
            <div>
                <span>六月</span><br><span>June</span>
            </div>
            <div>
                <span>七月</span><br><span>July</span>
            </div>
            <div>
                <span>八月</span><br><span>August</span>
            </div>
            <div>
                <span>九月</span><br><span>September</span>
            </div>
            <div>
                <span>十月</span><br><span>October</span>
            </div>
            <div>
                <span>十一月</span><br><span>November</span>
            </div>
            <div>
                <span>十二月</span><br><span>December</span>
            </div>
        </div>
        <div id="show">
            一月份真好
        </div>



            
    </div>
    
       
            
    
       


    </div>    
</body>
</html>