Question

我只想要一个温度计数器，在div“显示”中显示。默认的临时值是7.2，每当我提交另一个临时值时，它会缓慢递减（每5分钟0,2）到该首选临时值。你能帮我吗？我是初学者所以请耐心等待。这段代码有什么问题？

JavaScript的：

var temp = 7.2;
var loop = setInterval(cooler, 300000);

function cooler() 
{
   document.getElementById("display").innerHTML = temp-0,2;
   setInterval(loop);
}

function abortTimer() 
{ 
   clearInterval(loop);
}

HTML：

<body>
   Current temp <div id="display">  </div> <br>    
    <form>
       Set temp: <input type="text" id="setTemp">
       <input type="submit" value="Submit" onClick=cooler();>
    </form>         
</body>

Answer 1

代码有些问题。

您减少了temp的值但从不更新变量。（温度）
通过使用setInterval，您只需要调用一次。一旦你clearInterval，你将需要再次调用它。

我稍微更改了代码，将变量名称更新为更合适的名称。代码肯定可以使用更多的爱，但我保持简单的变化，所以你可以跟随。

<强> JavaScript的：

var currentTemp = 7.2;
var loop = setInterval(cooler,1000);

function cooler() 
{
 currentTemp = currentTemp - 0.2;
 document.getElementById("display").innerHTML = currentTemp;
}

function setTemp()
{
  var input = document.getElementById('setTemp');
  currentTemp = parseInt(input.value);
  input.value = '';
}

function abortTimer() 
{ 
  clearInterval(loop);
}

//Wire click event to the submit button
document.getElementById('submit').addEventListener('click', function()
                                                   {
                                                     setTemp();
                                                   });

<强> HTML：

<body>
     Current temp <div id="display">  
     </div> 
     <br>
<form>
    Set temp: <input type="text" id="setTemp">
    <input id="submit" type="button" value="Submit">
</form>
</body>

请参阅以下链接，了解以1秒更新运行的代码示例。 http://jsbin.com/zibuzuza/1/edit

Answer 2

startChange = function(){
  var v,nt,diff,timelapse,decrease,decreaseit,loop;
  v = d.value;
  nt = t.value; 
  diff = v-nt;
  timelapse = 500; //set to whatever you like
  decrease = .2;
  decreaseit = function(){
    var v = d.value;      
    if(v>=(nt+decrease)){
     loop = setTimeout(function(){    
      d.value = (v-decrease).toFixed(1);
      decreaseit();
     },timelapse)   
    } else clearInterval(loop);
  }
  decreaseit();

}

s.onclick = startChange;

如果满足条件，则使用setTimeout调用其父函数，否则使用clearInterval

使用.（带小数的数字），您将遇到整个parseFloat问题。这很难合作。不是一个令人惊叹的例子，而是基本框架：http://jsfiddle.net/wYn6J/1/

在间隔上更新元素的值

2 个答案: