IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript- Date日期对象的使用(附操作实例) -> 正文阅读

[JavaScript知识库]JavaScript- Date日期对象的使用(附操作实例)

参考:Date - JavaScript | MDN(一种查找手册,网页版)

用处:创建Date实例是用来处理日期和时间;

一,初识Date

Date对象:是基于1970年1月1日(世界标准时间)起的毫秒数,Date对象是一个构造函数,需要实例化后才能使用。

Note:创建一个新Date对象的唯一方法是通过new 操作符,例如:var now = new Date(); 若将它作为常规函数调用(即不加 new 操作符),将返回一个字符串,而非 Date 对象。

1.使用Date(),没有参数,返回系统的当前时间。

var date = new Date();

console.log(date);

运行结果:Wed Nov 24 2021 23:48:16 GMT+0800 (中国标准时间)

2.Date()构造函数,如果括号里有时间作为参数,那就返回括号里的时间。

这里的时间表示又有俩种表示方式,分别是数字型:例如2021,11,24,字符串型:例如'2021-11-24';

通过代码来看看有啥不同:

var date1 = new Date('2021-11-24');//参数为字符串型

var date2 = new Date(2021, 11, 24);//参数为数字型

console.log(date1);

console.log(date2);

// Wed Nov 24 2021 08:00:00 GMT+0800 (中国标准时间)显示时间正常

// Fri Dec 24 2021 00:00:00 GMT+0800 (中国标准时间) 使用数字型的时候出现了问题,多加了一个月

Wed Nov 24 2021 08:00:00 GMT+0800 (中国标准时间)显示时间正常

?Fri Dec 24 2021 00:00:00 GMT+0800 (中国标准时间) 使用数字型的时候出现了问题,多加了一个月

目前还不知道具体原理,知道的就是参数用字符串较为稳妥。

二,日期格式化

提问:想得到2019-8-8 8:8:8的格式,怎么做呢?

note:需要获取日期的指定部分,需要我们手动得到这种形式。

下面列举出得到日期指定部分的方法:

方法名? ? 说明代码
getFullYear()获取当年?dobj.getFullYear()
getMonth()获取当月(0-11)dobj.getMonth()
getDate()获取当天日期?dobj.getDate()
getDay()获取星期几(周日0到周六6)dobj.getDay()
getHours()获取当前小时? ?dobj.getHours()
getMinutes()获取当前分钟? ?dobj.getMinutes()
getSeconds()获取当前秒??dobj.getSeconds()

我们以 getFullYear() 为例, getFullYear()返回的值是绝对数。 对于1000到9999之间的日期,getFullYear()返回一个四位数字,如1995。使用此函数确保在2000年后兼容。

console.log(date.getDate());//返回的是几号

console.log(date.getDay());//返回值使一个数字,周一返回的是1,周六:6,周日为0

牛刀小试:

1.下面我们写个简单案例实践一下 ,中国人更喜欢的是××××年××月××日星期×这样的时间表示方法,这种形式如何用代码实现呢?

以2021年11月24日星期三为例

下面是代码实现

 var date=new Date();
 var year=date.getFullYear();
 var month=date.getMonth();
 var dates=date.getDate(); 
 var day=date.getDay();
//这里我们得到的是一个阿拉伯数字,表示不方便,所以用数组来存储星期的信息,把返回值作为下标
 var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
 console.log('今天是'+year+'年'+month+'月'+dates+'天'+arr[day]);

2.如何得到时分秒呢?

和上面一样的方法,但代码要多敲才溜,所以我们再写一下。

 //格式化日期,时分秒 
 var date=new Date(); 
 console.log(date.getHours());//时
 console.log(date.getMinutes());//分 
 console.log(date.getSeconds());//秒

3.下面用一个实例来加深记忆 //要求封装一个函数来返回当前的时分秒,要求形式为类似于 08:08:08(小于10的时候十位要补0)

function getTimer()
{ 
  var time=new Date();
  var h=time.getHours();
  var m=time.getMinutes();
  var s=time.getSeconds(); //为了达到上面提及的效果,用三元表达式来改变形式
  h=h<10?'0'+h:h;
  m=m<10?'0'+m:m;
  s=s<10?'0'+s:s; 
  return h+':'+m+':'+s; } 
  console.log(getTimer());//这里再提一下,加深记忆,函数只有被调用才会执行。

三.获取Date总的毫秒数

Date总的毫秒数又名??????时间戳,因为一个时间对应的毫秒数是确定的,就像刻在那里一样,即基于1970年1月1日的毫秒数(我们经常利用总的毫秒数来计算时间,因为更加精确)


方法一:通过valueOf()或getTime()函数。

var date=new Date();

console.log(date.valueOf());//得到结果:1637813705392

console.log(date.getTime());//得到结果:1637813705392

方法二:简单方法(最常用的方法)

var date1=+new Date();//+new Date()返回的就是总的毫秒数

console.log(date1);

方法三:H5(HTML5)新增的方法

?console.log(Date.now());

下面用一个综合实践案例来巩固所学知识。

BOSS:倒计时案例

案例说明:输入一个截止时间,然后编写程序得出当前时间距离截止时间还剩多长时间 例如 还剩 00天00时00分01秒(输出格式)

1,核心算法:输入时间减去现在时间就是剩余时间,即倒计时,但是不能拿着时分秒直接相减,会出错,例如05分减去25分结果是负数。

2,所以我们使用时间戳(总的毫秒数)来做,用输入时间总的毫秒数减去现在时间的毫秒数,得到剩余时间的总毫秒数,再除以1000,得到剩余总秒数。

3,再把剩余时间总的秒数转换为天,时,分,秒 转换公式如下:

d=parseInt(总秒数/60/60/24);//天数

h=parseInt(总秒数/60/60%24);//小时

m=parseInt(总秒数/60%60);//分钟

s=parseInt(总秒数%60);//秒

代码部分:

function countDown(time)
{
   var nowTime=+new Date();
   var inputTime=+new Date(time); 
   var times=(inputTime-nowTime)/1000; 
   var d=parseInt(times/60/60/24);//天数 
   d=d<10?'0'+d:d; 
   var h=parseInt(times/60/60%24);//小时
   h=h<10?'0'+h:h; 
   var m=parseInt(times/60%60);//分钟
   m=m<10?'0'+m:m; 
  var s=parseInt(times%60);//秒 
  s=s<10?'0'+s:s;
  return d+'天'+h+'时'+m+'分'+s+'秒';
 } 
console.log(countDown('2021-11-25 23:00:00'));

得到结果:00天10时38分30秒

如有不恰当的地方,还望各位朋友指正(抱拳)

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-11-26 08:46:34  更:2021-11-26 08:46:56 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 5:47:30-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码