【JS】Date 对象用法

news/2024/7/19 14:03:13 标签: js, date, now

文章目录

    • Date 对象
    • Data 方法
      • getFullYear
      • getMonth
      • getDate
      • getHours
      • getMinutes
      • getSeconds
      • getDay
      • getTime
    • 时间差
      • 计算时间差
      • 获取时间差 now()

Date 对象

Date 是 js 的一个内置对象，该对象存储日期和时间，并提供了日期/时间的管理方法

  • new Date()在不传递参数的情况想是默认返回当前时间
js">var time = new Date();
console.log(time);
// 当前时间 Fri Mar 01 2019 13:11:23 GMT+0800 (中国标准时间)
  • new Date()在传入参数的时候，可以获取一个你传递进去的时间
js">var time = new Date('2019-03-03 13:11:11');
console.log(time);	
//Sun Mar 03 2019 13:11:11 GMT+0800 (中国标准时间)
  • new Date()传递的参数有多种情况
  1. 传递2个数字，第一个表示年，第二个表示月份
js">var time = new Date(2019, 00) // 月份从 0 开始计数，0 表示 1月，11 表示 12月
console.log(time) // Tue Jan 01 2019 00:00:00 GMT+0800 (中国标准时间)
  1. 传递3个数字，前两个不变，第三个表示该月份的第几天，从1到31
js">var time = new Date(2019, 00, 05) 
console.log(time) // Sat Jan 05 2019 00:00:00 GMT+0800 (中国标准时间)
  1. 传递4个数字，前三个不变，第四个表示当天几点，从 0 到 23
js">var time = new Date(2019, 00, 05, 22) 
console.log(time) // Sat Jan 05 2019 22:00:00 GMT+0800 (中国标准时间)
  1. 传递5 个数字，前四个不变，第五个表示的是该小时的多少分钟，从 0 到 59
js">var time = new Date(2019, 00, 05, 22, 33) 
console.log(time) // Sat Jan 05 2019 22:33:00 GMT+0800 (中国标准时
  1. 传递 6 个数字，前 五个不变，第六个表示该分钟的多少秒，从 0 到 59
js">var time = new Date(2019, 00, 05, 22, 33, 55) 
console.log(time) // Sat Jan 05 2019 22:33:55 GMT+0800 (中国标准时间)
  1. 传入字符串的形式
js">console.log(new Date('2019')) 
// Tue Jan 01 2019 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02')) 
// Fri Feb 01 2019 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03')) 
// Sun Feb 03 2019 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03 13:')) 
// Sun Feb 03 2019 13:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03 13:13:')) 
// Sun Feb 03 2019 13:13:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03 13:13:13')) 
// Sun Feb 03 2019 13:13:13 GMT+0800 (中国标准时间)

Data 方法

  • 比如我们得到的时间字符串是 Sun Feb 03 2019 13:13:13 GMT+0800 (中国标准时间)
  • 我指向得到这个日期中是那一年，我们就要靠截取字符串的形式得到
  • 但是现在 js 为我们提供了一系列的方法来得到里面的指定内容

getFullYear

  • getFullYear()方法是得到指定字符串中的哪一年
js">var time = new Date(2019,03,03,08,00,22);
console.log(time.getFullYear());	//2019

getMonth

  • getMonth()方法是得到指定字符串中哪一个月份
js">var time = new Date(2019, 03, 03, 08, 00, 22);
console.log(time.getMonth()); // 3
  1. 这里有一个要注意的地方
  2. 月份是从 0 开始数的
  3. 0 表示 1 月 ，1 表示 2 月，以此类推

getDate

  • getDate()方法得到指定字符串中的哪一天
js">var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getDate()) // 3

getHours

  • getHours()方法得到指定字符串中哪小时
js">var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getHours()) // 8

getMinutes

  • getMinutes()方法得到指定字符串的哪分钟
js">var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getMinutes()) // 0

getSeconds

  • getSeconds()方法得到指定字符串中的哪秒钟
js">var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getSeconds()) // 22

getDay

  • getDay()方法是得到指定字符串当前日期是一周中的第几天（周日是 0 ，周六是 6）
js">var time = new Date(2019, 03, 08, 08, 00, 22)
console.log(time.getDay()) // 1

getTime

  • getTime()方法得到执行时间到格林威治时间的毫秒数
