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程序设计有所帮助。