• 翻页-时钟

    1. <html>
    2.  
    3. <head>
    4.   <style>
    5.     .seconds,
    6.     .hours,
    7.     .minutes {
    8.       position: relative;
    9.     }
    10.  
    11.     .base {
    12.       width: 130px;
    13.       height: 100px;
    14.       overflow: hidden;
    15.     }
    16.  
    17.     .text {
    18.       text-align: center;
    19.       font-size: 100px;
    20.       font-weight: 900;
    21.       color: #fff;
    22.     }
    23.  
    24.     .top {
    25.       line-height: 200px;
    26.       border-radius: 4px 4px 0 0;
    27.       background-color: #333;
    28.     }
    29.  
    30.     .bottom {
    31.       line-height: 0;
    32.       border-radius: 0 0 4px 4px;
    33.       background-color: #333;
    34.     }
    35.  
    36.     .flip {
    37.       position: absolute;
    38.       top: 0;
    39.       transform-origin: bottom;
    40.       border-radius: 4px 4px 0 0;
    41.       z-index: 1;
    42.     }
    43.  
    44.     .flip-face {
    45.       position: absolute;
    46.       z-index: 1;
    47.       background-color: #333;
    48.       line-height: 200px;
    49.     }
    50.  
    51.     .flip-back {
    52.       position: absolute;
    53.       background-color: #333;
    54.       line-height: 0;
    55.       transform: perspective(500px) rotateX(0deg) rotateY(-180deg) rotate(180deg);
    56.     }
    57.     .times{
    58.       width: 400px;
    59.       display: flex;
    60.       justify-content: space-between;
    61.  
    62.     }
    63.   </style>
    64. </head>
    65.  
    66. <body>
    67.   <div class="times">
    68.     <div class="hours" id="hours">
    69.       <div class="top base text" id="htop">0</div>
    70.       <div class="flip base" id="hflip">
    71.         <div class="flip-face base text" id="hflip-face">0</div>
    72.         <div class="flip-back base text" id="hflip-back">0</div>
    73.       </div>
    74.       <div class="bottom base text" id="hbottom">0</div>
    75.     </div>
    76.     <div class="minutes" id="minutes">
    77.       <div class="top base text" id="mtop">0</div>
    78.       <div class="flip base" id="mflip">
    79.         <div class="flip-face base text" id="mflip-face">0</div>
    80.         <div class="flip-back base text" id="mflip-back">0</div>
    81.       </div>
    82.       <div class="bottom base text" id="mbottom">0</div>
    83.     </div>
    84.     <div class="seconds" id="seconds">
    85.       <div class="top base text" id="top">0</div>
    86.       <div class="flip base" id="flip">
    87.         <div class="flip-face base text" id="flip-face">0</div>
    88.         <div class="flip-back base text" id="flip-back">0</div>
    89.       </div>
    90.       <div class="bottom base text" id="bottom">0</div>
    91.     </div>
    92.   </div>
    93.  
    94.   <script>
    95.     //seconds
    96.     const seconds = document.querySelector('#seconds')
    97.     const Top = seconds.querySelector('#top')
    98.     const flip = seconds.querySelector('#flip')
    99.     const flipFace = flip.querySelector('#flip-face')
    100.     const flipBack = flip.querySelector('#flip-back')
    101.     const bottom = seconds.querySelector('#bottom')
    102.     let timer = null, stimer = null, mtimer = null, htimer = null
    103.     //minutes
    104.     const minutes = document.querySelector('#minutes')
    105.     const mTop = minutes.querySelector('#mtop')
    106.     const mflip = minutes.querySelector('#mflip')
    107.     const mflipFace = mflip.querySelector('#mflip-face')
    108.     const mflipBack = mflip.querySelector('#mflip-back')
    109.     const mbottom = minutes.querySelector('#mbottom')
    110.     //hours
    111.     const hours = document.querySelector('#hours')
    112.     const hTop = hours.querySelector('#htop')
    113.     const hflip = hours.querySelector('#hflip')
    114.     const hflipFace = hflip.querySelector('#hflip-face')
    115.     const hflipBack = hflip.querySelector('#hflip-back')
    116.     const hbottom = hours.querySelector('#hbottom')
    117.  
    118.     const oneCycle = (time, timer) => {
    119.       const seconds = time.seconds
    120.       const minutes = time.minutes
    121.       const hours = time.hours
    122.  
    123.       let frame = 0
    124.       let mframe = 0
    125.       let hframe = 0
    126.       //init
    127.       flipFace.style.zIndex = 1
    128.       flipBack.style.zIndex = 0
    129.       flip.style.transform = 'perspective(500px) rotateX(0deg)'
    130.       flipFace.innerHTML = seconds
    131.       bottom.innerHTML = seconds
    132.  
    133.       mflipFace.innerHTML = minutes
    134.       mbottom.innerHTML = minutes
    135.  
    136.       hflipFace.innerHTML = hours
    137.       hbottom.innerHTML = hours
    138.  
    139.       if (minutes === 59 && seconds === 59) {
    140.         htimer = setInterval(() => {
    141.           hframe++
    142.           if (hframe > 50) {
    143.             clearInterval(htimer)
    144.             return
    145.           }
    146.           if (hframe === 1) {
    147.             hTop.innerHTML = (hours + 1) === 24 ? 0 : (hours + 1)
    148.             hflipBack.innerHTML = (hours + 1) === 24 ? 0 : (hours + 1)
    149.           }
    150.  
    151.           if (hframe <= 25) {
    152.             hflipFace.style.zIndex = 1
    153.             hflipBack.style.zIndex = 0
    154.           } else {
    155.             hflipFace.style.zIndex = 0
    156.             hflipBack.style.zIndex = 1
    157.           }
    158.  
    159.           hflip.style.transform = `perspective(500px) rotateX(-${180 * hframe / 50}deg)`
    160.         }, 20)
    161.       }
    162.  
    163.       if (seconds === 59) {
    164.         mtimer = setInterval(() => {
    165.           mframe++
    166.           if (mframe > 50) {
    167.             clearInterval(mtimer)
    168.             return
    169.           }
    170.           if (mframe === 1) {
    171.             mTop.innerHTML = (minutes + 1) === 60 ? 0 : (minutes + 1)
    172.             mflipBack.innerHTML = (minutes + 1) === 60 ? 0 : (minutes + 1)
    173.           }
    174.  
    175.           if (mframe <= 25) {
    176.             mflipFace.style.zIndex = 1
    177.             mflipBack.style.zIndex = 0
    178.           } else {
    179.             mflipFace.style.zIndex = 0
    180.             mflipBack.style.zIndex = 1
    181.           }
    182.  
    183.           mflip.style.transform = `perspective(500px) rotateX(-${180 * mframe / 50}deg)`
    184.         }, 20)
    185.       }
    186.  
    187.       timer = setInterval(() => {
    188.         frame++
    189.         if (frame > 50) {
    190.           clearInterval(timer)
    191.           return
    192.         }
    193.         if (frame === 1) {
    194.           Top.innerHTML = (seconds + 1) === 60 ? 0 : (seconds + 1)
    195.           flipBack.innerHTML = (seconds + 1) === 60 ? 0 : (seconds + 1)
    196.         }
    197.  
    198.         if (frame <= 25) {
    199.           flipFace.style.zIndex = 1
    200.           flipBack.style.zIndex = 0
    201.         } else {
    202.           flipFace.style.zIndex = 0
    203.           flipBack.style.zIndex = 1
    204.         }
    205.  
    206.         flip.style.transform = `perspective(500px) rotateX(-${180 * frame / 50}deg)`
    207.       }, 20)
    208.     }
    209.     const cycle = () => {
    210.       stimer = setInterval(() => {
    211.         const date = new Date()
    212.         const time = {
    213.           seconds: date.getSeconds(),
    214.           minutes: date.getMinutes(),
    215.           hours: date.getHours()
    216.         }
    217.         console.log('time is', time);
    218.         oneCycle(time, timer)
    219.       }, 1000)
    220.     }
    221.     cycle()
    222.  
    223.     document.onvisibilitychange = function () {
    224.       if (document.visibilityState === 'visible') {
    225.         cycle()
    226.       } else {
    227.         clearInterval(timer)
    228.         clearInterval(stimer)
    229.         clearInterval(mtimer)
    230.         clearInterval(htimer)
    231.       }
    232.     }
    233.   </script>
    234. </body>
    235.  
    236. </html>

  • 相关阅读:
    base64加密 ＞ json字符串 ＞ 中文转Unicode所遇问题
    Stable Diffusion部署教程，开启你的AI绘图之路
    【C++】：内存管理
    使用参数非参数和机器学习方法分析印度降雨变化，能给我国带来什么警示？
    python-(5-1)函数的形参、实参、返回值
    受了刺激，决定专升本
    数据结构——链表
    SpringBoot集成MyBatis-Plus
    Apifox和Eolink两个测试工具谁最实用？
    裸辞后吊打大厂面试官，四面拿到阿里offer后我还是选择了美团
  • 原文地址：https://blog.csdn.net/nishiweiyj/article/details/125615656