JS版-简易年历

最新推荐文章于 2023-01-16 16:39:07 发布

自由2017

最新推荐文章于 2023-01-16 16:39:07 发布

阅读量2.7k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/liujie19901217/article/details/50195483

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的简易年历</title>
<style type="text/css">
*{margin:0;padding: 0;}
li{list-style: none;}
#wrap{width: 210px;margin: 50px auto 0;background: #eae9e9;padding:10px 10px 20px 20px;}
#wrap ul{width: 210px;overflow: hidden;padding-bottom: 10px;}
#wrap ul li{width: 58px;float: left;border: 1px solid;margin: 10px 10px 0 0;text-align: center;background:#424242;
height: 54px;color: #fff;cursor: pointer;}
#wrap ul li h2{font-size: 20px;padding-top: 5px;}
#wrap ul li p{font-size: 14px;}

#wrap .active{background: #fff;color: #e84a7e;}
#wrap .active p{font-weight: bold;}

#wrap .text{border:1px solid #fff;width: 178px;background:#f1f1f1;padding: 10px 10px 10px;}
#wrap .text h2{font-size: 14px;margin-bottom: 10px;}
#wrap .text p{font-size: 12px;line-height: 18px;}
</style>
<script type="text/javascript">
window.οnlοad=function(){
       var aDatas=[
"快过年了，大家可以商量着去哪玩吧～",
"精通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("wrap");
     var aUl=oDiv.getElementsByTagName("ul")[0];
     var aLi=oDiv.getElementsByTagName("li");
     var aDiv=oDiv.getElementsByTagName("div")[0];
     for(var i=0;i<aLi.length;i++){
      aLi[i].index=i;
      aLi[i].οnclick=function(){
        for(var j=0;j<aLi.length;j++){
          aLi[j].className='';
        }
        this.className='active';
        aDiv.innerHTML='<h2>'+(this.index+1)+'月份安排</h2><p>'+aDatas[this.index]+'</p>';
      };
     }
};

</script>
</head>
<body>
<div id="wrap">
    <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>

自由2017

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS版-简易年历

我的简易年历 *{margin:0;padding: 0;}li{list-style: none;}#wrap{width: 210px;margin: 50px auto 0;background: #eae9e9;padding:10px 10px 20px 20px;}#wrap ul{width: 210px;overflow: hidden;padding-bot
复制链接

扫一扫