JS制作简易日历
2013-02-27 20:53
555 查看
日历描述:有12个月,鼠标指向哪个月就会在下方显示月数和当月活动。
思路:
1、获取元素。
2、用数组定义月份内容
3、for循环历遍li元素添加鼠标指向事件。
4、for循环历遍li元素去掉li样式。
5、为当前li元素添加样式。
6、用innerHTML追加当前月份内容。
JS代码:
HTML代码:
思路:
1、获取元素。
2、用数组定义月份内容
3、for循环历遍li元素添加鼠标指向事件。
4、for循环历遍li元素去掉li样式。
5、为当前li元素添加样式。
6、用innerHTML追加当前月份内容。
JS代码:
<script> var neirong=['一','二','三','四','五','六','七','八','九','十','十一','十二',]; window.onload=function(){ var tab=document.getElementById('tab'); var ul=tab.getElementsByTagName('ul')[0]; var li=ul.getElementsByTagName('li'); var div=tab.getElementsByTagName('div')[0]; var i=0; for(i=0;i<li.length;i++){ li[i].index=i; li[i].onmouseover=function(){ for(i=0;i<li.length;i++){ li[i].className=''; }; this.className='active'; div.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+neirong[this.index]'+'</p> }; }; }; </script>
HTML代码:
<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"> <h2>1月活动</h2> <p>快过年了,大家可以商量着去哪玩吧~</p> </div> </div>
相关文章推荐
- JS实现简易日历过程中遇到的问题和原因以及解决方式。
- js简易日历innerHtml
- 制作一个简易的相册用js
- 用JS制作简易的可切换的年历,类似于选项卡
- JS学习之一个简易的日历控件
- js-简易幻灯片制作
- 用js写的月简易日历
- 【动画】简易制作贝塞尔曲线动画(JS+css3+canvas)
- js制作日历,获取月份内有多少天。
- 制作 JS 广告的简易入门(二)利用 CSS3 技术制作广告
- 原生js结合html5制作小飞龙的简易跳球
- js制作日历
- 用JS制作简易选项卡
- 简易js网页实时时钟日历
- (19)-- 制作简易JS购物选项
- 制作JS广告的简易入门(一)
- 简易日历的制作
- 原生js制作日历控件实例分享
- 原生js结合html5制作简易的双色子游戏
- js:制作一个简易的计数器:根据输入的两个整数和运算符,进行计算,然后输出计算结果