js做了一个简单日历的完整例子。

js做了一个简单日历的完整例子。
本文介绍了用js制作一个简单日历的方法,供大家参考:

今天我学会了用js来实现日历的制作。通过对这个用法的回顾,它与标签的制作有点不同。新的对手,我希望我能坚持下去,那么你的JS大神。

使用的innerHTML

Now top.innerHTML= ......; the method can be written to the location of this ID HTML code.

例如,顶部.innerHTML = ;你可以在顶部的位置有一个按钮!

程序的实现:

1。类似的标签,底部只有一个div;

2。使用innerHTML

使用3。阵列

定义:ARR {、}

用途:ARR { 0 }

4。字符串连接

函数:连接两个字符串+

问题:连接()解决方案中的优先权

源代码:

Javascript:

复制代码代码如下所示:

窗口的指针()函数。

{

var arr = {

这将是新的一年,每个人都将一起放鞭炮!,

现在去上学,不开心!,

妇女节快乐!,

四月很平,

工作很光荣!,

儿童节快乐!,

七月很热!,

8月1日建军节!,

我又学到了!

};

无功odiv = document.getelementbyid('tab);

VaR OLI = odiv.getelementsbytagname(李的);

无功otxt = odiv.getelementsbytagname('div){ 0 };

var I=0;

对于(var i = 0;i < oli.length;i++)

{

OLI {我}。指数=我;

OLI {我} onmouseover =函数()。

{

对于(var i = 0;i < oli.length;i++)

{
OLI {我} classname = '';
}
这类名=活动;

OTxt。innerHTML =+(这个指数+ 1)+ ARR {这个指数} ++活动;

};
}
};
CSS:

复制代码代码如下所示:

*填充:0;边距:0;}
李{列表样式:无;}
体{背景:# f6f9fc;字体:Arial;}
日历:210px {宽度;

保证金:50px汽车0;

填料:10px 10px 20px 20px;

背景:# eae9e9;}
日历:210px UL {宽度;

溢出:隐藏;

座垫:10px;}
日历左:左;

宽度:58px;

身高:54px;

保证金:10px 10px 00;

边境:1px solid # FFF;

背景:# 424242;

颜色:# FFF;

文本对齐:中心;

游标;指针;}
。日历里H2 {字体大小:20px;填料顶部:5px;}
。日历里P {字体大小:14px;}
。calendar.active { border: 1px solid # 424242;

背景:# FFF;

颜色:# e84a7e;}
calendar.active H2 { }。
。calendar.active p { font-weight: bold;}
calendar.text {宽度:178px;

填充物:0 10px 10px;

边境:1px solid # FFF;

10px垫上;

背景:# f1f1f1;

颜色:# 555;}
。calendar.text H2 {字体大小:14px;margin-bottom: 10px;}
。calendar.text p {字体大小:12px;线高度:18px;}
HTML:

复制代码代码如下所示:
1一个月

2月2日

3月3日

4月4日

5月5日

6 June

7月7日

8月8日

9月9日

10月10日

11月11日

12月12日


结果如下:
希望本文能对大家的javascript程序设计有所帮助。

tag:例子日历完整简单电脑软件

相关内容