js制作简单年历

最新推荐文章于 2023-09-21 13:13:29 发布

半夜三更看球

最新推荐文章于 2023-09-21 13:13:29 发布

阅读量4.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：原生js Demo 文章标签： javascript 前端练习

本文链接：https://blog.youkuaiyun.com/weixin_44723507/article/details/89437114

原生js Demo 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何利用JavaScript进行前端开发，实践制作一个简单的年历。内容来源于http://www.fgm.cc/learn/lesson2/08.html，是作者的编程练习。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简易js年历</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #calender {
            width: 248px;
            overflow: hidden;
            zoom: 1;
            background: #eaeaea;
            margin: 10px auto;
            padding: 0 0 10px 10px;
        }

        #calender ul {
            overflow: hidden;
            zoom: 1;
        }

        #calender li {
            color: #fff;
            float: left;
            list-style-type: none;
            width: 40px;
            height: 40px;
            font-size: 14px;
            text-align: center;
            background-color: #424242;
            line-height: 1.3;
            border: 1px solid #424242;
            margin: 10px 10px 0 0;
            padding: 5px 5px;
        }

        #calender li.current {
            color: #f69;
            background-color: #fff;

        }

        #calender li strong {
            display: block;
            font-size: 18px;
        }

        #mes {
            color: #666;
            background: #f1f1f1;
            border: 1px solid #fff;
            margin: 10px 10px 0 0;
        }

        #mes {
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div id="calender">
        <ul>
            <li><strong>1</strong>JUN</li>
            <li><strong>2</strong>FEB</li>
            <li><strong>3</strong>MAR</li>
            <li><strong>4</strong>APR</li>
            <li><strong>5</strong>MAY</li>
            <li><strong>6</strong>JUN</li>
            <li><strong>7</strong>JUL</li>
            <li><strong>8</strong>AUG</li>
            <li><strong>9</strong>SEP</li>
            <li><strong>10</strong>OCT</li>
            <li><strong>11</strong>DEC</li>
            <li><strong>12</strong>NOV</li>
        </ul>
        <div id="mes">
            <h2>
                <strong>6</strong>月节日
            </h2>
            <p>端午节6月4日至6日放假3天</p>
        </div>
    </div>
    <script>
        var oLi = document.getElementById("calender").getElementsByTagName("li");
        var mes = document.getElementById("mes");
        var mounth = mes.getElementsByTagName("strong")[0];
        var strMes = document.getElementsByTagName("p")[0];

        var arr = [
            "元旦：1月1日至3日放假三天。",
            "春节：2月2日至8日放假7天。",
            "妇女节：3月8日妇女节，与我无关。",
            "清明节：4月3日至5日放假3天",
            "劳动节：4月30日至5月2日放假3天。",
            "端午节：6月4日至6日放假3天。",
            "小暑：7月7日小暑。不放假。",
            "七夕节：8月6日七夕节。不放假。",
            "中秋节：9月10日至12日放假3天。",
            "国庆节：10月1日至7日放假7天。",
            "立冬：11月8日立冬。不放假。",
            "艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。"
        ]

        for(var i = 0; i < oLi.length; i++){
            oLi[i].index = i;
            oLi[i].onmouseover = function(){
                for(var j = 0; j < oLi.length; j++) oLi[j].className = "";//清除所有li的样式
                this.className = "current";//为鼠标滑过的li添加样式
                mounth.innerHTML = this.index;//通过index"匹配"月份
                strMes.innerHTML = arr[this.index];//通过index匹配数组arr内容
            }
        }




    </script>
</body>

</html>