创造乐趣，享受美好——基于 HTML 的可定制轮盘🎡

2023-12-08 02:39:50

前言

在现实生活中，转盘的身影随处可见。无论是电视节目里的转盘游戏，还是赌场里的轮盘赌，又或者是一些游乐场里的小游戏，转盘总是能吸引一大波人的目光。

而从技术上来看，实现一个转盘的效果，并不难。利用 HTML、JavaScript 和 CSS，我们完全可以自己制作一个可定制的旋转转盘。

实践操作

一、HTML 结构

首先，我们先来搭建一下 HTML 结构。

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="wheel">
    <ul>
      <li>选项 1</li>
      <li>选项 2</li>
      <li>选项 3</li>
      <li>选项 4</li>
      <li>选项 5</li>
    </ul>
  </div>
  <button id="spin-button">旋转</button>
  <script src="script.js"></script>
</body>
</html>

二、CSS 样式

接下来，我们来添加一些 CSS 样式。

#wheel {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid #000;
  border-radius: 50%;
  position: relative;
}

#wheel ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#wheel li {
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #000;
  border-radius: 50%;
  position: absolute;
}

#spin-button {
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: 5px;
  position: absolute;
  top: 350px;
  left: 100px;
}

三、JavaScript 脚本

最后，我们来编写 JavaScript 脚本。

const wheel = document.getElementById('wheel');
const spinButton = document.getElementById('spin-button');

spinButton.addEventListener('click', () => {
  // 获取轮盘上的所有选项
  const options = wheel.querySelectorAll('li');

  // 随机选择一个选项
  const randomIndex = Math.floor(Math.random() * options.length);
  const selectedOption = options[randomIndex];

  // 旋转轮盘
  wheel.classList.add('spinning');

  // 延迟一段时间后停止旋转
  setTimeout(() => {
    wheel.classList.remove('spinning');

    // 将选中的选项滚动到顶部
    wheel.scrollTop = selectedOption.offsetTop;
  }, 1000);
});