点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

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

来源：动视网责编：小采时间：2020-11-27 21:14:17

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

纯js简单日历实现代码_javascript技巧: 代码如下: body,ul,li,h2,p { margin:0px; padding:0xp; } #div1 { width:200px; height:200px; background:#ccc; } .calendar { width:240px; height:345px; background:#ccc; margin:aut

推荐度：

点击下载本文 文档为doc格式

导读纯js简单日历实现代码_javascript技巧: 代码如下: body,ul,li,h2,p { margin:0px; padding:0xp; } #div1 { width:200px; height:200px; background:#ccc; } .calendar { width:240px; height:345px; background:#ccc; margin:aut

代码如下:

/* 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

效果预览：

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

推荐度：

点击下载本文 文档为doc格式

标签：日历简单 js

热门焦点

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

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

'+(this.index+1)+'

1

2

3

4

5

6

7

8

9

10

11

12

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

最新推荐

猜你喜欢

热门推荐