找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发简易日历插件

2018-07-31 分类：教程 / 面试 阅读(949) 评论(0)

移动端前端开发分辨率|web前端移动端开发|移动端h5前端开发

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>web js简易日历</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background: #F6F9FC;
            font-family: arial;
        }
        li {
            list-style: none;
        }
        .calendar {
            width: 210px;
            margin: 50px auto;
            padding: 10px 10px 20px 20px;
            background: #E0E3E6;
        }
        .calendar ul {
            width: 210px;
            overflow: hidden;
            padding-bottom: 10px;
        }
        .calendar li {
            float: left;
            width: 58px;
            height: 54px;
            margin: 10px 10px 0 0;
            border: 1px solid #fff;
            background: #424242;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }
        .calendar h2 {
            font-size: 20px;
            padding-top: 5px;
        }
        .calendar p {
            font-size: 14px;
        }
        .calendar .active {
            border: 1px solid #424242;
            background: #fff;
            color: #e84a7e;
        }
        .calendar .active p {
            font-weight: bold;
        }
        .calendar .text {
            width: 178px;
            padding: 0 10px 10px;
            border: 1px solid #fff;
            padding-top: 10px;
            background: #F1F1F1;
            color: #555;
        }
    </style>
    <script>
        window.onload = function () {
            var aText = [‘快过年了，在这里提前祝大家新年快乐！！！’,
                ‘还没脱单的早点脱单’,
                ‘脱单的事业顺风顺水’,
                ‘已经有娃的家庭美满’,
                ‘还在读书的考试都过’,
                6, 5, 4, 3, 2, 1, ‘拿完年终奖，开开心心回家过年！！！’];
            var oDiv = document.getElementById(‘tab’);
            var oUl = oDiv.getElementsByTagName(‘ul’)[0];
            var aLi = oUl.getElementsByTagName(‘li’);
            var oTxt = oDiv.getElementsByClassName(‘text’)[0];
            for (var i = 0, len = aLi.length; i < len; i++) {
                aLi[i].index = i;
                aLi[i].onmouseover = function () {
                    for (var j = 0; j < aLi.length; j++) {
                        aLi[j].className = ”;
                    }
                    this.className = ‘active’;
                    oTxt.innerHTML = ‘<h3>’ + (this.index + 1) + ‘月祝福</h3>’
                        + ‘<p>’ + aText[this.index] + ‘</p>’;
                }
            }
        }
    </script>
</head>
<body>
    <div id=”tab” class=”calendar”>
        <ul>
            <li class=”active”>
                <h2>1</h2>
                <p>JAN</p>
            </li>
            <li>
                <h2>2</h2>
                <p>FER</p>
            </li>
            <li>
                <h2>3</h2>
                <p>MAR</p>
            </li>
            <li>
                <h2>4</h2>
                <p>APR</p>
            </li>
            <li>
                <h2>5</h2>
                <p>MAY</p>
            </li>
            <li>
                <h2>6</h2>
                <p>JUN</p>
            </li>
            <li>
                <h2>7</h2>
                <p>JUL</p>
            </li>
            <li>
                <h2>8</h2>
                <p>AUG</p>
            </li>
            <li>
                <h2>9</h2>
                <p>SEP</p>
            </li>
            <li>
                <h2>10</h2>
                <p>OCT</p>
            </li>
            <li>
                <h2>11</h2>
                <p>NOV</p>
            </li>
            <li>
                <h2>12</h2>
                <p>DEC</p>
            </li>
        </ul>
        <div class=”text”>
            <h3>1月祝福</h3>
            <p>快过年了，在这里提前祝大家新年快乐！！！</p>
        </div>
    </div>
</body>
</html>

web前端开发热门框架|嘉兴前端和移动端开发|前端开发面试题菜鸟教程

赞(0)
前端开发者 » 前端开发简易日历插件
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论