重学JavaScript【Date介绍和用法】

简介: 重学JavaScript 篇的目的是回顾基础,方便学习框架和源码的时候可以快速定位知识点,查漏补缺,所有文章都同步在 公众号(道道里的前端栈) 和 github 上。

网络异常,图片无法展示
|

重学JavaScript 篇的目的是回顾基础,方便学习框架和源码的时候可以快速定位知识点,查漏补缺,所有文章都同步在 公众号(道道里的前端栈)github 上。


简介


Date 类型的创建参考了Java早起版本中的 java.util.Date,为此,Date 类型将日期保存为自协调世界时(UTC)时间 1970年1月1日0时 至今所经过的毫秒数,Date 类型可以精确表示 1970年1月1日之前及之后285616年的日期。


使用


Date 类型创建对象是通过 new 操作符来调用 Date 构造函数的:

let now = new Date();
// now: Wed Feb 10 2021 14:53:58 GMT+0800 (中国标准时间)

不传参的情况下,创建的对象将保存当前日期和时间,要创建特定的时间,必须传入其毫秒。

在下面的例子中,now 包括了很多用来解释当前某个时间的方法:

let now = new Date();
now.getDate(); // 返回一个月中的某一天 (1 ~ 31)
now.getDay(); // 返回一周中的某一天 (0 ~ 6)
now.getMonth(); // 返回月份 (0 ~ 11
now.getFullYear(); // 返回当前年份
now.getHours(); // 返回小时 (0 ~ 23)
now.getMinutes(); // 返回分钟 (0 ~ 59)
now.getSeconds(); // 返回秒数 (0 ~ 59)
now.getMilliseconds(); //返回毫秒数 (0 ~ 999);
now.getTime(); // 返回 1970 年 1 月 1 日至今的毫秒数
now.getUTCDate(); // 根据世界时从 now 对象返回月中的一天 (1 ~ 31)
now.getUTCDay(); // 根据世界时从 now 对象返回周中的一天 (0 ~ 6)
now.getUTCMonth(); // 根据世界时从 now 对象返回月份 (0 ~ 11)
now.getUTCFullYear(); // 根据世界时从 now 对象返回四位数的年份
now.getUTCHours(); // 根据世界时返回 now 对象的小时 (0 ~ 23)
now.getUTCMinutes(); // 根据世界时返回 now 对象的分钟 (0 ~ 59)
now.getUTCSeconds(); // 根据世界时返回 now 对象的秒钟 (0 ~ 59)
now.getUTCMilliseconds(); // 根据世界时返回 now 对象的毫秒(0 ~ 999)
now.Parse(); // 返回1970年1月1日午夜到指定日期(字符串)的毫秒数

除了获取一个时间,当然也可以设置一个时间:

now.setDate();  //设置月的某一天 (1 ~ 31)
now.setMonth(); //设置月份 (0 ~ 11)
now.setFullYear();  //设置年份(四位数字)
now.setHours(); //设置小时 (0 ~ 23)
now.setMinutes(); //设置分钟 (0 ~ 59)
now.setSeconds(); //设置秒钟 (0 ~ 59)
now.setMilliseconds();  //设置毫秒 (0 ~ 999)
now.setTime();  //以毫秒设置 now 对象
now.setUTCDate(); //根据世界时设置 now 对象中月份的一天 (1 ~ 31)
now.setUTCMonth();  //根据世界时设置 now 对象中的月份 (0 ~ 11)
now.setUTCFullYear(); //根据世界时设置 now 对象中的年份(四位数字)
now.setUTCHours();  //根据世界时设置 now 对象中的小时 (0 ~ 23)
now.setUTCMinutes();  //根据世界时设置 now 对象中的分钟 (0 ~ 59)
now.setUTCSeconds();  //根据世界时设置 now 对象中的秒钟 (0 ~ 59)
now.setUTCMilliseconds(); //根据世界时设置 now 对象中的毫秒 (0 ~ 999)

为了方便我们用常用的写法来表示日期,Date 类型也提供了一些方法可以直接使用:

now.toDateString(); // 显示日期中的周几、月、日、年
now.toTimeString(); // 显示日其中的时、分。秒和时区
now.toLocaleDateString(); // 人性化的显示日期中的年月日
now.toLocaleTimeString(); //人性化的显示日期中的时分秒


实例


两个日期是可以比较大小的:

let d1 = new Date(2019, 0, 1);
let d2 = new Date(2020, 0, 1);
d1 < d2 // true
d1 > d2 // false

下面我们手动实现一个日历组件,代码已上传至仓库:点击这里,效果图如下:

网络异常,图片无法展示
|

主要的逻辑有:

  1. 查到某月的天数
  2. 当前周几向前和向后空多少个
  3. 获取当前日期的上个月和下个月
  4. 获取当前日期的上个月末尾日期和下个月末尾日期
  5. 获取当前不包括上个月和下个月的所有日期
  6. 获取上周的周一和周日

以上逻辑放置在仓库的 calendar.js 中,屡清楚这些之后,把它们拼起来再加一点样式即可,细节可查看仓库代码。

目录
相关文章
|
1月前
|
JavaScript 前端开发
JavaScript Date(日期) 对象
JavaScript Date(日期) 对象
40 2
|
2月前
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
随着互联网的发展,网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具,可在Node.js环境中模拟用户行为,高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能,通过设置代理IP、User-Agent和Cookies等技术,实现复杂的Web Scraping任务,并提供示例代码,展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数,开发者可以有效规避目标网站的反爬机制,提升数据抓取效率。
215 4
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
1月前
|
JavaScript 前端开发
JS try catch用法:异常处理
【10月更文挑战第12天】try/catch` 是 JavaScript 中非常重要的一个特性,它可以帮助我们更好地处理程序中的异常情况,提高程序的可靠性和稳定性。
19 1
|
1月前
|
JavaScript 前端开发
js的math.max的用法
js的math.max的用法
37 6
|
1月前
|
JavaScript 前端开发
JavaScript Date
【10月更文挑战第06天】
59 18
|
1月前
|
JavaScript
JS中的splice的三种用法(删除,替换,插入)
JS中的splice的三种用法(删除,替换,插入)
178 4
|
2月前
|
数据采集 存储 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
在现代Web开发中,数据采集尤为重要,尤其在财经领域。本文以“东财股吧”为例,介绍如何使用Puppeteer结合代理IP技术进行高效的数据抓取。Puppeteer是一个强大的Node.js库,支持无头浏览器操作,适用于复杂的数据采集任务。通过设置代理IP、User-Agent及Cookies,可显著提升抓取成功率与效率,并以示例代码展示具体实现过程,为数据分析提供有力支持。
106 2
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
2月前
|
JavaScript 前端开发
JavaScript用法
JavaScript用法
|
1月前
|
前端开发 JavaScript 开发者
深入理解JavaScript中的Promise:用法与最佳实践
【10月更文挑战第8天】深入理解JavaScript中的Promise:用法与最佳实践
58 0
|
2月前
|
JavaScript 前端开发 索引
JavaScript 数组中splice()的用法
本文介绍了JavaScript数组方法splice()的三种用法:删除元素、插入元素和替换元素,通过具体代码示例展示了如何使用splice()方法进行数组的修改操作。
下一篇
无影云桌面