Javascript HTML足球计时器

我正在一个足球现场得分网站上工作

我需要一个为它创建计时器的建议。计时器计数45分钟，然后显示15分钟的一半时间，然后从46计数到90。这实际上是一项极其艰巨的任务

我只能创建一个连续计数90分钟的递增计时器。我既不能暂停也不能对它做任何事

这是我的密码：

Js：

<script type="text/javascript">
    function startTimer(duration, display) {
    var timer = 0;
    var saved_countdown = localStorage.getItem('saved_countdown');
    setInterval(function () {
        minutes = parseInt(timer / 60);
        seconds = parseInt(timer % 60);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        

        if (timer++ > duration) {
            return;
        }
        else {
            display.textContent = minutes + ":" + seconds;
        }
    }, 1000);


}

window.onload = function () {
    var fiveMinutes = 60 * 90,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};


</script>

功能启动计时器（持续时间、显示）{
var定时器=0；
var saved_countdown=localStorage.getItem（'saved_countdown'）；
setInterval（函数（）{
分钟=parseInt（计时器/60）；
秒=parseInt（计时器%60）；
分钟=分钟<10？“0”+分钟：分钟；
秒=秒<10？“0”+秒：秒；
如果（计时器+++>持续时间）{
返回；
}
否则{
display.textContent=分钟+“：”+秒；
}
}, 1000);
}
window.onload=函数（）{
变量五分钟=60*90，
display=document.querySelector（“#time”）；
startTimer（五分钟，显示）；
};

---

任何建议都会有帮助

实现这种计时器的方法有很多种

下面是一个示例，它将与一系列计时器相关的数据（开始和完成时间）收集到一个单个对象中，并执行一个函数，该函数解析该对象，按顺序运行一系列基于命名间隔的计时器

---

工作示例：

//抓取定时器显示元素
让timerDisplay=document.getElementsByClassName（'timerDisplay'）[0]；
//设置计时器计数步长
常数timerCountStep=0.01；
//计时器数据
const myFootballMatch={
“上半场”：{
“开始”：0，
“结束”：4.5
},
'间隔'：{
“开始”：0，
“结束”：1.5
},
“第二部分”：{
“开始”：4.5，
"完":9
}
};
//功能
const runTimer=（timerObject，timerId=0）=>{
//如果没有更多计时器，则退出功能
if（parseInt（timerId）==Object.keys（timerObject.length）{
返回；
}
让timerName=Object.keys（timerObject）[timerId]；
让timerCount=parseFloat（timerObject[timerName]['start']）；
让timerEnd=parseFloat（timerObject[timerName]['end']）；
常量计时器=设置间隔（（）=>{
timerCount=timerCount+timerCountStep；
如果（timerName==='interval'）{
timerDisplay.textContent='4.50'；
}
否则{
timerDisplay.textContent=timerCount.toFixed（2）；
}
if（timerCount>（timerEnd-timerCountStep））{
清除间隔（计时器）；
运行计时器（myFootballMatch，timerId+1）；
}
}, 10);
}
//运行函数
跑步计时器（myFootballMatch）
.timerDisplay{
保证金：0；
字体大小：96px；
文本对齐：居中；
字体大小：粗体；
}
为什么不使用三个计时器，一个计时器计数到45，一个计时器等待15，最后一个计时器计数到90？我建议您对计数器使用requestAnimationFrame和时间戳，而不是setInterval。请查看计时器使用的语言，因为使用升华文本html格式并将代码放入脚本标记后，当代码在浏览器中运行或打开时，返回null。我需要澄清。提前感谢上面工作示例中的框是（从顶部）：1）Javascript；2） CSS；3） HTML。