js制作简易年历完整实例

本文实例讲述了射流研究…制作简易年历的方法。分享给大家供大家参考。具体如下：

今天学习了一下用射流研究…来实现年历的制作，顺便复习了一下这的用法，跟选项卡的制作有点差别，新用到了innerHTML，希望自己坚持下去，各位射流研究…大神也多多指点。

innerHtml的用法

现在用顶部。innerHTMl='……'；的方法就可以向这个编号的位置写入超文本标记语言代码了。

例如top.innerHTML=就可以在顶端对应的位置出现一个按钮了！

程序实现思路：

1.类似选项卡，只是底部有一个差异

2.innerHTML的使用

3.数组的使用

定义：arr[0，1，2，3]

使用：arr[0]

4.字符串连接

作用：连接两个字符串" "

问题：连接中的优先级用()解决

实现源码：

JavaScript:

复制代码代码如下：脚本类型=' text/JavaScript '窗口。onload=function(){ var arr=['快过年了，大家一起去放鞭炮咯!', '马上上学了，不开心!', '妇女节快乐!', '很平淡的四月', '劳动光荣!', '儿童节快乐!', '好热的七月!', '八一建军节!', '又开学了哎!'];var oDiv=文档。getelementbyid(' tab ')；var OLi=Odiv。GetElementsBytagname(' Li ')；var oTxt=Odiv。GetElementsBytagname(' div ')[0]；var I=0；for(var I=0；长度；i ) { oLi[i].索引=我；奥利[一].onmouseover=function(){ for(var I=0；长度；i ) { oLi[i].class NAmE=} this . class NAmE=' active otxt。innerhtml=' H2 '(这。索引1)月活动/h2p ' arr[this。索引]'/p '；};} };/script

CSS:

复制代码代码如下：样式类型=' text/CSS ' * { padd : 0；保证金： 0；}李{列表式：无；} body { background : # f6f 9 fffont-family : arial；} .日历{ width : 210 pmargin : 50 px自动0;padding: 10px 10px 20px 20px背景技术： # EAE 9；} .日历ul { width: 210px飞越：隐藏；填充-底部： 10px} .日历li {左侧浮动：宽度： 58pxheight : 54 pxmargin : 10px 10px 0 0 border : 1px实心# fff背景： # 424242;color: # fff文本对齐：中心；光标：指针；} .日历李；衬垫-top : 5px；} .日历Li p { font-size : 14px} .日历。活动{ border: 1px固体# 424242;背景# fffcolor: # e84a7e}。日历。活动h2 { } .日历活动p { font-weight : bold；} .日历。文本{ width : 178 pxpadding : 0 10px 10pxborder : 1 px实心# fffpadding-top : 10px；背景# f1f1f1color: # 555}。日历。文本H2 { font-size : 14px；边距-底部： 10px} .日历文本p { font-size : 12px线高： 18px}/样式

HTML:

复制代码代码如下：正文div id=' tab ' class=' calendar ' ul Li class=' active ' h21/h2p一月/p/Li Li 22/h2p二月/p/Li Li 23/h2p三月/p/Li Li 24/h2p四月/p/Li Li 25/h2p五月/p/Li Li 26/h2p六月/p/Li Li 27/h2p七月/p/Li Li 28/h2p八月/p/Li Li 29/h2p九月/p/Li Li 210/h2p十月/p/Li Li 211/h2p十一月/p/Li Li 212/h2p十二月/p/Li/ul div class=' text '/div/div/body

效果图如下：

希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。