您的位置：首页 > Web前端 > JavaScript

JS版-简易年历

2015-12-06 15:34 447 查看

<!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.onload=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].onclick=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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航