智能社简易日历

最新推荐文章于 2020-03-21 23:05:22 发布

在京奋斗者

最新推荐文章于 2020-03-21 23:05:22 发布

阅读量1.4k

点赞数 2

分类专栏：学习笔记

本文链接：https://blog.csdn.net/u012453843/article/details/51935781

版权

学习笔记专栏收录该内容

93 篇文章 2 订阅

订阅专栏

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        *{margin:0;padding:0}
        li{list-style:none;}
        body{background:#f6f9fc;font-family:Arial, Helvetica, sans-serif}

        .calendar{width:210px;margin:50px auto;padding:10px 10px 20px 20px;background:#eae9e9;}
        .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 li h2{font-size:20px;padding-top:5px;}
        .calendar li p{font-size:14px;}

        .calendar li.active{border:1px solid #424242;background:#fff;color:#e84a87;}
        .calendar li.active p{font-weight: bold;}

        .calendar .text{width:178px;border:1px solid #fff;padding:10px 10px 10px;background: #f1f1f1;color:#555;}
        .calendar .text h2{font-size: 14px;margin-bottom: 10px;}
        .calendar .text p{font-size: 14px;line-height: 18px;}
    </style>
    <script>
        window.onload=function () {
            var arr=["快过年了，大家可以商量着去哪玩吧～",
                "精通JavaScript开发课程 - 结课标准 - 有十条标准可让大家修练成JS高手……",
                "HTML5开发课程，让你熟练掌握移动应用开发技术",
                "精通各种DOM类应用，熟练掌握面向对象编程思想（OOP）、熟悉JS面向对象开发方式 - 智能课堂 - www.zhinengshe.com",
                "熟练掌握AJAX技术及相关应用（例如：新浪微博级应用） - 智能课堂 - www.zhinengshe.com",
                "可以独立写出类似jQuery的小型库（支持各类选择符、事件类、DOM、自定义动画animate、AJAX……） - 智能课堂 - www.zhinengshe.com",
                "精通JS运动特效技术，能完整实现各类网站所有动画特效，如 智能课堂 官网 - 智能课堂 - www.zhinengshe.com",
                "掌握JS调试及优化技术、能兼容所有浏览器 - 智能课堂 - www.zhinengshe.com",
                "精通JS事件对象及事件的工作机制，并能完成各类跨平台应用模块的开发 - 智能课堂 - www.zhinengshe.com",
                "能独立开发表现和性能都很优秀的RIA应用 - 智能课堂 - www.zhinengshe.com",
                "了解后台编程的相关知识，能够和后台工程师配合完成大型交互应用 - 智能课堂 - www.zhinengshe.com",
                "熟悉正则表达式的编写、应用及高级表单验证技术 - 智能课堂 - www.zhinengshe.com"];
            var oDiv=document.getElementById("topDiv");
            var oLi=oDiv.getElementsByTagName("li");
            var div=oDiv.getElementsByTagName("div")[0];
            for(var i=0;i<oLi.length;i++){
                oLi[i].index=i;
                oLi[i].onmouseover=function () {
                    for(var i=0;i<oLi.length;i++){
                        oLi[i].className='';
                    }
                    this.className='active';
                    div.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
                };
            }
        };
    </script>
</head>

<body>
<div id="topDiv" 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">
        <h2>1月活动</h2>
        <p>快过年了，大家可以商量着去哪儿玩吧</p>
    </div>
</div>
</body>
</html>

在京奋斗者

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
智能社简易日历

html>head> meta charset="utf-8"> title>无标题文档title> style> *{margin:0;padding:0} li{list-style:none;} body{background:#f6f9fc;font-family:Arial, Helvetica, sans-ser
复制链接

扫一扫