炫动数字轮盘 —— HTML/CSS/JS打造的篮球比分动效

2023-12-12 19:10:08

篮球赛场上的数字魅力

篮球比赛是一项充满激情的运动，而比分作为比赛的核心要素，更是牵动着观众的心。如何让比分显示更加生动有趣？传统的静态数字似乎有些单调，不如尝试一下动感的数字轮盘效果。

数字轮盘的实现方案

要实现数字轮盘的效果，我们可以使用 HTML、CSS 和 JavaScript。HTML负责创建基本结构，CSS负责样式设计，JavaScript负责实现动态效果。

首先，我们需要创建一个包含两个数字的 HTML 结构。每个数字由一个 <div> 元素表示，里面包含一个 <span> 元素，用于显示数字。

<div class="number-container">
  <div class="number">
    <span>0</span>
  </div>
  <div class="number">
    <span>0</span>
  </div>
</div>

接下来，我们需要使用 CSS 来设置数字的样式。我们将数字设置为绝对定位，并使用 transform 属性来实现旋转效果。

.number-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  font-weight: bold;
}

.number span {
  display: block;
  width: 100%;
  text-align: center;
}

最后，我们需要使用 JavaScript 来实现数字轮盘的效果。我们将使用 setInterval() 函数来定时更新数字，并使用 Math.random() 函数来生成随机数字。

function updateNumbers() {
  const numbers = document.querySelectorAll('.number');
  for (const number of numbers) {
    const newNumber = Math.floor(Math.random() * 10);
    number.querySelector('span').textContent = newNumber;

    number.classList.add('number-spin');

    setTimeout(() => {
      number.classList.remove('number-spin');
    }, 500);
  }
}

setInterval(updateNumbers, 1000);