大佬的DIY时钟，我：“学到了！”

1.看效果说话

现在就看

2.实现代码

.css

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: monospace;
    font-size: 2rem;
    min-height: 100vh;
    display: grid;
    overflow-y: hidden;
    place-items: center;
    background: linear-gradient(-45deg, #141e30, #141e30);
}

.hr,
.min,
.sec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
    grid-row: 1/2;
    align-items: start;
}

.date {
    padding: 0.5em;
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    color: #f9fbfd;
    transition: 500ms 100ms ease;
    border-radius: 50%;
}

.date.pop {
    color: #3e6ccb;
    font-weight: bold;
    transform: scale(1.3);
    background-color: #DFE6F6;
    box-shadow: -10px -10px 20px -5px #F9FBFD, 10px 10px 20px #a9bee8;
}

.strip {
    transition: transform 500ms ease-in-out;
    border-radius: 8px;
    background-color: #DFE6F6;
    box-shadow: -10px -10px 20px -5px #F9FBFD, 10px 10px 20px #a9bee8;
}

.clock {
    display: grid;
    grid-template-columns: repeat(3, lfr);
    grid-gap: 3rem;
    height: 4rem;
    position: relative;
    padding: 0 4rem;
}

.html

<div class="clock">
    <div class="hr">
        <div class="strip">
            <div class="date">0</div>
            <div class="date">1</div>
            <div class="date">2</div>
        </div>
        <div class="strip">
            <div class="date">0</div>
            <div class="date">1</div>
            <div class="date">2</div>
            <div class="date">3</div>
            <div class="date">4</div>
            <div class="date">5</div>
            <div class="date">6</div>
            <div class="date">7</div>
            <div class="date">8</div>
            <div class="date">9</div>
        </div>
    </div>
    <!--  -->
    <div class="min">
        <div class="strip">
            <div class="date">0</div>
            <div class="date">1</div>
            <div class="date">2</div>
            <div class="date">3</div>
            <div class="date">4</div>
            <div class="date">5</div>
        </div>
        <div class="strip">
            <div class="date">0</div>
            <div class="date">1</div>
            <div class="date">2</div>
            <div class="date">3</div>
            <div class="date">4</div>
            <div class="date">5</div>
            <div class="date">6</div>
            <div class="date">7</div>
            <div class="date">8</div>
            <div class="date">9</div>
        </div>
    </div>
    <!--  -->
    <div class="sec">
        <div class="strip">
            <div class="date">0</div>
            <div class="date">1</div>
            <div class="date">2</div>
            <div class="date">3</div>
            <div class="date">4</div>
            <div class="date">5</div>
        </div>
        <div class="strip">
            <div class="date">0</div>
            <div class="date">1</div>
            <div class="date">2</div>
            <div class="date">3</div>
            <div class="date">4</div>
            <div class="date">5</div>
            <div class="date">6</div>
            <div class="date">7</div>
            <div class="date">8</div>
            <div class="date">9</div>
        </div>
    </div>
    <!--  -->
</div>

.js

const strips = [...document.querySelectorAll(".strip")];
const numberSize = "4"; 

function highlight(strip, d) {
  strips[strip]
    .querySelector(`.date:nth-of-type(${d + 1})`)
    .classList.add("pop");

  setTimeout(() => {
    strips[strip]
      .querySelector(`.date:nth-of-type(${d + 1})`)
      .classList.remove("pop");
  }, 950); 

function stripSlider(strip, date) {
  let d1 = Math.floor(date / 10);
  let d2 = date % 10;

  strips[strip].style.transform = `translateY(${d1 * -numberSize}rem)`;
  highlight(strip, d1);
  strips[strip + 1].style.transform = `translateY(${d2 * -numberSize}rem)`;
  highlight(strip + 1, d2);
}

setInterval(() => {
  const time = new Date();

  const hours = time.getHours();
  const mins = time.getMinutes();
  const secs = time.getSeconds();

  stripSlider(0, hours);
  stripSlider(2, mins);
  stripSlider(4, secs);
}, 1000);

3.总结

一直觉得这是前端工程师才应该去研究的东西，但是知识总是无穷并且没有界限。如果你是初学者，你可以像我一样从零开始，技术上我们可以互相交流。