React + JavaScript 实现可拖拽进度条

React + JavaScript 实现可拖拽进度条

下面是一个使用 React (JavaScript) 实现的可拖拽时间进度条组件。
代码

1. import React, { useState, useRef, useEffect } from 'react';
2. import './TimeProgressBar.css';
4. const TimeProgressBar = ({
5.   totalTime = 600, // 默认10分钟 (600秒)
6.   initialTime = 0,
7.   onChange,
8. }) => {
9.   const [currentTime, setCurrentTime] = useState(initialTime);
10.   const [isDragging, setIsDragging] = useState(false);
11.   const progressBarRef = useRef(null);
13.   // 格式化时间 (秒 → HH:MM:SS)
14.   const formatTime = (seconds) => {
15.     const hrs = Math.floor(seconds / 3600);
16.     const mins = Math.floor((seconds % 3600) / 60);
17.     const secs = Math.floor(seconds % 60);
18.    
19.     return [
20.       hrs.toString().padStart(2, '0'),
21.       mins.toString().padStart(2, '0'),
22.       secs.toString().padStart(2, '0')
23.     ].join(':');
24.   };
26.   // 计算进度百分比
27.   const getPercentage = () => {
28.     return Math.min((currentTime / totalTime) * 100, 100);
29.   };
31.   // 更新进度
32.   const updateProgress = (time) => {
33.     const newTime = Math.max(0, Math.min(time, totalTime));
34.     setCurrentTime(newTime);
35.     if (onChange) onChange(newTime);
36.   };
38.   // 处理进度条点击
39.   const handleProgressBarClick = (e) => {
40.     if (progressBarRef.current) {
41.       const rect = progressBarRef.current.getBoundingClientRect();
42.       const pos = (e.clientX - rect.left) / rect.width;
43.       updateProgress(pos * totalTime);
44.     }
45.   };
47.   // 处理拖拽开始
48.   const handleDragStart = (e) => {
49.     setIsDragging(true);
50.     e.preventDefault();
51.   };
53.   // 处理拖拽移动
54.   const handleDragMove = (e) => {
55.     if (!isDragging || !progressBarRef.current) return;
56.    
57.     const rect = progressBarRef.current.getBoundingClientRect();
58.     const pos = (e.clientX - rect.left) / rect.width;
59.     updateProgress(pos * totalTime);
60.   };
62.   // 处理拖拽结束
63.   const handleDragEnd = () => {
64.     setIsDragging(false);
65.   };
67.   // 添加/移除事件监听器
68.   useEffect(() => {
69.     document.addEventListener('mousemove', handleDragMove);
70.     document.addEventListener('mouseup', handleDragEnd);
71.     document.addEventListener('touchmove', handleDragMove);
72.     document.addEventListener('touchend', handleDragEnd);
74.     return () => {
75.       document.removeEventListener('mousemove', handleDragMove);
76.       document.removeEventListener('mouseup', handleDragEnd);
77.       document.removeEventListener('touchmove', handleDragMove);
78.       document.removeEventListener('touchend', handleDragEnd);
79.     };
80.   }, [isDragging]);
82.   return (
83.     <div className="time-progress-container">
84.       <div
85.         className="progress-bar"
86.         ref={progressBarRef}
87.         onClick={handleProgressBarClick}
88.       >
89.         <div
90.           className="progress-fill"
91.           style={{ width: `${getPercentage()}%` }}
92.         />
93.         <div
94.           className="progress-thumb"
95.           style={{ left: `${getPercentage()}%` }}
96.           onMouseDown={handleDragStart}
97.           onTouchStart={handleDragStart}
98.         />
99.       </div>
100.       <div className="time-display">
101.         <span className="current-time">{formatTime(currentTime)}</span>
102.         <span className="total-time">{formatTime(totalTime)}</span>
103.       </div>
104.     </div>
105.   );
106. };
108. export default TimeProgressBar;

复制代码

CSS 样式

1. .time-progress-container {
2.   width: 100%;
3.   max-width: 600px;
4.   margin: 0 auto;
5.   padding: 10px 0;
6. }
8. .progress-bar {
9.   position: relative;
10.   height: 8px;
11.   background-color: #e0e0e0;
12.   border-radius: 4px;
13.   cursor: pointer;
14.   margin-bottom: 10px;
15. }
17. .progress-fill {
18.   position: absolute;
19.   height: 100%;
20.   background-color: #4285f4;
21.   border-radius: 4px;
22.   transition: width 0.1s ease;
23. }
25. .progress-thumb {
26.   position: absolute;
27.   top: 50%;
28.   transform: translate(-50%, -50%);
29.   width: 16px;
30.   height: 16px;
31.   background-color: #4285f4;
32.   border-radius: 50%;
33.   cursor: grab;
34.   z-index: 2;
35.   transition: left 0.1s ease;
36. }
38. .progress-thumb:active {
39.   cursor: grabbing;
40. }
42. .time-display {
43.   display: flex;
44.   justify-content: space-between;
45.   font-size: 14px;
46.   color: #666;
47. }

复制代码

使用

1. import React from 'react';
2. import TimeProgressBar from './TimeProgressBar';
4. function App() {
5.   const handleTimeChange = (time) => {
6.     console.log('当前时间:', time);
7.   };
9.   return (
10.     <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
11.       <h2>视频播放器</h2>
12.       <TimeProgressBar
13.         totalTime={720} // 12分钟
14.         initialTime={120} // 从2分钟开始
15.         onChange={handleTimeChange}
16.       />
17.     </div>
18.   );
19. }
21. export default App;

复制代码

功能特点

• 完全可拖拽：可以通过鼠标或触摸拖动滑块
  
• 点击跳转：点击进度条恣意位置可跳转到对应时间点
  
• 相应式计划：适应差别屏幕尺寸
  
• 平滑过渡：添加了CSS过渡效果
  
• 触摸支持：支持移动装备触摸操纵
  
• 时间表现：表现当前时间和总时间
  
• 回调函数：提供onChange回调，其时间厘革时触发
  

自界说选项

你可以通过以下props自界说组件：

• totalTime: 设置总时间（秒）
  
• initialTime: 设置初始时间（秒）
  
• onChange: 时间厘革时的回调函数