From a6dca7d8d7c9bb876e3632d3d6b3ed34541df07f Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Mon, 4 Feb 2019 13:51:46 +0800 Subject: [PATCH] =?UTF-8?q?add:=E5=86=85=E7=BD=AE=E5=AF=B9=E8=B1=A1Date?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 03-JavaScript基础/17-数组的其他方法.md | 2 +- 03-JavaScript基础/18-内置对象：Date.md | 267 ++++++++++++++++++ .../{20-内置对象.md => 20-内置对象(其他).md} | 225 --------------- README.md | 6 +- 4 files changed, 271 insertions(+), 229 deletions(-) create mode 100644 03-JavaScript基础/18-内置对象：Date.md rename 03-JavaScript基础/{20-内置对象.md => 20-内置对象(其他).md} (64%) diff --git a/03-JavaScript基础/17-数组的其他方法.md b/03-JavaScript基础/17-数组的其他方法.md index af032c7..942afbe 100644 --- a/03-JavaScript基础/17-数组的其他方法.md +++ b/03-JavaScript基础/17-数组的其他方法.md @@ -366,7 +366,7 @@ array = Array.from(arrayLike) ## 我的公众号 -想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： diff --git a/03-JavaScript基础/18-内置对象：Date.md b/03-JavaScript基础/18-内置对象：Date.md new file mode 100644 index 0000000..ddc7360 --- /dev/null +++ b/03-JavaScript基础/18-内置对象：Date.md @@ -0,0 +1,267 @@ + +## 内置对象简介 + +内置对象就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用的或是最基本而必要的功能。 + +**JavaScript的内置对象**： + +| 内置对象 | 对象说明 | +|:-------------|:-------------| +| Arguments | 函数参数集合| +| Array | 数组| +| Boolean | 布尔对象| +| Date | 日期时间| +| Error | 异常对象| +| Function | 函数构造器| +| Math | 数学对象| +| Number | 数值对象| +| Object | 基础对象| +| RegExp | 正则表达式对象| +| String | 字符串对象| + +前面的几篇文章中，我们专门讲到了数组 Array。今天这篇文章，我们来讲一下其他的内置对象。 + +## 内置对象：Date + +### Date对象的创建 + +**写法一**：表示的是当前代码执行的时间 + +```javascript + var date1 = new Date(); + console.log(date1); +``` + +**写法二**：在参数中传递一个表示时间的字符串（兼容性最强） + +```javascript + var date2 = new Date("2017/09/06 09:00:00"); + console.log(date2); +``` + +写法三：（不常用） + +```javascript + var date3 = new Date('Wed Jan 27 2017 12:00:00 GMT+0800 (中国标准时间)'); + console.log(date3 ); +``` + +写法四：（不常用） + +```javascript + var date4 = new Date(2017, 1, 27); //写法四 + console.log(date4); +``` + +以上四种写法的打印结果是： + +![](http://img.smyhvae.com/20180202_1040.png) + +### 获取日期和时间 + +Date对象 有如下方法，可以获取日期和时间： + +- `getDate()` **获取日 1-31** + +- `getDay()` **获取星期 0-6**（0代表周日，1代表周一） + +- `getMonth() ` **获取月 0-11**（0代表一月） + +- `getFullYear() ` 获取年份 + +- `getHours() ` 获取小时 0-23 + +- `getMinutes() ` 获取分钟 0-59 + +- `getSeconds()` 获取秒 0-59 + +- `getMilliseconds()` 获取毫秒 （1s = 1000ms） + +代码举例： + +```javascript + // 我在执行这行代码时，当前时间为 2019年2月4日，周一，13:23:52 + var myDate = new Date(); + + console.log(myDate); // 打印结果：Mon Feb 04 2019 13:23:52 GMT+0800 (中国标准时间) + console.log(myDate.getDate()); // 打印结果：4 + console.log(myDate.getDay()); // 打印结果：1 + console.log(myDate.getMonth()); // 打印结果：1 + console.log(myDate.getFullYear()); // 打印结果：2019 + console.log(myDate.getHours()); // 打印结果：13 + console.log(myDate.getMinutes()); // 打印结果：23 + console.log(myDate.getSeconds()); // 打印结果：52 + console.log(myDate.getMilliseconds()); // 打印结果：393 + + console.log(myDate.getTime()); // 获取时间戳。打印结果：1549257832393 +``` + + +### getTime()：获取时间戳 + +Date对象 还有如下方法： + +- `getTime()` 获取当前日期对象的**时间戳**。 + +啥叫时间戳？接下来，我们解释一下。 + +**时间戳**：指的是从格林威治标准时间的`1970年1月1日，0时0分0秒`到当前日期所花费的毫秒数（1秒 = 1000毫秒）。 + +计算机底层在保存时间时，使用的都是时间戳。时间戳的存在，就是为了**统一**时间的单位。 + +我们再来看下面这样的代码： + +```javascript + var myDate = new Date("1970/01/01 0:0:0"); + + console.log(myDate.getTime()); // 获取时间戳 +``` + +打印结果（可能会让你感到惊讶） + +```javascript + -28800000 +``` + +为啥打印结果是`-28800000`，而不是`0`呢？这是因为，我们的当前代码，是在中文环境下运行的，与英文时间会存在**8个小时的时差**（中文时间比英文时间早了八个小时）。如果代码是在英文环境下运行，打印结果就是`0`。 + + +**利用时间戳检测代码的执行时间**： + +我们可以在业务代码的前面定义 `时间戳1`，在业务代码的后面定义 `时间戳2`。把这两个时间戳相减，就能得出业务代码的执行时间。 + + +## 练习 + +### 举例1：模拟日历 + +要求每天打开这个页面，都能定时显示当前的日期。 + +代码实现： + +```html + + + + + + + + +
+ + + + + + +``` + +实现效果： + +![](http://img.smyhvae.com/20180202_1110.png) + + +### 举例2：发布会倒计时 + +实现思路： + +设置一个定时器，每间隔1毫秒就自动刷新一次div的内容。 + +代码实现： + +```html + + + + + + + + +
+ + + + + +``` + +实现效果： + +![](http://img.smyhvae.com/20180202_1130.gif) + +## 我的公众号 + +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/2016040102.jpg) + diff --git a/03-JavaScript基础/20-内置对象.md b/03-JavaScript基础/20-内置对象(其他).md similarity index 64% rename from 03-JavaScript基础/20-内置对象.md rename to 03-JavaScript基础/20-内置对象(其他).md index 848d9bd..fd57a2e 100644 --- a/03-JavaScript基础/20-内置对象.md +++ b/03-JavaScript基础/20-内置对象(其他).md @@ -1,230 +1,5 @@ -## 内置对象 - -内置对象就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用的或是最基本而必要的功能。 - -**JavaScript的内置对象**： - - -| 内置对象 | 对象说明 | -|:-------------|:-------------| -| Arguments | 函数参数集合| -| Array | 数组| -| Boolean | 布尔对象| -| Date | 日期时间| -| Error | 异常对象| -| Function | 函数构造器| -| Math | 数学对象| -| Number | 数值对象| -| Object | 基础对象| -| RegExp | 正则表达式对象| -| String | 字符串对象| - - - -## 内置对象：Date - -### Date对象的声明 - -写法一： - -```javascript - var date1 = new Date(); - console.log(date1); -``` - -写法二：（兼容性最强） - -```javascript - var date2 = new Date("2017/09/06 09:00:00"); - console.log(date2); -``` - -写法三和写法四：（不常用） - -```javascript - var date3 = new Date('Wed Jan 27 2017 12:00:00 GMT+0800 (中国标准时间)'); //写法三 - - var date4 = new Date(2017, 1, 27); //写法四 -``` - -以上四种写法的打印结果是： - -![](http://img.smyhvae.com/20180202_1040.png) - -### Date对象的方法：获取日期和时间 - - -Date对象 有如下方法： - -- `getDate()` 获取日 1-31 - -- `getDay()` **获取星期 0-6**（0代表周日） - -- `getMonth() ` **获取月 0-11**（1月从0开始） - -- `getFullYear() ` 获取完整年份（浏览器都支持） - -- `getHours() ` 获取小时 0-23 - -- `getMinutes() ` 获取分钟 0-59 - -- `getSeconds()` 获取秒 0-59 - -- `getMilliseconds()` 获取毫秒 （1s = 1000ms） - -- `getTime ()` **返回累计毫秒数**(从1970/1/1午夜) - -为何累计毫秒数是从1970/1/1开始算起呢？ - -打印结果举例： - -![](http://img.smyhvae.com/20180202_1056.png) - -### 返回距离1970/01/01毫秒数 - -也就是返回：此刻时间 减去 1970/01/01 的毫秒数。 - -代码实现： - -```javascript - var date1 = Date.now(); - var date2 = +new Date(); - var date3 = new Date().getTime(); - var date4 = new Date().valueOf(); - -``` - -打印结果： - -![](http://img.smyhvae.com/20180202_1100.png) - - -### 举例：模拟日历 - -要求每天打开这个页面都能定时显示当前的日期。 - -代码实现： - -```html - - - - - - - - -
- - - - - - -``` - -实现效果： - -![](http://img.smyhvae.com/20180202_1110.png) - - -### 举例：发布会倒计时 - -实现思路： - -设置一个定时器，每间隔1毫秒就自动刷新一次div的内容。 - -代码实现： - -```html - - - - - - - - -
- - - - - -``` - - -实现效果： - -![](http://img.smyhvae.com/20180202_1130.gif) ## 内置对象String diff --git a/README.md b/README.md index a66a963..bda77ec 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ 维护这个项目的初衷，可以看这篇文章：[裸辞两个月，海投一个月，从Android转战Web前端的求职之路](https://zhuanlan.zhihu.com/p/55981212) -前端入门路线和推荐学习资源，可以看这篇文章：[2019年Web前端入门的自学路线](https://www.cnblogs.com/smyhvae/p/8776837.html) +前端入门路线和推荐学习资源，可以看这篇文章：[2019年Web前端入门的自学路线](https://www.cnblogs.com/qianguyihao/p/8776837.html) ### 项目指引 @@ -19,10 +19,10 @@ ### 学习交流 -我建了一个“前端学习”的微信交流群，目前看来，群里的学习氛围很不错。加我微信（bootmei），拉你进群： +我建了一个“前端学习”的微信交流群，目前看来，群里的学习氛围很不错。加我微信（bootmay），拉你进群： - 进群暗号：前端学习 -- 进群要求：热爱分享（长期潜水的，就不必了） +- 进群要求：热爱分享