Javascript中的时间滑块

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

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)
      }
    />

const[durationPercentage，setDurationPercentage]=useState（0）；
const[maxDuration，setMaxDuration]=useState（“06:00”）；
useffect（（）=>{
const durationMax=maxDuration.replace（“：”，“”）；
常数持续时间=（数字（持续时间最大值）*持续时间百分比）/100；
var a=字符串（持续时间）；
var b=“：”；
变量位置=字符串（持续时间）。长度-2；
var输出=[a.slice（0，位置），b，a.slice（位置）]。连接（“”）；
控制台日志（输出）；
}，[持续时间百分比]；
/*==========滑块===============*/
setDurationPercentage（newDurationPercentage）
}
/>

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

但是，正如您所看到的，在

：

后面有大于60的数字。当数字大于或等于60时，我希望分钟增加1
也就是说：当滑块滑动时，我希望结果实际上是一个有效时间。比如：01:04、07:55和不：04:79、01:88。格式应为

mm:ss

格式

---

任何帮助都是非常诱人的

这是固定代码

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

const[durationPercentage，setDurationPercentage]=useState（0）；
const[maxDuration，setMaxDuration]=useState（“06:00”）；
useffect（（）=>{
常量maxMinuteSecond=maxDuration.split（“：”）；
const durationMax=数字（最大分钟秒[0]）*60+数字（最大分钟秒[1]）；
常数持续时间=（数字（持续时间最大值）*持续时间百分比）/100；
var秒=持续时间%60；
var minute=（持续时间-秒）/60；//数学楼层（持续时间/60）；
var output=（分钟我认为如果你将
durationPercentage
和
maxDuration
存储为数值，那么数学计算就更容易了，将一个值从一个单位转换为其他单位就成了一件小事

解决方案
以秒为单位存储所有数值


将秒转换为整分钟：秒/60和地板
计算秒余数：秒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]);