前端：运用js制作一个万年历程序
前端：运用js制作一个万年历程序
1.HTML代码
首先，依旧是一个套路，先写HTML代码，就好比如建一座楼先建地基和楼的结构一样。
- 外部这个class属性值为time的div标签是为了让整个内容处于居中地位。
- 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文件可以在网上下载的哈！下载链接为：去除标签默认样式的css代码
所有代码已经上传到gitee上，有兴趣的读者可以自行下载，下载链接为：万年历
前端：运用js制作一个万年历程序相关推荐
- 使用 Vue.js 制作一个简单的调查问卷平台
使用 Vue.js 制作一个简单的调查问卷平台 原文 https://github.com/pramper/Demos/tree/master/Vue-Demos/Questionnaire 主题 ...
- 使用 ale.js 制作一个小而美的表格编辑器（2）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
- 使用 ale.js 制作一个小而美的表格编辑器（3）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
- 用JS制作一个信息管理平台完整版
前 言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
- 使用 ale.js 制作一个小而美的表格编辑器（1）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
- 使用 ale.js 制作一个小而美的表格编辑器（4）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
- jsp循环输出表格_使用 ale.js 制作一个小而美的表格编辑器（1）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
- 用html和js制作一个控制灯泡开关效果
用html和js制作一个控制灯泡开关效果 **用css样式来控制div图片和文本的位置,然后用js里面onclick点击事件来控制图片的更换效果来实现当前运行图的效果** 1.以下是运行的效果图 2. ...
- 怎样自己制作一个小程序？新手必知流程！
随着市场需求的变化.不断成长的微信平台.随着周边小程序等功能的发布,商店公司开发小程序已经成为一种趋势.但是对于怎样自己制作一个小程序,很多卖家公司还是"新手",不明白应该使用什么 ...
- 教你用html+js制作一个自己的点名系统，实例代码分享
简介 教你用html+js制作一个自己的点名系统,实例代码如下. 效果 代码 HTML <div class="wrapper"><h1 align=" ...
最新文章
- 今天分享个用Python爬虫爬取Bilibili弹幕的小例子解析
- php检测http状态码,php回来HTTP状态码
- php使用imagemagick,PHP的ImageMagick使用；
- 多进程 fork()与vfork()
- php判断当前时间是否跨月,判断日期是否能跨月查询的js代码_javascript技巧
- php强制对齐,[强迫症福利] 使用 PHPStorm 对齐数组的键值对
- 我的Java自定义线程池执行器
- win10系统，在安装masm32的时候出现DELETE operation of EXE file has failed 解决方案
- ❤️六W字《计算机基础知识》（三）（建议收藏）❤️
- python虚函数_Python进阶话题杂谈（十三）纯虚函数与抽象基类
- SMS动态查询部署安装XPSP3补丁
- linux 文件句柄 sock,linux socket句柄
- 多图详解WBS任务分解法
- 阿里云文本内容审核服务入门~
- 必应缤纷桌面产品分析
- Eclipse笔记-关于Maven Pom Editor的一个小问题
- java旅游管理面试,旅游管理专业面试问题
- Android OpenCV 身份证识别实战
- VtigerCRM收件箱邮件打开失败JSLBL_Failed_To_Open_Email
- Cocos2d-x v3.6制作射箭游戏（二）