js JavaScript 显示动态时钟时间转换日期当前时间

本文链接：https://blog.youkuaiyun.com/zhuoss/article/details/121085856

文章目录

输出效果
代码实现

输出效果

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>你好欢迎光临淘宝商城</h1>
    <img
      src="https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png"
      alt="淘宝商城"
    />
    <h1 id="display"></h1>
    <script>
      const display = document.getElementById('display')
      setInterval(function () {
        display.innerHTML = formatDateTime(new Date(), true)
      }, 1000)

      // -----------------------------------------------------------
      function formatDateTime(inputTime, twelveFlag) {
        var amFlag = true
        var date = new Date(inputTime)
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? '0' + m : m
        var d = date.getDate()
        d = d < 10 ? '0' + d : d
        var h = date.getHours()
        // 判断是上午还是下午
        if (h > 12 && twelveFlag) {
          h = h - 12
          amFlag = !amFlag
        }
        // 小于10的时间,进行格式拼接
        h = h < 10 ? '0' + h : h
        // 在时间的前面加上AM或者PM
        if (twelveFlag) {
          h = amFlag ? 'AM &nbsp;' + h : 'PM&nbsp;' + h
        }

        // 获取星期几
        var str = '星期' + '日一二三四五六'.charAt(date.getDay())
        var minute = date.getMinutes()
        var second = date.getSeconds()
        minute = minute < 10 ? '0' + minute : minute
        second = second < 10 ? '0' + second : second
        return (
          y +
          '-' +
          m +
          '-' +
          d +
          ' ' +
          h +
          ':' +
          minute +
          ':' +
          second +
          '&nbsp;' +
          str
        )
      }
    </script>
  </body>
</html>