javaScript---js顯示日期、星期、時間

實現效果:

獲取星期:【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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章