纯射流研究…简单日历实现代码

复制代码代码如下：文档类型html标题/title meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/style type=' text/CSS ' body，ul，li，h2，p { margin :0 pxpadding :0 XP } # div 1 { width :200 px高度：200 px背景# ccc}。日历{ width :240 pxh three :345 px背景# cccmargin:auto}。日历ul {列表式：无；宽度宽度：232px高度：260 pxmargin:0pxpadding:0px}。日历ul Li { width :45 pxh8 :65 px背景技术： # 333;float : leftisplay : inline左边距left :11 pxmargin-top :10 px；border:1px固体# ccc文本对齐：居中；颜色： # FFF；} .calendar ul Li :悬停{边框：1 px实心# 000；} .文本{ background : # f96 margin 336010 xpadding-bottom :10 px；高度：45px}。文本h2 { display:inline}。活动{ background:#FFF！重要；color:#C03！重要；}/style脚本类型=' text/JavaScript '/* window。onload=function(){ var OBtn=document。getelementbyid(' BTN 1 ')；var oTxt=文档。getelementbyid(' txt 1 ')；var oDiv=文档。getelementbyid(' div 1 ')；奥宾。onclick=function(){ odiv。innerhtml=otxt。价值；} } */窗口。onload=function(){ var AlI=document。getelementsbytagname(' Li ')；var Oxt=文档。GetElementByID(' tab ').getElementsByTagName(' div ')[0]；var aDats=['元旦一月一日','2月14日情人节','3月3日全国爱耳日', '4月一日愚人节','5月一日国际劳动节','6月一日国际儿童节', '7月一日中国共产党诞生日','8月一日中国人民解放军建军节','9月10日中国教师节', '10月一日中华人民共和国国庆节','11月9日消防宣传日','12月3日世界残疾人日' ];var I=0；for(I=0；iaLi.lengthI)//用于循环历遍里元素aLi[i].索引=我；aLi[i].onmouseover=function() //添加鼠标指向事件{ for(I=0；iaLi.lengthI)//用于循环历遍里元素去掉里样式aLi[i].class NAmE=} this . class NAmE=' active//给当前标签添加活跃的样式otxt。innerhtml=' H2 '(这。索引1)'/H2 ' '月“p”ADAts[这个。索引]"/p "；} } };/script/head body div id=' tab ' class=' calendar ' ul Li class=' active ' h21/h2pJAN/p/Li Li 22/h2p fer/p/Li Li 23/h2p mar/p/Li Li 24/h2pAPR/p/Li Li 25/h2p may/p/Li Li 26/h2pJUM/p/李丽丽27/h2pJUL/p/李丽丽28/h2pAUG/p/李丽丽Li 29/h2pSEP/p/李丽丽210/效果预览