Javascript 中的时间滑块

Question

我这里有一个滑块。下面是其功能代码：

const [durationPercentage, setDurationPercentage] = useState(0);
const [maxDuration, setMaxDuration] = useState("06:00");

  useEffect(() => {
    const durationMax = maxDuration.replace(":", "");

    const duration = (Number(durationMax) * durationPercentage) / 100;

    var a = String(duration);
    var b = ":";
    var position = String(duration).length - 2;
    var output = [a.slice(0, position), b, a.slice(position)].join("");
    console.log(output);
  }, [durationPercentage]);


   /*========== Slider ===============*/

    <Slider
      onChange={(event, newDurationPercentage) =>
       setDurationPercentage(newDurationPercentage)
      }
    />

当我滑动滑块时，我得到了结果：

但是，大家可以看到，:后面还有大于60的数字，当大于等于60的数字来的时候，我想让分钟加1。
即：当sliderslides时，我希望结果实际上是一个有效的时间。比如：01:04、07:55 和 not: 04:79, 01:88。格式为 mm:ss 格式。
非常感谢任何帮助！

Answer 1

这是固定代码。

const [durationPercentage, setDurationPercentage] = useState(0);
const [maxDuration, setMaxDuration] = useState("06:00");

useEffect(() => {
    const maxMinuteSecond = maxDuration.split(":");
    const durationMax = Number(maxMinuteSecond[0]) * 60 + Number(maxMinuteSecond[1]);

    const duration = (Number(durationMax) * durationPercentage) / 100;

    var second = duration % 60;
    var minute = (duration - second) / 60;// Math.floor(duration / 60);
    
    var output = (minute<10?"0":"") + minute.toString() + ":" + (second<10?"0":"") + second.toString();;
    console.log(output);
}, [durationPercentage]);

Answer 2

我认为，如果您改为将 durationPercentage 和 maxDuration 存储为数字值，这会使数学运算变得更容易，并且将一个值从一个单位转换为其他单位就变得很简单了。

解决方案

以秒为单位存储所有数值。

将秒转换为整分钟：秒/60 和 floor
计算秒的余数：秒mod 60
将结果转换为长度为 2 的字符串，并用“0”填充为两个“数字”。

代码

const [durationPercentage, setDurationPercentage] = useState(0);
const [maxDuration, setMaxDuration] = useState(360);

useEffect(() => {
  const duration = Math.floor((maxDuration * durationPercentage) / 100);

  const minutes = Math.floor(duration / 60);
  const seconds = duration % 60;

  const output = `${String(minutes).padStart(2, 0)}:${String(
    seconds
  ).padStart(2, 0)}`;

  console.log(output);
}, [durationPercentage, maxDuration]);

Javascript 中的时间滑块

Time Slider in Javascript

javascript

time

slider

reactjs

解决方案

演示