银讯财经网

全部频道

您的当前位置：首页纯js简单日历实现代码_javascript技巧

纯js简单日历实现代码_javascript技巧

来源：银讯财经网


代码如下:







/* window.onload=function()
{
var oBtn=document.getElementById('btn1');
var oTxt=document.getElementById('txt1');
var oDiv=document.getElementById('div1');
oBtn.onclick=function()
{
oDiv.innerHTML=oTxt.value;
}

}*/
window.onload=function()
{
var aLi= document.getElementsByTagName('li');
var Otxt =document.getElementById('tab').getElementsByTagName('div')[0];
var aDats =['元旦1月1日','2月14日情人节','3月3日全国爱耳日',
'4月1日愚人节','5月1日国际劳动节','6月1日 国际儿童节',
'7月1日中国党诞生日','8月1日中国人民建军节','9月10日中国教师节',
'10月1日中华人民共和国国庆节','11月9日消防宣传日','12月3日世界残疾人日'
];

var i=0;
for(i=0;i{
aLi[i].index=i;
aLi[i].onmouseover =function() //添加鼠标指向事件
{

for(i=0;i{
aLi[i].className ='';
}
this.className ='active'; //给当前标签添加active 样式

Otxt.innerHTML ='

'+(this.index+1)+'

'+'月'+'

'+aDats[this.index]+'

';
}

}

};





  • 1

    JAN


  • 2

    FER


  • 3

    MAR


  • 4

    APR


  • 5

    MAY


  • 6

    JUM


  • 7

    JUL


  • 8

    AUG


  • 9

    SEP


  • 10

    OCT


  • 11

    NOV


  • 12

    DEC








    • 效果预览：

    显示全文