javaScript---js显示日期、星期、时间

最新推荐文章于 2022-08-06 10:34:38 发布

maidu_xbd

最新推荐文章于 2022-08-06 10:34:38 发布

阅读量2.1k

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/maidu_xbd/article/details/105042868

版权

JavaScript 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

实现效果：

获取星期：【new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" )[date.getDay()]】

时间显示优化（补“0”）：【date.getHours() < 10 ? "0" + date.getHours() : date.getHours()】

js动态添加html：【document.getElementById("week").innerHTML = this.day】

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>时间显示</title>
  </head>
  <body>
    <div class="time-wrapper">
      <div id="date"></div>
      <div id="week"></div>
      <div id="time"></div>
    </div>
    <script>
      //获取当前时间年月日时分秒星期
      function getNowFormatDate() {
        var date = new Date()
        this.year = date.getFullYear()
        this.month = date.getMonth() + 1
        this.date = date.getDate()
        this.day = new Array(
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六"
        )[date.getDay()]
        this.hour = addZero(date.getHours())
        this.minute = addZero(date.getMinutes())
        this.second = addZero(date.getSeconds())

        document.getElementById("date").innerHTML =
          this.year + "年" + this.month + "月" + this.date + "日"
        document.getElementById("week").innerHTML = this.day
        document.getElementById("time").innerHTML =
          this.hour + ":" + this.minute + ":" + this.second
      }
      //时间显示优化（补“0”）
      function addZero(fn) {
        return fn < 10 ? "0" + fn : fn
      }
      // 定时器，每1s执行1次getNowFormatDate
      setInterval(getNowFormatDate, 1000)
    </script>
    <style>
      .time-wrapper {
        width: 200px;
        height: 150px;
        border: 2px solid #0080c0;
        text-align: center;
        margin: 0 auto;
        line-height: 30px;
        color: #0080c0;
        font-weight: 600;
        padding-top: 40px;
        border-radius: 6px;
      }
    </style>
  </body>
</html>

maidu_xbd

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
javaScript---js显示日期、星期、时间

实现效果：获取星期：【newArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六")[date.getDay()]】时间显示优化（补“0”）：【date.getHours()<10?"0"+date.getHours():date.getHours()】js动态添加html：【document.getEl...
复制链接

扫一扫