在昨天之前，我从来没有用Javascript写过任何东西。 我是全新的。 我用excel编写过宏，但我对计算机非常熟悉。 我正在尝试编写一个程序，以便我可以在浏览器中打开一个带有按钮的 HTML 文件。 当我按下按钮时，我希望它从一个随机数字倒计时，然后当倒计时结束时，它会发出哔哔声并从项目列表中随机选择一个文本。
我已经完成了大部分工作(请记住这是我的第一个程序)，但我想加入一个功能，允许我暂停计时器，以便以后可以恢复它。 我在这里包含了一些有效的数字，但这只是测试。
我一直在网上寻找其他"暂停和恢复"风格的问题，但我有点困惑。 这对我来说是超级新的。
这是我到目前为止的程序....
<html>
<body>
<h2>Javascript CART breakdown calculator</h2>
<p id="demo"></p>
<p id="breakdown_item"></p>
<button onclick="setTimeout(myFunction, my_random_number*1000);">start timer</button>
<script>
var my_random_number, low, high;
low = 1;
high = 5;
my_random_number = Math.floor(Math.random() * high) + low;
document.getElementById("demo").innerHTML = my_random_number;
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
function myFunction(frequency, duration, callback) {
duration = 10000 / 1000; // the 10000 used to be 'duration'
// create Oscillator node
var oscillator = audioCtx.createOscillator();
oscillator.type = 'square';
oscillator.frequency.value = 500; // value in hertz
oscillator.connect(audioCtx.destination);
oscillator.onended = callback;
oscillator.start(0);
oscillator.stop(audioCtx.currentTime + duration);
var random_breakdown_event, low_event, high_event;
low_event = 1
high_event = 9
random_breakdown_event = Math.floor(Math.random() * high_event) + low_event;
var text
if (random_breakdown_event == 1) text = "blown engine";
if (random_breakdown_event == 2) text = "broken transmission";
if (random_breakdown_event == 3) text = "broken suspension";
if (random_breakdown_event == 4) text = "broken halfshaft";
if (random_breakdown_event == 5) text = "broken cv joint";
if (random_breakdown_event == 6) text = "broken wings";
if (random_breakdown_event == 7) text = "electrical misfire";
if (random_breakdown_event == 8) text = "broken fuel pump";
if (random_breakdown_event == 9) text = "change battery";
document.getElementById("breakdown_item").innerHTML = text
}
</script>
</body>
</html>
我想加入一种方法来使此计时器暂停和恢复。
关于您的代码的一些评论。
1) 按钮事件管理(适用于所有事件管理)
尝试不引人注目地管理您的事件(尽管有一种新的趋势是内联操作，例如使用 React 组件)。不显眼意味着什么？这意味着你在 HTML 之外的 javascript 块中定义代码事件。
例如，如果你将id="button-timer"分配给你的按钮，你可以做这样的事情：
<script>
var button = document.getElementById('button-timer');
button.addEventListener('click', myFunction);
</script>
然后在myFunction中，您可以指定设置超时。setTimeout 函数返回一个值，稍后可以使用名为clearTimeout(<timer-reference>)的函数暂停/删除超时。因此，这为您提供了有关如何暂停/控制超时的提示。
2) 而不是那么多 if's() 只需使用 Switch 语句。 所以你会做这样的事情：
switch(random_breakdown_event){
case 1 : // some code;
break;
case 3 : // some code
break;
default: // default case action
}
因此，暗示您如何管理暂停/停止过程，
<button id="button-timer">Start timer</button>
<script>
var timer=null;
function myFunction(){
// Your function does stuff
}
function buttonEventHandler(){
timer = setTimeout('myFunction', <some-random-time>);
}
function pauseStop(){
clearInterval(timer);
}
var button = document.getElementById('button-timer');
button.addEventListener('click', buttonEventHandler);
</script>
这将是有关如何在 js 代码中控制计时器暂停操作的一般架构。