Javascript：日期对象的常用方法

听海边涛声

于 2024-06-25 10:37:21 发布

阅读量200

点赞数 10

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/panghuangang/article/details/139945485

版权

getFullYear()：获得年份，是四位年份
getMonth()：获得月份，取值为0~11
getDate()：获得月份中的哪一天
getDay()：获得星期几，取值为0~6
getHours()：获得小时，取值为0~23
getMinutes()：获得分钟，取值为0~59
getSeconds()：获得秒，取值为0~59
toLocaleString()：返回该日期对象的字符串，该字符串格式因不同语言而不同，例如2024/6/25 上午10:19:47
toLocaleDateString()：方法返回指定日期对象日期部分的字符串，该字符串格式因不同语言而不同，例如2024/6/25
toLocaleTimeString()：返回该日期对象时间部分的字符串，该字符串格式因语言而异，例如上午10:29:04

示例：获得年份

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 获得日期对象
    const date = new Date()
    // 使用里面的方法
    console.log(date.getFullYear())
  </script>
</body>

</html>

在这里插入图片描述

示例：获得月份

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 获得日期对象
    const date = new Date()
    console.log(date.getMonth() + 1)
  </script>
</body>

</html>

在这里插入图片描述

示例：获得月份中的哪一天

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 获得日期对象
    const date = new Date()
    console.log(date.getDate())
  </script>
</body>

</html>

在这里插入图片描述

示例：获得星期几

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 获得日期对象
    const date = new Date()
    console.log(date.getDay())
  </script>
</body>

</html>

在这里插入图片描述

示例：在界面上实时显示当前的时间

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 40px;
      border: 1px solid pink;
      text-align: center;
      line-height: 40px;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    function getMyDate() {
      const date = new Date()
      let h = date.getHours()
      let m = date.getMinutes()
      let s = date.getSeconds()
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      return `今天是：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}号 ${h}:${m}:${s}`
    }

	// 防止页面刷新时空白（定时器是1秒钟执行一次），所以此处先显示
 	div.innerHTML = getMyDate()
    setInterval(function () {
      div.innerHTML = getMyDate()
    }, 1000)
  </script>
</body>

</html>

在这里插入图片描述

示例：使用toLocaleString()方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 40px;
      border: 1px solid pink;
      text-align: center;
      line-height: 40px;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    // 得到日期对象
    const date = new Date()
    div.innerHTML = date.toLocaleString()
  </script>
</body>

</html>

在这里插入图片描述

示例：使用toLocaleDateString()

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 40px;
      border: 1px solid pink;
      text-align: center;
      line-height: 40px;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    // 得到日期对象
    const date = new Date()
    // toLocaleDateString()返回的格式2024/6/25
    div.innerHTML = date.toLocaleDateString()
  </script>
</body>

</html>

在这里插入图片描述

示例：使用toLocaleTimeString()

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 40px;
      border: 1px solid pink;
      text-align: center;
      line-height: 40px;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    // 得到日期对象
    const date = new Date()
    div.innerHTML = date.toLocaleTimeString()
  </script>
</body>

</html>