[TOC]
# Date
在JavaScript中,`Date`对象用来表示日期和时间。
要获取系统当前时间,用:
~~~
var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份,注意月份范围是0~11,5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); //1435146562875, 获取时间戳,以number形式表示的时间戳,单位是毫秒
~~~
如果要创建一个指定日期和时间的`Date`对象,可以用:
~~~
var d = new Date(2015, 5, 19, 20, 15, 30, 123);
d; // Fri Jun 19 2015 20:15:30 GMT+0800 (CST)
~~~
你可能观察到了一个非常非常坑爹的地方,就是JavaScript的月份范围用整数表示是0~11,`0`表示一月,`1`表示二月……,所以要表示6月,我们传入的是`5`!这绝对是JavaScript的设计者当时脑抽了一下,但是现在要修复已经不可能了。
第二种创建一个指定日期和时间的方法是解析一个符合[ISO 8601](http://www.w3.org/TR/NOTE-datetime)格式的字符串:
~~~
var d = Date.parse('2015-06-24T19:49:22.875+08:00');
d; // 1435146562875
~~~
但它返回的不是`Date`对象,而是一个时间戳。不过有时间戳就可以很容易地把它转换为一个`Date`:
~~~
var d = new Date(1435146562875);
d; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
~~~
# 时区
`Date`对象表示的时间总是按浏览器所在时区显示的,不过我们既可以显示本地时间,也可以显示调整后的UTC时间:
~~~
var d = new Date(1435146562875);
d.toLocaleString(); // '2015/6/24 下午7:49:22',本地时间(北京时区+8:00),显示的字符串与操作系统设定的格式有关
d.toUTCString(); // 'Wed, 24 Jun 2015 11:49:22 GMT',UTC时间,与本地时间相差8小时
~~~
那么在JavaScript中如何进行时区转换呢?实际上,只要我们传递的是一个`number`类型的时间戳,我们就不用关心时区转换。任何浏览器都可以把一个时间戳正确转换为本地时间。
# 时间戳
时间戳是一个自增的整数,它表示从1970年1月1日零时整的GMT时区开始的那一刻,到现在的毫秒数。
> 假设浏览器所在电脑的时间是准确的,那么世界上无论哪个时区的电脑,它们此刻产生的时间戳数字都是一样的,所以,时间戳可以精确地表示一个时刻,并且与时区无关。
所以,我们只需要传递时间戳,或者把时间戳从数据库里读出来,再让JavaScript自动转换为当地时间就可以了。
# 时间格式化显示
> 软件开发过程中,存储时间一般记录自从1970年1月1日0点0分0秒开始至今的秒数(整数)。显示的时候需要把这个整数格式化为可读的方式显示。我们将这一功能编写为一个函数datetime,该函数将输入的毫秒为单位的时间转化为可读格式,因此如果数据库中存储的计量单位是秒,需要乘以1000转换为毫秒。
例如:2019-05-12 22:26:48,转换为时间戳(秒)1557671208
```
<html>
<head>
<script>
function datetime(date = new Date(), format) {
format = format || 'YYYY-MM-DD HH:mm:ss';
const fn = function (d) {
return ('0' + d).slice(-2);
};
const d = new Date(date);
const formats = {
YYYY: d.getFullYear(),
MM: fn(d.getMonth() + 1),
DD: fn(d.getDate()),
HH: fn(d.getHours()),
mm: fn(d.getMinutes()),
ss: fn(d.getSeconds())
};
return format.replace(/([a-z])\1+/ig, function (a) {
return formats[a] || a;
});
}
const date_str = datetime(1557671208000, 'YYYY-MM-DD HH:mm');
console.log(date_str)
</script>
</head>
<body>
</body>
</html>
```
控制台输出
```
2019-05-12 22:26
```
- 内容介绍
- EcmaScript基础
- 快速入门
- 常量与变量
- 字符串
- 函数的基本概念
- 条件判断
- 数组
- 循环
- while循环
- for循环
- 函数基础
- 对象
- 对象的方法
- 函数
- 变量作用域
- 箭头函数
- 闭包
- 高阶函数
- map/reduce
- filter
- sort
- Promise
- 基本对象
- Arguments 对象
- 剩余参数
- Map和Set
- Json基础
- RegExp
- Date
- async
- callback
- promise基础
- promise-api
- promise链
- async-await
- 项目实践
- 标签系统
- 远程API请求
- 面向对象编程
- 创建对象
- 原型继承
- 项目实践
- Classes
- 构造函数
- extends
- static
- 项目实践
- 模块
- import
- export
- 项目实践
- 第三方扩展库
- immutable
- Vue快速入门
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入门
- 模板语法
- 计算属性和侦听器
- Class 与 Style 绑定
- 条件渲染
- 列表渲染
- 事件处理
- 表单输入绑定
- 组件基础
- 组件注册
- Prop
- 自定义事件
- 插槽
- 混入
- 过滤器
- 项目实践
- 标签编辑
- 移动客户端开发
- uni-app基础
- 快速入门程序
- 单页程序
- 底部Tab导航
- Vue语法基础
- 模版语法
- 计算属性与侦听器
- Class与Style绑定
- 样式与布局
- Box模型
- Flex布局
- 内置指令
- 基本指令
- v-model与表单
- 条件渲染指令
- 列表渲染指令v-for
- 事件与自定义属性
- 生命周期
- 项目实践
- 学生实验
- 贝店商品列表
- 加载更多数据
- 详情页面
- 自定义组件
- 内置组件
- 表单组件
- 技术专题
- 状态管理vuex
- Flyio
- Mockjs
- SCSS
- 条件编译
- 常用功能实现
- 上拉加载更多数据
- 数据加载综合案例
- Teaset UI组件库
- Teaset设计
- Teaset使用基础
- ts-tag
- ts-badge
- ts-button
- ta-banner
- ts-list
- ts-icon
- ts-load-more
- ts-segmented-control
- 代码模版
- 项目实践
- 标签组件
- 失物招领客户端原型
- 发布页面
- 检索页面
- 详情页面
- 服务端开发技术
- 服务端开发环境配置
- Koajs快速入门
- 快速入门
- 常用Koa中间件介绍
- 文件上传
- RestfulApi
- 一个复杂的RESTful例子
- 使用Mockjs生成模拟数据
- Thinkjs快速入门
- MVC模式
- Thinkjs介绍
- 快速入门
- RESTful服务
- RBAC案例
- 关联模型
- 应用开发框架
- 服务端开发
- PC端管理界面开发
- 移动端开发
- 项目实践
- 失物招领项目
- 移动客户端UI设计
- 服务端设计
- 数据库设计
- Event(事件)
- 客户端设计
- 事件列表页面
- 发布页面
- 事件详情页面
- API设计
- image
- event
- 微信公众号开发
- ui设计规范