js">var time = new Date(2019, 03, 08, 08, 00, 22)
console.log(time.getTime()) // 1554681622000

时间差

  • 是指获取两个时间点之间相差的时间
  • 在 js 中是不能用时间直接做 减法 的
  • 我们需要一些特殊的操作
  • 在编程的世界里面，有一个特殊的时间，是 1970年01月01日00时00分00秒
  • 这个时间我们叫做 格林威治时间
  • 所有的编程世界里面，这个时间都是一样的，而且 格林威治时间 的数字是 0
  • 从 格林威治时间 开始，每经过1毫秒，数字就会 + 1
  • 所以我们可以获取到任意一个时间节点到 格林威治时间 的毫秒数
  • 然后在用两个毫秒数相减，就能得到两个时间点之间相差的毫秒数
  • 我们在通过这个毫秒数得到准确的时间

计算时间差

  • 例如：我们现在计算一下 2019-01-01 00:00:00 到 2019-01-03 04:55:34 的时间差
  1. 先获取两个时间点到格林威治时间的毫秒数
js">var time1 = new Date('2019-01-01 00:00:00');
var time2 = new Date('2019-01-03 04:55:34');
time1 = time1.getTime();
time2 = time2.getTime();
console.log(time1);	// 1546272000000
console.log(time2);	// 1546462534000
  1. 两个时间相减，得到两个时间点之间相差的毫秒数
js">var differenceTime = time2 - time1;
console.log(differenceTime);	//190534000
  1. 把我们计算的毫秒数换算成时间
  • 先计算出有多少天
  • 以一天是1000 * 60 * 60 *24毫秒
  • 用总的毫秒数除以一天的毫秒数，就能得到多少天了
js">// 计算整的天数
var day = differenceTime /(1000*60*60*24)	;	//2.20525462962963
day = Math.floor(day);	//2
//因为得到的是有小数的天数，我们向下取整，得到有多少个整的天数
  • 使用differenceTime减去两天所包含的毫秒数，剩下的就是不够一天的毫秒数
  • 用不够一天的毫秒数计算出有多少个小时
  • 因为一个小时是24*60*60*1000毫秒
  • 用不够一天的毫秒数除以一小时的毫秒数，就能得到多少小时了
js">// 计算整的小时数
var afterHours = differenceTime-(100 * 60 * 60 * 24 * day);
var hours = afterHours / (60 * 60 *1000);
huors = Math.floor(huors);	//4
//和刚才一样的道理，我们需要向下取整
  • 同理，使用afterHours-4个小时包含的毫秒数，剩下的就是不足一个小时的毫秒数
  • 用不够一个小时的毫秒数计算出有多少分钟
  • 因为一分钟是60 * 1000毫秒
  • 用不够一个小时的毫秒数除以一分钟的毫秒数就能得到多少分钟了
js">// 计算整分钟数
var afterMinutes = afterHours - (1000 * 60 * 60 * huors);
var minutes = afterMinutes / (1000 * 60);
minutes = Math.floor(minutes); // 55
  • 和之前一样的道理计算出秒
js">// 计算整秒数
var afterSeconds = afterMinutes - (1000 * 60 * minutes);
var seconds = afterSeconds / 1000;
seconds = Math.floor(seconds); // 34
  • 最后，同理减去整秒的数，剩下的就是毫秒数
js">// 计算毫秒数
var milliSeconds = afterSeconds - (1000 * seconds) // 0
  • 最后我们把结果输出一下就可以了
js">var time1 = new Date('2019-01-01 00:00:00');
var time2 = new Date('2019-01-03 04:55:34');
time1 = time1.getTime();	// 1546272000000
time2 = time2.getTime();	// 1546462534000
var differenceTime = time2 - time1;	//190534000

// 计算整的天数
var day = differenceTime /(1000*60*60*24)	;	//2.20525462962963
day = Math.floor(day);	//2
//因为得到的是有小数的天数，我们向下取整，得到有多少个整的天数

// 计算整的小时数
var afterHours = differenceTime-(100 * 60 * 60 * 24 * day);
var hours = afterHours / (60 * 60 *1000);
huors = Math.floor(huors);	//4
//和刚才一样的道理，我们需要向下取整

// 计算整分钟数
var afterMinutes = afterHours - (1000 * 60 * 60 * huors);
var minutes = afterMinutes / (1000 * 60);
minutes = Math.floor(minutes); // 55

