Javascript 我的实时更新程序使浏览器崩溃_Javascript_Function_Variables_Setinterval

Javascript 我的实时更新程序使浏览器崩溃

javascript function variables

Javascript 我的实时更新程序使浏览器崩溃,javascript,function,variables,setinterval,Javascript,Function,Variables,Setinterval,我有一个变量的实时更新程序，但它不断地破坏浏览器，我可以用Javascript做实时更新程序的任何其他方法都将不胜感激这是我的密码 var health; function decrease() { health = health - 2; } function mainUI() { setInterval(decrease(),30000); if (health <= 5) { document.write("Below 5!");

我有一个变量的实时更新程序，但它不断地破坏浏览器，我可以用Javascript做实时更新程序的任何其他方法都将不胜感激

这是我的密码

var health;
function decrease() {
    health = health - 2;
}

function mainUI() {
    setInterval(decrease(),30000);
    if (health <= 5) {
        document.write("Below 5!");
    } else {
        document.write("Over 5!");
    }
}

mainUI();
setInterval(mainUI(),1000);

var健康；
函数减少（）{
健康=健康-2；
}
函数mainUI（）{
设置间隔（减少（），30000）；
如果（健康你可以这样做：
HTML


Javascript:
var health;
function decrease() {
    health = health - 2;
}

function mainUI() {
    var msg = (health <= 5 ? "Below 5!" : "Over 5!");
    document.getElementById("spanHealth").innerHTML = msg;
}

setInterval(mainUI, 1000);
setInterval(decrease, 30000);

var健康；
函数减少（）{
健康=健康-2；
}
函数mainUI（）{
var msg=（health这是一个小页面，它将为您提供使用setInterval


风格
 #health{
    width: 170px;
 }
 .normalHealth{
    color: white;
    background-color: green;
 }
 .lowHealth{
    color: white;
    background-color: red;
 }
 .dead{
    color: white;
    background-color: black;
 }

脚本
 var health = 10;
 var poisonTimer;
 var healthDiv;

 function loseHealth() {
    health -= 2;
    updateUI();
 }

 function givePoison() {
    poisonTimer = setInterval(loseHealth, 1000);
 }

 function giveAntidote() {
    clearInterval(poisonTimer);
 }
 function kill() {
    health = 0;
    healthDiv.className = "dead";
    giveAntidote(healthDiv);
    document.getElementById("revive").disabled = false;
    updateUI();
 }
 function revive() {
    health = 10;
    healthDiv.className = "normalHealth";
    document.getElementById("revive").disabled = false;
    updateUI();
 }

 function updateUI() {
    healthDiv.innerHTML = health;

    if (health > 4) {
       healthDiv.className = "normalHealth";
    }
    else if (health > 0) {
       healthDiv.className = "lowHealth";
    }
    else {
       kill();
    }
 }

 function main() {
    healthDiv = document.getElementById("health");
    document.getElementById("poison").addEventListener("click", givePoison);
    document.getElementById("cure").addEventListener("click", giveAntidote);
    document.getElementById("revive").addEventListener("click", revive);
 }

 window.onload = main;

HTML
<html>
   <head>
      <title>Health Bar</title>
   </head>
   <body>
      <div id="health" class="normalHealth">10</div>
      <button id="poison">Poison</button>
      <button id="cure">Cure</button>
      <button id="revive" disabled>Revive</button>
   </body>
</html>


健康酒吧
10
毒药
治愈
使复苏
为什么要使用文档。编写？您不应该使用它。另外，您要执行设置间隔（mainUI，1000）；
。不要在此处包含（）
。您要传递函数，而不是其返回值。您建议我使用什么来代替文档。编写（）
？我想您也应该创建一个变量来保存减少
超时，否则会以指数方式生成超时。请使用JS DOM方法，如innerHTML。@user1028642:更新DOM元素的.innerHTML属性。
<html>
   <head>
      <title>Health Bar</title>
   </head>
   <body>
      <div id="health" class="normalHealth">10</div>
      <button id="poison">Poison</button>
      <button id="cure">Cure</button>
      <button id="revive" disabled>Revive</button>
   </body>
</html>