jQuery简易年历

最新推荐文章于 2024-06-22 09:50:36 发布

kelokole

最新推荐文章于 2024-06-22 09:50:36 发布

阅读量500

点赞数

本文链接：https://blog.csdn.net/qq_44254672/article/details/91844804

版权

<!DOCTYPE html>
<html>
    <head>
        <title>简易Js年历</title>
        <style type="text/css">
            *{ margin: 0px; padding: 0px; text-align: center; }
            ul{ list-style-type: none; }
            .bpp6{ width: 513px; height: 300px; background: #eaeaea; margin: 60px auto; }
            .bpp6 ul{ width: 493px; height: 170px; padding: 10px 0 20px 20px; }
            .bpp6 ul li{ color: #fff; float: left; width: 50px; height: 50px; cursor: pointer; font-size: 14px; text-align: center; 
                background: #424242; line-height: 25px; border: 1px solid #424242; margin: 20px 20px 0 0; padding: 5px; }
            .bpp6 ul li p{ font-weight: bold; }
            .bpp6 ul li.current{ color: #F69; background: #fff; font-size: 15px;}
            .monthtext{ width: 489px; height: 68px; border: 2px solid #fff; line-height: 35px; margin: 5px; color: #666; font-size: 15px; padding: 5px; }
        </style>
        <script src="../../jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <div class="bpp6">
            <ul></ul>
            <div class="monthtext">
                <h2>
                    <strong>number</strong>
                    月节日
                </h2>
                <p>text</p>
            </div>
        </div>
        
        
        <script type="text/javascript">
            // 创建类用于储存数据
            var monthdata = [
                {number: '1', month: "JAN", text: "元旦：1月1日至3日放假三天。"},
                {number: '2', month: "FER", text: "春节：2月2日至8日放假7天。"},
                {number: '3', month: "MAR", text: "妇女节：3月8日妇女节，与我无关。"},
                {number: '4', month: "APR", text: "清明节：4月3日至5日放假3天。"},
                {number: '5', month: "MAY", text: "劳动节：4月30日至5月2日放假3天。"},
                {number: '6', month: "JUN", text: "端午节：6月4日至6日放假3天。"},
                {number: '7', month: "JUL", text: "小暑：7月7日小暑。不放假。"},
                {number: '8', month: "AUG", text: "七夕节：8月6日七夕节。不放假。"},
                {number: '9', month: "SEP", text: "中秋节：9月10日至12日放假3天。"},
                {number: '10', month: "OCT", text: "国庆节：10月1日至7日放假7天。"},
                {number: '11', month: "NOV", text: "立冬：11月8日立冬。不放假。"},
                {number: '12', month: "DEC", text: "艾滋病日:12月1日；废除奴隶制国际日:12月2日。"}
            ];
            $(document).ready(function(){
                // 清楚样式函数
                var items = document.getElementsByClassName("bpp6")[0].getElementsByTagName("ul")[0].getElementsByTagName("li");
                var clean = function(){
                    for(i = 0; i < monthdata.length; i++){
                        items[i].className = "";
                    }
                }
                // 生成内容
                for(var i in monthdata){
                    $(".bpp6 ul").append("<li>" + "<p>" + monthdata[i].number + "</p>" + "<span>" + monthdata[i].month + "</span>" + "</li>");
                }
                items[5].className = "current";
                $(".monthtext h2 strong").text("6");
                $(".monthtext p").text(monthdata[5].text);
                

                // 遍历事件
                $(".bpp6 ul li").each(function(i){
                    $(this).mouseenter(function(){
                        clean();
                        this.className = "current";
                        $(".monthtext h2 strong").text(i + 1);
                        $(".monthtext p").text(monthdata[i].text);
                    });
                });
            });
        </script>
    </body>
</html>

效果图：