本文實例講述了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：
代碼如下:<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>
CSS：
代碼如下:<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>
HTML：
代碼如下:<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>
效果圖如下：
希望本文所述對大家的javascript程序設計有所幫助。
- 上一頁:JS實現單行文字不間斷向上滾動的方法教程
- 下一頁:js分頁工具實例教程