用 HTML+JS+CSS 实现圆形滑块

2023-11-30 02:26:44

使用 HTML、CSS 和 JavaScript 创建圆形滑块

在今天的数字世界中，交互式网站设计至关重要。使用户能够与网站元素进行交互可以极大地改善用户体验。其中一个流行的交互式元素是圆形滑块，它允许用户通过拖动滑块来选择值。在本文中，我们将向您展示如何使用 HTML、CSS 和 JavaScript 创建自己的圆形滑块。

HTML 代码

首先，我们需要创建 HTML 结构。我们将使用一个 div 元素来创建滑块，另一个 div 元素来创建滑块的句柄。

<div id="slider">
  <div id="handle"></div>
</div>

CSS 代码

接下来，我们需要使用 CSS 来设置滑块的样式。我们将使用 CSS 变量来定义滑块的宽度、高度和背景色。

#slider {
  width: var(--slider-width);
  height: var(--slider-height);
  border-radius: 50%;
  background-color: var(--slider-background-color);
  position: relative;
}

#handle {
  width: var(--handle-width);
  height: var(--handle-height);
  border-radius: 50%;
  background-color: var(--handle-background-color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript 代码

最后，我们需要使用 JavaScript 来实现滑块的拖动功能。我们将使用 mousedown、mouseup 和 mousemove 事件监听器来跟踪鼠标移动并更新滑块句柄的位置。

const slider = document.getElementById('slider');
const handle = document.getElementById('handle');

let mousedown = false;

handle.addEventListener('mousedown', (e) => {
  mousedown = true;
});

document.addEventListener('mouseup', (e) => {
  mousedown = false;
});

document.addEventListener('mousemove', (e) => {
  if (mousedown) {
    const rect = slider.getBoundingClientRect();
    const x = e.clientX - rect.left - handle.offsetWidth / 2;
    const y = e.clientY - rect.top - handle.offsetHeight / 2;

    const angle = Math.atan2(y, x);

    handle.style.left = (Math.cos(angle) * 90 + 100) + 'px';
    handle.style.top = (Math.sin(angle) * 90 + 100) + 'px';
  }
});

示例

现在我们已经创建了圆形滑块，让我们将其集成到一个简单的示例中。我们将使用滑块来设置时间。

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="slider">
    <div id="handle"></div>
  </div>

  <div id="time">
    <span id="hours">00</span>
    <span>:</span>
    <span id="minutes">00</span>
  </div>

  <script src="script.js"></script>
</body>
</html>

#slider {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ccc;
  position: relative;
}

#handle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#time {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#hours, #minutes {
  font-size: 36px;
}

const slider = document.getElementById('slider');
const handle = document.getElementById('handle');
const hours = document.getElementById('hours');
const minutes = document.getElementById('minutes');

let mousedown = false;

handle.addEventListener('mousedown', (e) => {
  mousedown = true;
});

document.addEventListener('mouseup', (e) => {
  mousedown = false;
});

document.addEventListener('mousemove', (e) => {
  if (mousedown) {
    const rect = slider.getBoundingClientRect();
    const x = e.clientX - rect.left - handle.offsetWidth / 2;
    const y = e.clientY - rect.top - handle.offsetHeight / 2;

    const angle = Math.atan2(y, x);

    handle.style.left = (Math.cos(angle) * 90 + 100) + 'px';
    handle.style.top = (Math.sin(angle) * 90 + 100) + 'px';

    const hoursValue = Math.floor(angle / (2 * Math.PI) * 12);
    const minutesValue = Math.floor((angle % (2 * Math.PI)) / (2 * Math.PI / 60));

    hours.textContent = hoursValue < 10 ? '0' + hoursValue : hoursValue;
    minutes.textContent = minutesValue < 10 ? '0' + minutesValue : minutesValue;
  }
});