翻页-时钟

最新推荐文章于 2024-06-14 08:57:40 发布
七夜的许愿星yj
最新推荐文章于 2024-06-14 08:57:40 发布
阅读量224
点赞数
文章标签： css3
本文链接：https://blog.csdn.net/nishiweiyj/article/details/125615656
版权
<html>

<head>
  <style>
    .seconds,
    .hours,
    .minutes {
      position: relative;
    }

    .base {
      width: 130px;
      height: 100px;
      overflow: hidden;
    }

    .text {
      text-align: center;
      font-size: 100px;
      font-weight: 900;
      color: #fff;
    }

    .top {
      line-height: 200px;
      border-radius: 4px 4px 0 0;
      background-color: #333;
    }

    .bottom {
      line-height: 0;
      border-radius: 0 0 4px 4px;
      background-color: #333;
    }

    .flip {
      position: absolute;
      top: 0;
      transform-origin: bottom;
      border-radius: 4px 4px 0 0;
      z-index: 1;
    }

    .flip-face {
      position: absolute;
      z-index: 1;
      background-color: #333;
      line-height: 200px;
    }

    .flip-back {
      position: absolute;
      background-color: #333;
      line-height: 0;
      transform: perspective(500px) rotateX(0deg) rotateY(-180deg) rotate(180deg);
    }
    .times{
      width: 400px;
      display: flex;
      justify-content: space-between;

    }
  </style>
</head>

<body>
  <div class="times">
    <div class="hours" id="hours">
      <div class="top base text" id="htop">0</div>
      <div class="flip base" id="hflip">
        <div class="flip-face base text" id="hflip-face">0</div>
        <div class="flip-back base text" id="hflip-back">0</div>
      </div>
      <div class="bottom base text" id="hbottom">0</div>
    </div>
    <div class="minutes" id="minutes">
      <div class="top base text" id="mtop">0</div>
      <div class="flip base" id="mflip">
        <div class="flip-face base text" id="mflip-face">0</div>
        <div class="flip-back base text" id="mflip-back">0</div>
      </div>
      <div class="bottom base text" id="mbottom">0</div>
    </div>
    <div class="seconds" id="seconds">
      <div class="top base text" id="top">0</div>
      <div class="flip base" id="flip">
        <div class="flip-face base text" id="flip-face">0</div>
        <div class="flip-back base text" id="flip-back">0</div>
      </div>
      <div class="bottom base text" id="bottom">0</div>
    </div>
  </div>

  <script>
    //seconds
    const seconds = document.querySelector('#seconds')
    const Top = seconds.querySelector('#top')
    const flip = seconds.querySelector('#flip')
    const flipFace = flip.querySelector('#flip-face')
    const flipBack = flip.querySelector('#flip-back')
    const bottom = seconds.querySelector('#bottom')
    let timer = null, stimer = null, mtimer = null, htimer = null
    //minutes
    const minutes = document.querySelector('#minutes')
    const mTop = minutes.querySelector('#mtop')
    const mflip = minutes.querySelector('#mflip')
    const mflipFace = mflip.querySelector('#mflip-face')
    const mflipBack = mflip.querySelector('#mflip-back')
    const mbottom = minutes.querySelector('#mbottom')
    //hours
    const hours = document.querySelector('#hours')
    const hTop = hours.querySelector('#htop')
    const hflip = hours.querySelector('#hflip')
    const hflipFace = hflip.querySelector('#hflip-face')
    const hflipBack = hflip.querySelector('#hflip-back')
    const hbottom = hours.querySelector('#hbottom')

    const oneCycle = (time, timer) => {
      const seconds = time.seconds
      const minutes = time.minutes
      const hours = time.hours

      let frame = 0
      let mframe = 0
      let hframe = 0
      //init
      flipFace.style.zIndex = 1
      flipBack.style.zIndex = 0
      flip.style.transform = 'perspective(500px) rotateX(0deg)'
      flipFace.innerHTML = seconds
      bottom.innerHTML = seconds

      mflipFace.innerHTML = minutes
      mbottom.innerHTML = minutes

      hflipFace.innerHTML = hours
      hbottom.innerHTML = hours

      if (minutes === 59 && seconds === 59) {
        htimer = setInterval(() => {
          hframe++
          if (hframe > 50) {
            clearInterval(htimer)
            return
          }
          if (hframe === 1) {
            hTop.innerHTML = (hours + 1) === 24 ? 0 : (hours + 1)
            hflipBack.innerHTML = (hours + 1) === 24 ? 0 : (hours + 1)
          }

          if (hframe <= 25) {
            hflipFace.style.zIndex = 1
            hflipBack.style.zIndex = 0
          } else {
            hflipFace.style.zIndex = 0
            hflipBack.style.zIndex = 1
          }

          hflip.style.transform = `perspective(500px) rotateX(-${180 * hframe / 50}deg)`
        }, 20)
      }

      if (seconds === 59) {
        mtimer = setInterval(() => {
          mframe++
          if (mframe > 50) {
            clearInterval(mtimer)
            return
          }
          if (mframe === 1) {
            mTop.innerHTML = (minutes + 1) === 60 ? 0 : (minutes + 1)
            mflipBack.innerHTML = (minutes + 1) === 60 ? 0 : (minutes + 1)
          }

          if (mframe <= 25) {
            mflipFace.style.zIndex = 1
            mflipBack.style.zIndex = 0
          } else {
            mflipFace.style.zIndex = 0
            mflipBack.style.zIndex = 1
          }

          mflip.style.transform = `perspective(500px) rotateX(-${180 * mframe / 50}deg)`
        }, 20)
      }

      timer = setInterval(() => {
        frame++
        if (frame > 50) {
          clearInterval(timer)
          return
        }
        if (frame === 1) {
          Top.innerHTML = (seconds + 1) === 60 ? 0 : (seconds + 1)
          flipBack.innerHTML = (seconds + 1) === 60 ? 0 : (seconds + 1)
        }

        if (frame <= 25) {
          flipFace.style.zIndex = 1
          flipBack.style.zIndex = 0
        } else {
          flipFace.style.zIndex = 0
          flipBack.style.zIndex = 1
        }

        flip.style.transform = `perspective(500px) rotateX(-${180 * frame / 50}deg)`
      }, 20)
    }
    const cycle = () => {
      stimer = setInterval(() => {
        const date = new Date()
        const time = {
          seconds: date.getSeconds(),
          minutes: date.getMinutes(),
          hours: date.getHours()
        }
        console.log('time is', time);
        oneCycle(time, timer)
      }, 1000)
    }
    cycle()

    document.onvisibilitychange = function () {
      if (document.visibilityState === 'visible') {
        cycle()
      } else {
        clearInterval(timer)
        clearInterval(stimer)
        clearInterval(mtimer)
        clearInterval(htimer)
      }
    }
  </script>
</body>

</html>