本文实例讲述了js制作简易年历的方法。分享给大家供大家参考。具体如下:
今天学习了一下用js来实现年历的制作,顺便复习了一下this的用法,跟选项卡的制作有点差别,新用到了innerHTML,希望自己坚持下去,各位js大神也多多指点。
innerHtml的用法
现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了。
例如top.innerHTML="";就可以在top对应的位置出现一个button了!
程序实现思路:
1. 类似选项卡,只是底部有一个div;
2. innerHTML的使用
3.数组的使用
① 定义:arr[0,1,2,3]
② 使用:arr[0]
4.字符串连接
① 作用:连接两个字符串 “+”
② 问题:连接中的优先级 用()解决
实现源码:
JavaScript:
window.οnlοad=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[i].index=i;
oLi[i].οnmοuseοver=function ()
{
for(var i=0;i
{
oLi[i].className='';
}
this.className='active';
oTxt.innerHTML='
'+(this.index+1)+'月活动
'+arr[this.index]+'
';};
}
};
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; }
HTML:
1
一月
2
二月
3
三月
4
四月
5
五月
6
六月
7
七月
8
八月
9
九月
10
十月
11
十一月
12
十二月
效果图如下:
希望本文所述对大家的javascript程序设计有所帮助。