js+css实现翻页时钟效果

一滴泪

已于 2023-01-05 09:29:02 修改

阅读量1.4k

点赞数 4

文章标签： css html 前端 Powered by 金山文档

于 2023-01-05 09:27:04 首次发布

本文链接：https://blog.csdn.net/m0_56938501/article/details/128557648

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  *{
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  .show {
    width: 800px;
    height: 300px;
    margin: 100px auto;
    position: relative;
    background-color: black;
    color: #fff;
  }
  .time {
    display: flex;
    flex: 1;
    font-size: 160px;
    text-align: center;
    line-height: 300px;
    padding: 0 20px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .beforeTime {
    z-index: 100;
  }
  .time li:nth-child(2n) {
    flex: 1;
  }
  .time li:nth-child(2n+1) {
    flex: 4;
    background-color: #3b3d3b;
    position: relative;
    height: 200px;
    line-height: 200px;
    margin: auto 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px 3px white;
  }
  .time li:nth-child(2n+1) .upBox,
  .time li:nth-child(2n+1) .downBox {
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
  }
  .time li:nth-child(2n+1) .upBox {
    top: 0;
    bottom: 50%;
    box-sizing: border-box;
    border-bottom: solid 3px #3b3d3b;
    background-color: #3b3d3b;
    transform-origin: bottom;
  }
  .time li:nth-child(2n+1) .downBox {
    top: 50%;
    bottom: 0;
    line-height: 0;
    box-sizing: border-box;
    background-color: #3b3d3b;
    overflow: hidden;
    transform-origin: top;
  }
  .change{
    border-bottom: 2px solid white;
  }
  </style>
</head>
<body>
  <div class="show">
    <ul class="time">
      <li>
          <div class="upBox beforeTime"></div>
          <div class="downBox beforeTime"></div>
          <div class="upBox afterTime"></div>
          <div class="downBox afterTime"></div>
      </li>
      <li>:</li>
      <li>
        <div class="upBox beforeTime"></div>
          <div class="downBox beforeTime"></div>
          <div class="upBox afterTime"></div>
          <div class="downBox afterTime"></div>
      </li>
      <li>:</li>
      <li>
        <div class="upBox beforeTime"></div>
          <div class="downBox beforeTime"></div>
          <div class="upBox afterTime"></div>
          <div class="downBox afterTime"></div>
      </li>
  </ul>
</div>
</body>
<script>
  //格式化时间
const formatTime = (time)=>{
  if(time < 10) time = '0' + time
  return time
}
//翻转前面下面的盒子向上180deg
const rotateUp = (ele,time, n) => {
  //传入的为一开始翻转的元素，即前面下面的盒子，以及新时间，以及第几个li盒子
  let rotateDeg = 0;
  ele.style.zIndex=50;
  //这个是所有上面的盒子
  const allUpBox =  document.querySelector(`li:nth-child(${n})`).querySelectorAll('.upBox');
  //所有前面的盒子
  const beforeTime = document.querySelector(`li:nth-child(${n})`).querySelectorAll('.beforeTime');
  // 让上面后面的盒子先不可见，然后设置为270°
  allUpBox[1].style.display = 'none';
  allUpBox[1].transform = `rotateX(270deg)`;
  const animation = () => {
    rotateDeg+=3;
    ele.style.transform = `perspective(500px) rotateX(${rotateDeg}deg)`;
    if(rotateDeg == 90) {
      //让它更新为最近时间后隐藏
      ele.innerHTML = time
      ele.style.zIndex = -1;
      //让刚刚上面隐藏的盒子重新显示出来并且完成90°-180°的旋转
      allUpBox[1].style.display = 'block';
      allUpBox[0].style.zIndex = 1;
      rotateDown(allUpBox[1])
      allUpBox[1].style.zIndex = 1;
    }
    if(rotateDeg == 150) {
      beforeTime[0].innerHTML = time
    }
    if(rotateDeg < 180) {
      requestAnimationFrame(animation);
    }
  }
  animation()
} 

const rotateDown = (ele) => {
  let rotateDeg = 270;
  const animation = () => {
    rotateDeg+=3;
    ele.style.transform = `perspective(500px) rotateX(${rotateDeg}deg)`;
    if(rotateDeg < 360) {
      requestAnimationFrame(animation);
    }
  }
  animation()
} 
let time = new Date();
let oldHour = time.getHours();
var oldMinute = time.getMinutes();
var oldSecond = time.getSeconds();
document.querySelector('li:nth-child(1)').querySelectorAll('.beforeTime').forEach(ele=> ele.innerHTML = formatTime(oldHour));
document.querySelector(' li:nth-child(3)').querySelectorAll('.beforeTime').forEach(ele=> ele.innerHTML = formatTime(oldMinute));
document.querySelector(' li:nth-child(5)').querySelectorAll('.beforeTime').forEach(ele=> ele.innerHTML = formatTime(oldSecond));
const changeTime = ()=>{
    let time = new Date();
    let hour = time.getHours();
    let minute = time.getMinutes();
    let second = time.getSeconds();
    const setHourBox = document.querySelector('li:nth-child(1)').querySelectorAll('.afterTime');
    if(!setHourBox[0].innerHTML || setHourBox[0].innerHTML!=formatTime(hour)) {
      if(setHourBox[0].innerHTML)  rotateUp(document.querySelector('li:nth-child(1)').querySelectorAll('.beforeTime')[1], formatTime(hour), 1);
      setHourBox.forEach(ele=> ele.innerHTML = formatTime(hour));
    }
    const setMinuteBox = document.querySelector('li:nth-child(3)').querySelectorAll('.afterTime');
    if(!setMinuteBox[0].innerHTML || setMinuteBox[0].innerHTML != formatTime(minute)) {
      if(setMinuteBox[0].innerHTML)  rotateUp(document.querySelector('li:nth-child(3)').querySelectorAll('.beforeTime')[1], formatTime(minute), 3);
      setMinuteBox.forEach(ele=> ele.innerHTML = formatTime(minute));
    }
    const setSecondBox = document.querySelector('li:nth-child(5)').querySelectorAll('.afterTime')
    setSecondBox.forEach(ele=> ele.innerHTML = formatTime(second));
    rotateUp(document.querySelector('li:nth-child(5)').querySelectorAll('.beforeTime')[1], formatTime(second), 5)
   
    setTimeout(changeTime,1000);
}
changeTime();
</script>
</html>