当前位置:首页 > 日记 > 正文

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

相关文章

PS图象处理软件的设计创意风格2015

PS图象处理软件的设计创意风格2015

教程,创意,图象,处理软件,海报,本教程介绍2015旦使用PS图象处理软件设计的创意海报风格双朋友方法教程出来的很有创意,马上就要到圣诞节和元旦,我相信这个教程对大家会有帮助的,好的,在这里我们要学习。 本教程使用PS图象处理软件设计的2015年…

提高效率的必要性!对于矢量图PS图象

提高效率的必要性!对于矢量图PS图象

矢量图,提高效率,必要性,图象,处理软件,本文主要介绍了10个超实用的PS图象处理软件矢量图技术提高效率的设计师必要的。我希望你能继续寻找更好的生产方法和享受设计的过程! 大家都知道,PS图象处理软件是编辑位图的一个重要应用。事实上,PS图…

CDR绘制的黑色版iphone4手机教程

CDR绘制的黑色版iphone4手机教程

教程,绘制,色版,电脑软件,CDR,本教程介绍给朋友,用CDR绘制iphone4手机黑色版。从教程绘制iphone4手机还是很不错的,而且难度不是很大。建议像你这样的朋友和教程一起学习。 本教程教朋友用CDR画的iPhone4手机黑色版,手机地图的处理效果的教程…

jQuery通过加载获取文件内容并跳转

jQuery通过加载获取文件内容并跳转

锚点,加载,文件,跳转到,方式,本文演示了jQuery如何通过负载获取文件的内容,并跳转到锚点: 类似于帮助文档类型的页面已于昨天完成。左边的导航,和正确的显示的内容。原来,右边的内容显示区是通过iframe,但因为iframe自适应高度,有一种方法来改变…

复制谐波属性和清除谐波图的CDR软

复制谐波属性和清除谐波图的CDR软

属性,清除,谐波,电脑软件,CDR,下面的教程是向朋友介绍CDR软件,以复制和调和属性和消除和解方法。本教程是比较基础的,非常适合初学者学习。推荐朋友一起学习。 CorelDRAW软件教程 CorelDRAW软件 交互式协调工具的使用(协调工具) 画一个图形,…

PHP两种快速排序算法的一个实例

PHP两种快速排序算法的一个实例

快速排序算法,两种,实例,电脑软件,PHP,虽然PHP Web应用程序开发这样的,我们不是在排序的重要性的过分强调,因为PHP本身带来的(如排序)这样强大的排序功能,但在一些重要的场合,如一些高并发的情况下,我想影响的排序算法是不可忽视的。所以我们介绍…

用ps绘制半透明苹果标志

用ps绘制半透明苹果标志

绘制,半透明,标志,电脑软件,ps,本教程介绍了用PS.制作半透明苹果罗的方法,教程比较简单,制作过程也很详细。感兴趣的朋友,快学。 在本教程中学习PS的朋友如何用苹果画一个半透明的符号PS,渲染效果非常漂亮,课程难度一般,制作方法比较详细,非常适合…

AI做超级简单的logo教程

AI做超级简单的logo教程

教程,简单,电脑软件,AI,logo,本教程是介绍给朋友的,利用ai做了超简单的符号方法。本教程是比较基础的,非常适合初学者学习。主要的练习是AI的钢笔工具。建议过来,希望能帮助你。 这次我们将学习人工智能创建一个超简单的符号方法。本教程是初…

ps需要花一分钟时间快速制作马赛克

ps需要花一分钟时间快速制作马赛克

背景,快速,时间,电脑软件,ps,马赛克的背景现在很少,大多是多边形背景,但有,会有太多的技能,我们应该学习更多的技能来提高明年的工资。 马赛克的背景现在很少,大多是多边形背景,但有,会有太多的技能,我们应该学习更多的技能来提高明年的薪水。 1,新…

jQuery不使用插件和SWF来上传刷新

jQuery不使用插件和SWF来上传刷新

刷新,插件,上传,文件,电脑软件,文件上传是网站的一个常用功能,如附件或图片上传功能。有许多解决方案。今天我们介绍一种不用jQuery刷新的文件上传方式。 首先,我们在页面中添加一个表单来上传文件: 复制代码代码如下所示: enctype =多部…

烟花画逼真的立体金属球

烟花画逼真的立体金属球

逼真,烟花,电脑软件,本教程向您展示了使用烟花来绘制逼真的立体金属球。金属球画得很真实,教程也不难,只要你有一点耐心,你就可以做,好吧,推荐给你,希望对你有帮助。 本教程向您展示了使用烟花来绘制逼真的立体金属球。金属球的绘制是非常真实的…

奇幻风格的PS图象处理软件化妆品促

奇幻风格的PS图象处理软件化妆品促

促销,图象,处理软件,奇幻,海报,笔者提出了制作海报的一个很好的思路:第一,上网搜集一些好材料作为参考,然后选择材料,确定好的构思和构图,后期添加素材,修改细节,调整色彩等。 笔者提出了制作海报的一个很好的思路:第一,上网收集一些好的材料作为参…