学习js简易年历的制作
2015-01-27 13:46
651 查看
今天学习了一下用js来实现年历的制作,顺便复习了一下this的用法,跟选项卡的制作有点差别,新用到了innerHTML,希望自己坚持下去,各位js大神也多多指点。
innerHtml的用法
现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了。例如top.innerHTML="";就可以在top对应的位置出现一个button了!
程序实现思路--
**类似选项卡,只是底部有一个div;**innerHTML的使用
数组的使用--
**定义:arr[0,1,2,3]**使用:arr[0]
字符串连接--
**作用:连接两个字符串 “+”**问题:连接中的优先级 用()解决
实现源码--
JavaScript<script type="text/javascript"> window.onload=function() { var arr=[ '快过年了,大家一起去放鞭炮咯!', '马上上学了,不开心!', '妇女节快乐!', '很平淡的四月', '劳动光荣!', '儿童节快乐!', '好热的七月!', '八一建军节!', '又开学了哎!' ]; var oDiv=document.getElementById('tab'); var oLi=oDiv.getElementsByTagName('li'); var oTxt=oDiv.getElementsByTagName('div')[0]; var i=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'; oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>'; }; } }; </script></span>
CSS
<span style="font-size:18px;"><style type="text/css"> * { padding: 0;margin: 0; } li { list-style: none; } body { background: #f6f9fc; font-family: arial; } .calendar { width: 210px; margin: 50px auto 0; 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 .active { border: 1px solid #424242; background: #fff; color: #e84a7e; } .calendar .active h2 { } .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; } .calendar .text h2 {font-size: 14px; margin-bottom: 10px; } .calendar .text p { font-size: 12px; line-height: 18px; } </style></span>
HTML
<span style="font-size:18px;"><body> <div id="tab" class="calendar"> <ul> <li class="active"><h2>1</h2><p>一月</p></li> <li><h2>2</h2><p>二月</p></li> <li><h2>3</h2><p>三月</p></li> <li><h2>4</h2><p>四月</p></li> <li><h2>5</h2><p>五月</p></li> <li><h2>6</h2><p>六月</p></li> <li><h2>7</h2><p>七月</p></li> <li><h2>8</h2><p>八月</p></li> <li><h2>9</h2><p>九月</p></li> <li><h2>10</h2><p>十月</p></li> <li><h2>11</h2><p>十一月</p></li> <li><h2>12</h2><p>十二月</p></li> </ul> <div class="text"> </div> </div> </body></span>
效果图
相关文章推荐
- 用JS制作简易的可切换的年历,类似于选项卡
- Ferris教程学习笔记:js示例2.13 简易JS年历
- js制作简易年历完整实例
- 制作 JS 广告的简易入门(二)利用 CSS3 技术制作广告
- JS制作简易日历
- js简易选项卡制作
- 简易选项卡&&简易JS年历
- python学习:urllib库学习:制作简易爬虫下载图片
- JS学习之一个简易的日历控件
- 轻松学习JavaScript十:JavaScript的Date对象制作一个简易钟表
- [cocos2d-x学习笔记][入门基础]Box-2d物理引擎的使用02制作一个简易的愤怒小鸟Demo
- JS 学习制作一个二级菜单
- js简易年历
- 制作一个简易的相册用js
- Ferris教程学习笔记:js示例2.12 简易选项卡
- PHP学习 新闻系统 js编辑框的制作 添加新闻操作
- Js前台彩票系统,全JS前台制作,属于个人学习js以来的一次尝试
- Unity学习笔记1 简易2D横版RPG游戏制作(一)
- 原生js结合html5制作小飞龙的简易跳球
- 轻松学习JavaScript十:JavaScript的Date对象制作一个简易钟表