如何在js中启用和禁用时间？

Question

我想启用单击启用按钮时的时间，并禁用单击禁用按钮时的时间... HTML

 <p id="demo"></p> 
 <select>
    <option onselect="enable()">Enable</option>
    <option onselect="disable()"> disable</option>
 </select>

的JavaScript

 var myVar = setInterval(myTimer, 1000);

function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}


function enable() {
     document.getElementById("demo").innerHTML = "block";

}

function disable() {
    document.getElementById("demo").innerHTML = "none";
}

Answer 1

在disable功能中清除inetrval

function disable() {
   clearInterval(myVar);
   document.getElementById("demo").style.display = "none"; // set style not HTML
}

为了再次启用时间，请将您的enable方法修改为：

function enable() {
   document.getElementById("demo").style.display = "block";
   myVar = setInterval(myTimer, 1000);
}

Answer 2

您需要设置样式以更改元素的样式，而不是其innerHTML 。

 const demo = document.getElementById("demo"); setInterval(myTimer, 1000); function myTimer() { var d = new Date(); demo.textContent = d.toLocaleTimeString(); } const select = document.querySelector('select'); select.addEventListener('change', () => { demo.style.display = "block"; else demo.style.display = "none"; }); 

 <p id="demo"></p> <select> <option value="Enable">Enable</option> <option value="Disable">Disable</option> </select> 

另外，在插入文本（而不是HTML标记）时，请确保使用textContent而不是innerHTML更快，更安全。

Answer 3

我建议您使用select onchange事件（因为据我所知，没有onselect事件）并检查选择的值。 然后，如果它为Disable ，则使用clearInterval清除间隔，否则重新启动它：

 var myVar = setInterval(myTimer, 1000); function myTimer() { var d = new Date(); document.getElementById("demo").innerHTML = d.toLocaleTimeString(); } function toggle(select) { let demo = document.getElementById("demo"); if (select.value === 'Disable') { clearInterval(myVar); demo.style.display = 'none'; } else { demo.style.display = 'block'; myVar = setInterval(myTimer, 1000); } } 

 <p id="demo"></p> <select onchange="toggle(this)"> <option>Enable</option> <option>Disable</option> </select> 

Answer 4

您去了，以下是所做的更正

 var myVar = setInterval(myTimer, 1000); function myTimer() { var d = new Date(); document.getElementById("demo").innerHTML = d.toLocaleTimeString(); } function enable() { document.getElementById("demo").style.display = "block"; //changed `innerHTML` with `style.display` } function disable() { document.getElementById("demo").style.display = "none"; //changed `innerHTML` with `style.display` } 

 <p id="demo"></p> <select onchange='window[this.value]()'> <!-- added onchange --> <option value='enable'>Enable</option> <!-- added `value` removed `onselect` --> <option value='disable'>Disable</option> <!-- same as above --> </select> 

在上面的代码中，此行window[this.value]()将调用函数，即根据所选选项enable或disable 。