改变你对时间的观念，了解如何制作像苹果健康中的定时器样式

前端

2023-01-01 14:02:50

苹果健康中的定时器样式：让时间管理更直观

厌倦了老套的闹钟设置方式？不妨探索苹果健康中的定时器样式，开启时间管理的新篇章！

苹果健康中的定时器样式：灵感来源

苹果健康中的睡眠闹钟功能早已广受欢迎。除了帮助你管理睡眠时间外，它还能直观地展示你的睡眠质量。这得益于苹果健康中独有的定时器样式。

该定时器样式简单实用，采用拖拽端点的方式设定睡眠时间，移动整个滑块调整时间段。这种设计让你一目了然地查看睡眠时间，轻松调整闹钟设置。

如何实现苹果健康中的定时器样式

心动不如行动，如果你想打造类似苹果健康中的定时器，可以按以下步骤操作：

创建一个基本的定时器界面，使用 HTML 和 CSS。
运用 JavaScript 实现拖拽端点和移动滑块功能。
添加闹钟提醒、睡眠质量分析等扩展功能。

以下是实现基本定时器界面所需的代码：

<div class="timer">
  <div class="timer-track">
    <div class="timer-handle"></div>
  </div>
</div>

.timer {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  border-radius: 50%;
}

.timer-track {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

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

var timer = document.querySelector('.timer');
var timerTrack = document.querySelector('.timer-track');
var timerHandle = document.querySelector('.timer-handle');

timerHandle.addEventListener('mousedown', function(e) {
  e.preventDefault();

  var startX = e.clientX;
  var startY = e.clientY;

  var timerWidth = timer.offsetWidth;
  var timerHeight = timer.offsetHeight;

  var timerHandleWidth = timerHandle.offsetWidth;
  var timerHandleHeight = timerHandle.offsetHeight;

  document.addEventListener('mousemove', function(e) {
    e.preventDefault();

    var currentX = e.clientX;
    var currentY = e.clientY;

    var deltaX = currentX - startX;
    var deltaY = currentY - startY;

    var left = timerHandle.offsetLeft + deltaX;
    var top = timerHandle.offsetTop + deltaY;

    if (left < 0) {
      left = 0;
    } else if (left > timerWidth - timerHandleWidth) {
      left = timerWidth - timerHandleWidth;
    }

    if (top < 0) {
      top = 0;
    } else if (top > timerHeight - timerHandleHeight) {
      top = timerHeight - timerHandleHeight;
    }

    timerHandle.style.left = left + 'px';
    timerHandle.style.top = top + 'px';
  });

  document.addEventListener('mouseup', function() {
    document.removeEventListener('mousemove');
  });
});