js制作简单年历

<!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>端午节64日至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日
废除奴隶制国际日: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>

练习源来自于:http://www.fgm.cc/learn/lesson2/08.html

你可能感兴趣的:(原生js,Demo)