前端：运⽤js制作⼀个万年历程序
前端：运⽤js制作⼀个万年历程序
1.HTML代码
⾸先，依旧是⼀个套路，先写HTML代码，就好⽐如建⼀座楼先建地基和楼的结构⼀样。
外部这个class属性值为time的div标签是为了让整个内容处于居中地位。
cssclass属性
class属性值为head1的div标签是⽤于装两个下拉框，既然是万年历，肯定可以看到某年某⽉的⽇历啊！两个下拉框分别⽤于设置年和⽉(当然其中需要js动态⽣成)。
class属性值为head2的div标签⽤于显⽰星期，分别为1，2，3，4，5，6，7。
class属性值为footer的div标签也就是⽇历部分了，这是⽤js动态⽣成的。
class属性值为cur的div标签主要⽤于显⽰当前时间哈！这也需要⽤到js的哈！
2.CSS样式
关于css样式，⼩编就主要讲⼀讲这个class属性为time的div样式和关于⽇历部分的css样式设置！
为了是整个内容处于居中地位，需要设置⼀下这个width和height，例外需要设置⼀下margin属性，如下(⼩编根据需要设置的哈！)：
关于⽇历部分，这个部分是放在class属性值为footer的div标签内部的，⾥⾯放⼀些div标签，div内部的内容为某⽉的某号，为了使这些div标签能在⼀⾏显⽰7个(⼀周7天)，把这些div标签设置为左浮动，并且⼤⼩为宽48px。
为什么是48px呢？350/7=50，⽽边框设置为1px，也就是48+1+1=50，如果⼤于48，那么⼀⾏肯定会装不下7个，⼩于的话，除了与周⼏不匹配之外，界⾯效果也不怎的好啊！
样式设置如下：
3.JS代码
⼩编就讲⼀下那个点击年或者⽉的下拉框之后⽇历内容变化吧！
这主要涉及到js的onchange事件，也就是下拉框内容变化之后会触发的事件，主要涉及到如下这个函数。
其中第⼀个for循环，是产⽣⼏个空的div标签，⾥⾯没有任何内容，如果某⽉的1号是周⼀，那么这个循环0次，如果某⽉的1号是周⼀，那么这个for循环1次，依次类推。
第⼆个for循环，是⽤于产⽣⽇历的内容的。
4.运⾏结果和运⾏代码
代码中有⼀个导⼊css样式的代码，如下：
这个css⽂件是去除⼀些标签的默认样式。⽐如a标签默认有下划线，导⼊这个之后就不会有了。这个css⽂件可以在⽹上下载的哈！下载链接为：
所有代码已经上传到gitee上，有兴趣的读者可以⾃⾏下载，下载链接为：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。