clock
/
index.html

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>纹理时钟</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
  <style>
    body {
      background: #1f1c19;
      overflow: hidden;
      cursor: pointer;
    }
    .dot{
      color: #1f1c19;
    }

    #timer {
      text-align: center;
      font-size: 30vw;
      font-weight: bold;
      line-height: 56vh;
      color: #caccdf;
    }

    #date {
      margin-top: 32px;
      text-align: center;
      font-size: 18vw;
      font-weight: bold;
      color: #caccdf;
    }
  </style>
</head>

<body>
  <div id="date">00月00日</div>
  <div id="timer">06:12</div>

  <script>
    let showSymbl = true
    function clock() {
      let now = new Date()
      let hour = now.getHours() + ''
      let minute = now.getMinutes() + ''
      let year = now.getFullYear() + ''
      let month = (now.getMonth() + 1) + ''
      let day = now.getDate() + ''
      if (showSymbl) {
        document.getElementById('timer').innerHTML = `${hour.padStart(2, '0')}<span>:</span>${minute.padStart(2, '0')}`

      } else {
        document.getElementById('timer').innerHTML = `${hour.padStart(2, '0')}<span class="dot">:</span>${minute.padStart(2, '0')}`
      }
      document.getElementById('date').innerHTML = `${month.padStart(2, '0')}月${day.padStart(2, '0')}日`
      // document.getElementById('year').innerHTML = year
      // document.getElementById('date').innerHTML = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
      document.title = `${year}年纹理时钟`
      showSymbl = !showSymbl
    }
    clock()
    setInterval(() => {
      clock()
    }, 1000)

    document.body.addEventListener('click', function () {
      // alert('click')
      if (!document.fullscreenElement &&
        !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {  // current working methods
        if (document.documentElement.requestFullscreen) {
          document.documentElement.requestFullscreen();
        } else if (document.documentElement.msRequestFullscreen) {
          document.documentElement.msRequestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
          document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
      }
    })


  </script>
</body>

</html>