// 计算毫秒数
var milliSeconds = afterSeconds - (1000 * seconds) // 0

document.write('2019-01-01 00:00:00 和 2019-01-03 04:55:34 之间相差')
document.write(day + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒' + milliSeconds + '毫秒')

now_252">获取时间差 now()

  • Date.now() ：返回自 1970 年 1 月 1 日 00:00:00 (UTC) 到当前时间的毫秒数
  • 它相当于 new Date().getTime()，但它不会创建中间的 Date 对象。
  • 因此它更快，而且不会对垃圾处理造成额外的压力。
js">// 从格兰威特时间到至今（循环开始前）的时间戳
let start = Date.now();
// 调用一个耗时间的循环
for (let i = 0; i < 100000; i++) {
  let doSomething = i * i * i;
}
// 从格兰威特时间到至今（循环结束后）的时间戳
let end = Date.now()

// 以毫秒计的运行时长
let elapsed = end - start;
  • 使用内建的创建方法
js">// 获取当前（循环开始前）的时间
let start = new Date();
// 调用一个耗时间的循环
for (let i = 0; i < 100000; i++) {
  let doSomething = i * i * i;
}
// 获取当前（循环结束后）的时间
let end = new Date()

// 以毫秒计的运行时长
let elapsed = end.getTime() - start.getTime();

http://www.niftyadmin.cn/n/509768.html

相关文章

SVG的形状元素

SVG的形状元素

SVG的形状元素 矩形 圆形 椭圆 线 折线 多边形 路径 矩形 <svg xmlns"http://www.w3.org/2000/svg" version"1.1"><rect x"50" y"20" rx"20" ry"20" width"150" height"150" sty…
阅读更多...
CSS_Column多列布局

CSS_Column多列布局

文章目录CSS3 多列浏览器兼容多列属性column-countcolumn-gapcolumn-rulecolumn-spancolumn-widthBGU解决方法CSS3 多列 CSS3 可以将文本内容设计成像报纸一样的多列布局 浏览器兼容 多列属性 column-count column-count&#xff1a;指定了需要分割的列数 div {-webkit-co…
阅读更多...
vue可调整大小和可拖动的组件---vue-draggable-resizable

vue可调整大小和可拖动的组件---vue-draggable-resizable

vue-draggable-resizable 用于可调整大小和可拖动元素的组件、并支持组件之间的冲突检测和组件对齐。 使用流程&#xff1a; 安装依赖&#xff1a; npm install --save vue-draggable-resizable 注册组件(在main.js中添加下列代码)&#xff1a; import Vue from vue import Vue…
阅读更多...
CSS3_多媒体查询

CSS3_多媒体查询

文章目录多媒体查询浏览器兼容多媒体查询语法多媒体查询简单实例多媒体类型webkit-overflow-scrolling多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想&#xff1a; 取代了查找设备的类型&#xff0c;CSS3 根据设置自适应显示。 媒体查询可用于检测很多事情&a…
阅读更多...
vue组件传值、通信

vue组件传值、通信

vue组件传值、通信 父组件--------》子组件 属性 // parent <HelloWorld msg"Welcome to Your Vue.js App"/>// child props: { msg: String } 引用refs // parent <HelloWorld ref"hw"/>修改子组件的值 this.$refs.hw.xx xxx 子组件chidren …
阅读更多...
CSS_浏览器兼容常见BUG

CSS_浏览器兼容常见BUG

一、概述 CSS Bug: CSS样式在各浏览器中解析不一致的情况&#xff0c;或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.CSS Hack: CSS中&#xff0c;Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法&#xff0c;因为它们都属于个人对CSS代码的非官方的修改&#…
阅读更多...
vue手写el-form组件

vue手写el-form组件

index.vue <template><div><s-form :model"model" :rules"rules" ref"loginForm"><s-form-item label"用户名" prop"username"><s-input v-model"model.username"></s-input>…
阅读更多...
【JS】正则表达式

【JS】正则表达式

文章目录正则创建正则表达式字面量创建构造函数创建正则表达式里面的符号元字符限定符边界符特殊符号标示符正则表达式的方法testexec字符串的方法searchmatchreplace正则 正则表达式&#xff0c;有名“规则表达式”由我们自己书写“规则”&#xff0c;专门用来检测字符串是否…
阅读更多...
最新文章

Copyright @ 2022~2023