整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

手撕代码-JavaScript实现年历

果图:

方案描述:

  1. 利用prompt()函数接收用户设置的年份。
  2. 编写calendar()函数,根据指定的年份生成年历。
  3. 设计并输出日历的显示样式。

开发工具:Hbuilder X(html + javasc)

代码(html文件):

ate类型元素

在HTML5中,新增了日期输入类型date,其含义为选择日、月、年。

date属性的代码格式如下。

<input type="date" name="user_date" />

(1)编辑代码

打开记事本,编写代码,在<body>标签中加入以下代码。并保存为HTML格式文件。


(2)在浏览器中浏览效果

在火狐浏览器中浏览效果如图所示,日期会显示英文年、月、日。


在360极速浏览器中浏览效果如图所示,日期会显示中文年、月、日。


用户单击输入框中向下按钮,即可在弹出的窗口中选择需要的日前。

火狐浏览器中浏览效果如下图。

360极速浏览器中浏览效果如下图。


time类型元素

在HTML5中,新增了时间输入类型time,其含义为选取时间(小时和分钟)。

time属性的代码格式如下。

<input type="time" name="user_date"/>

(1)编辑代码

打开记事本,编写代码,在<body>标签中加入以下代码。并保存为HTML格式文件。


(2)在浏览器中浏览效果

在浏览器中浏览效果如图所示,用户可以在表单中输入标准的time格式,然后单击【提交】按钮。

今每个人的事情都变的越来越多了,没有一个好的提醒工具,你会不会错过很多,比如:交房贷、追剧、看球等等,我们知道手机上的日历,时钟,都能提醒我们,可是作为程序员的我们,是不是也该尝试一下,弄一个日历处理?

首先明确,我们需要什么功能:通过日历来展示我们的待办事项?

如果从头写,是不是有点费时?这里,我们推荐一个jQuery插件:FullCalendar

我们先目的一下它的风采吧。

首先,FullCalendar最大的特点是,可以全日历上拖放的,比如:我5月19号添加的备忘,可以拖放到5月31号上。添加的备忘事件还可以跨好几天来拖放,真的很方便。

那么FullCalendar是什么?

严格的说,它是一个开源的,并可定制的JavaScript事件日历,支持全尺寸拖放。

这里有个比较重要的声明:它是一个很好的活动展示库,不是一个完整的事件管理解决方案,就是说不能修改活动事件的名称。你需要通过它的JS函数和配置等来设置。

那么如何获取它?

你可以通过github来搜索FullCalendar,它也有官网可以查看各种示例(当然也包括Google日历的Style)

那么它的兼容性如何?

它支持Firefox、Chrome、Safari、IE9+等所有现代浏览器。它依赖于jQuery 2.0.0+、Moment 2.9.0+(这是一个对日历和时间进行解析、验证、操作、显示的js库)

那么如何使用它呢?

通过上图的Head部分引用,Script,Html,就可以完成一个日历的展示了。

至此,这个开源的日历库就介绍完了,如果工作中有需要,它是个不错的选择。看文章累了吗?来张图片养养眼?(图片来源网络,如有侵权请告知。)

图片来自网络,如有侵权请告知,我们会尽快删除。谢谢。