携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情

HTML

首先搭建一下基本页面结构

<div class="container">
  <div class="counter">
    <div class="numbers">
      <!-- 当前展示的数字 -->
      <span class="current">3</span>
      <span>2</span>
      <span>1</span>
      <span>0</span>
    </div>
    <p>countdown</p>
  </div>

  <div class="end">
    <p>finished!</p>
    <button id="restart">restart</button>
  </div>
</div>

.current用于展示当前倒计时的数字，.end中的内容会在倒计时结束后显示，通过点击#restart按钮可以重新倒计时

CSS

首先要让当前倒计时的数字的样式和别的有区别，所以先给.current中的字体加点样式

.current {
  font-size: 48px;
  color: #51557e;
}

由于涉及到.counter和.end的显示和隐藏，所以我们可以添加两个类名 -- .hide 和 .show，用于控制元素的显示和隐藏

「原生练手」✨酷炫的倒计时特效

HTML

CSS