Javascript 中 Date类的相关应用及案例

<=> 朋友你好，这里是小毅的前端日记， 分享代码日常 !
<=>本文目标：JavaScript的内置对象Date（）详解
<=>卑微的大三前端仔持续输出前端知识，欢迎批评指正 !
<=> 愿你永远青春激昂，风华永驻 ！

一、Date（）

Date( )简介，Date（）是Javascript中内置的一个对象，
所以我们可通过new关键字来实例化这个对象

哦对了，差点忘说，最近刷题的时候有小伙伴在问，有没有好用并且成体系的的刷题资源，
那今天就为大家推荐一款我正在用的、超nice的神器点击访问牛客网
里面的互联网大厂面试真题刷到手软，从基础到进阶，只有你想不到，没有他做不到，赶紧卷起来吧！助你成为offer收割机！

1.小试牛刀

我们先来显示一下系统当前时间，这里指的是本机电脑系统，如果修改本机系统时间，那么通过该函数显示的也会改变

 var nowTime = new Date();

但是这个时间会怪怪的，不像我们平时见到的那种，所以我们要把这个时间转换为我们可读的时间

 // 转换为具有本地语言环境的日期格式
 nowTime = nowTime.toLocaleString();

2.逐步深入

刚刚我们已经体验了一下时间的打印，但是现在我有一个需求，想要获取自己想要格式的日期，比如xx年xx月xx日，或者xx - xx – xx，那应该怎么办呢？

不知道你有没有发现，这些格式的日期只是后缀不一样啊，数字部分都是一样的，那么可不可以这样，我们把数字单独拿出来，然后自己添加格式，即把年月日单独拿出来自己组装，当然可以啦，Date( )对象给我们很多函数方法来供我们使用，比如获取年，获取月，获取日，还可以获取当天是星期几，你就说强大不强大吧。

首先我们实例化一个对象time

 var time = new Date();

其次分别获取年月日

  // 获取年
  var year = time.getFullYear();
  // 获取月,0~11，因此真正当前的还要加1
  var month = time.getMonth();
  // 获取日
  var day = time.getDate()

要注意的是，获取月的时候，系统默认的编号从0_{11，但我们实际生活中是1}12, 所以要符合我们的习惯的话，就在后面加上一个1

// 打印一下组装的时间格式
document.write(year + "年" + (month + 1) + "月" + day + "日")

    // 重点重点重点重点重点重点重点
​    // 获取毫秒数：从1970年1月1日00：00：00到现在系统时间的毫秒数

​    // 一般用毫秒数来做时间戳
​    *var* haoMiao = time.getTime();

​    document.write("我啊是毫秒数：" + haoMiao);

但是如果只这样的话，得到的是一个时间戳，

小科普：时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数。

  //补充：：：： 获取当前周是星期几，0~6
    var dayOfWeek = time.getDay()
    document.write("我啊是当前周的星期几："+dayOfWeek);
    document.write("<br>")
  // 获取当前分钟数
     var mintes = time.getMinutes();
     document.write("我啊是当前的分钟数：" + mintes);

还有更多函数方法在文末表格，这里就不展示太多了，先贴个图吧，更多见文末汇总。

3.实践案例一

判断当前时间是上午还是下午或中午

Javascript核心代码

 <script>
     window.onload = function () {
        var btnObj = document.getElementById("btn");
        btnObj.onclick = function () {
           // 定义一个对象
           var time = new Date();
           // 展示当前小时数，然后判断是上午还是下午
           var nowTime = time.getHours();
           var display = document.getElementById("div1");
           if (nowTime < 12) {
                  display.innerText = nowTime + "上午好";
              }
              else if (nowTime < 18) {
                  display.innerText = nowTime + "下午好";
              }
               else {
                  display.innerText = nowTime + "晚上好";
              }
            }
        }
    </script>

CSS样式和HTML骨架代码

    <style>
        #div1 {
            width: 200px;
            height: 100px;
            border: 1px solid red;

        }
    </style> 
	<input type="button" value="根据当前时间展示问候语" id="btn">
    <div id="div1"></div>

效果展示：

当我点击按钮《根据当前时间展示问候语》时，在红色框框里面就会出现当前的小时，我本机目前时下午15：03

4.实践案例二

在网页中显示当前时间，并且可以看到时间逐步增加，1秒1秒的增加

Javascript核心代码

window.onload = function () {
    // 定义时间函数，用来获取当前时间
    var showTime = function () {
    // 获取当前时间
    var time = new Date();
    // 把当前时间转换成本地语言环境支持的日期格式
    time = time.toLocaleString();
    // 把时间显示在一个div标签里面
    var timeDivObj = document.getElementById("timeDiv");
    timeDivObj.innerText = time;
   }
    // 每隔一秒调用以下函数
    document.getElementById("btn").onclick = function () {
    // 1000ms=1s 走一次
    returnValue = window.setInterval(showTime, 1000)
    // 上面的returnValue不用关键字var定义,  是因为想让returnValue成为全局变量,方便停止函数取得这个返回值
  }

   // 停止增加时间
   document.getElementById("stop").onclick = function () {
     window.clearInterval(returnValue);
   }
 }
  </script>

CSS样式和HTML骨架代码

  <style>
    div {
      width: 300px;
      height: 100px;
      border: 1px solid red;
    }
  </style>
<div id="timeDiv">时间会显示在这个框里面</div>
  <input type="button" id="btn" value="显示时间">
  <input type="button" id="stop" value="停止增加时间">

效果展示：

二、结尾

​ 今天的分享到这里就结束了，如果觉得有收获，左下角有个大拇指哦，关于本文有什么好滴建议也可以分享到评论区哦，博主才疏学浅，还请各位读者老爷们批评指正
内置对象的更多方法如下，需要自取自取

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getYear()	请使用 getFullYear() 方法代替。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setYear()	请使用 setFullYear() 方法代替。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	以毫秒设置 Date 对象。
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds()(_setUTCSeconds.html)	根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource()	返回该对象的源代码。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toDateString(	把 Date 对象的日期部分转换为字符串。
toGMTString()	请使用 toUTCString() 方法代替。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。