方形数字时钟ui交互特效

js css3制作电子数字时钟，带秒表进度条，点击暂停或开始设置时钟ui交互特效。
css代码：

*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}

:root {
  --purple-dark: #5F546E;
  --purple-light: #827593;
  --gray-light: #E5E3E8;
  --gray-dark: #A5A2A9;
  --light: #fcf8fb;
  --transition: all 150ms cubic-bezier(.46,1.13,.67,.87);
}

.clock-container {
  width: 405px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 35px 50px;
  background-color: var(--purple-dark);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.825);
}
.clock-container span {
  text-transform: uppercase;
  font-size: 10px;
  text-align: right;
  display: block;
}
.clock-container p {
  font-size: 60px;
  color: var(--light);
  font-weight: 100;
}
.clock-container p:first-letter {
  letter-spacing: 5px;
}

.container {
  width: 560px;
  height: 320px;
  display: block;
  box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.215), -5px -5px 25px rgba(0, 0, 0, 0.125);
  background-color: var(--gray-light);
  position: relative;
}
.container .top {
  width: 215px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
.container .top p {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 900;
  color: var(--purple-dark);
  letter-spacing: .5px;
  cursor: pointer;
}
.container .bottom {
  height: 7px;
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: #aaa4b2;
}
.container .bottom .progress-bar {
  width: 240px;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 9;
  background-color: #615770;
  transition: var(--transition);
}

.colon {
  --size: 3px;
  width: var(--size);
  height: 15px;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}
.colon::before {
  content: '';
  width: 100%;
  height: var(--size);
  background-color: #9892a3;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}
.colon::after {
  content: '';
  width: 100%;
  height: var(--size);
  background-color: #9892a3;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 50%;
}

.toast {
  width: 405px;
  color: var(--light);
  padding: 15px 24px;
  background-color: var(--purple-dark);
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  transition: var(--transition);
  z-index: 99;
}
.toast p {
  font-weight: 400;
  font-size: 18px;
}
.toast p:first-letter {
  text-transform: uppercase;
}
.toast.show {
  bottom: 50px;
}
.toast span {
  align-self: center;
  font-weight: 500;
  cursor: pointer;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
  color: var(--purple-light);
  background-color: var(--purple-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.15;
  position: relative;
}

html代码：

<div class="toast" data-type="pause">
    <p>时钟已停止。</p><span>关闭</span>
  </div>
  <div class="toast" data-type="live">
    <p>时钟现在是实时的。</p><span>关闭</span>
  </div>
  <div class="container">
    <div class="top">
      <p id="pause">暂停</p>
      <p id="reset">开始</p>
    </div>
    <div class="clock-container">
      <div class="hours"> <span>时</span>
        <p id="hour">00</p>
      </div>
      <div class="colon"></div>
      <div class="minutes"> <span>分</span>
        <p id="minute">00</p>
      </div>
      <div class="colon"></div>
      <div class="seconds"><span>秒</span>
        <p id="second">00</p>
      </div>
    </div>
    <div class="bottom">
      <div class="progress-bar"></div>
    </div>
  </div>

js代码：

console.clear();

const hour = document.getElementById("hour");
const minute = document.getElementById("minute");
const second = document.getElementById("second");
const progress = document.querySelector(".progress-bar");
const pause = document.getElementById("pause");
const reset = document.getElementById("reset");
const toasts = document.getElementsByClassName("toast");

var interval;

[...toasts].forEach(toast => {
  toast.addEventListener("click", hideToast);
});

function hideToast(e) {
  const target = e.target;

  if (target.tagName.toUpperCase() === "SPAN") {
    target.parentNode.classList.remove("show");
  }
}

function getCurrentTime() {
  const d = new Date();
  let h = d.getHours();
  let min = d.getMinutes();
  let sec = d.getSeconds();

  h = h < 10 ? "0" + h : h;
  min = min < 10 ? "0" + min : min;
  sec = sec < 10 ? "0" + sec : sec;

  hour.textContent = h;
  minute.textContent = min;
  second.textContent = sec;

  progress.style.width = +sec / 60 * 100 + "%";
}

function clearClass(className) {
  for (let i = 0; i < toasts.length; i++) {
    toasts[i].classList.remove(className);
  }
}

pause.addEventListener("click", () => {
  clearInterval(interval);
  clearClass('show');
  document.querySelector('div[data-type="pause"]').classList.add("show");
});

reset.addEventListener("click", () => {
  interval = setInterval(getCurrentTime, 1000);
  clearClass('show');
  document.querySelector('div[data-type="live"]').classList.add("show");
});

interval = setInterval(getCurrentTime, 1000);