【问题标题】：Time Slider in JavascriptJavascript 中的时间滑块
【发布时间】：2021-07-09 03:33:00
【问题描述】：

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

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。
即：当滑块滑动时，我希望结果实际上是一个有效时间。比如：01:04、07:55 和 not：04:79、01:88。格式为mm:ss 格式。
非常感谢任何帮助！

【问题讨论】：

标签： javascript reactjs time slider

【解决方案1】：

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

解决方案

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

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

代码

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]);

演示

【讨论】：

【解决方案2】：

这里是固定代码。

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]);

【讨论】：