手动配置值，并在JavaScript中更改框(圆）的颜色

Configure value manually and change color of box(circle) in JavaScript

本文关键字：颜色 配置 JavaScript 并在      更新时间：2023-09-26

这是一个简单的javascript代码，它有3个函数Increment（）、Stop（）和Start（）。

var value = 0;
var end;
function Increment(){
    value++;
    document.getElementById('counter').innerHTML = 'Value: ' + value + '<br />';    
}
end = setInterval(Increment, 1000);
function Stop(){
    clearInterval(end); 
}
function Start(){
    end = setInterval(Increment, 1000); 
}

<p id="counter"></p></br>
<div>
    <input id= "btn1" type="button" value="Stop" onclick="Stop()">
    <input id = "btn2" type="button" value="Start Again" onclick="Start()">             
</div>
  1. 如何手动配置值；就像我输入一个想要的值，它将从这个值开始
  2. 如何设置阈值，在越过阈值后，相应的框/圆将改变颜色

谢谢，诚挚的问候，

  1. 如果你的意思是如何在代码端设置值，那么你只需将var value=0行更改为你想要的任何值。如果您希望用户能够设置该值，那么您将使用输入来获取用户值，然后将其设置为var值=。

  2. 在脚本中，在Increment（）中添加一行，如"if（value>=_）{"，其中阈值为空，然后在括号后添加颜色更改代码。

您想要添加一个允许用户设置初始值的输入字段。我也不建议编写内联JavaScript——看看不引人注目的JavaScript的主题。

以下是您的startCounting()应该是什么样子：

// Hold our counter info
var counter = {
    currValue: 0,
    interval: null
};
function startCounting() {
    // Set the current value if provided
    counter.currValue = startValueField.value || 0;
    counter.interval = setInterval(increment, 1000);
}

我将把添加阈值作为练习。这是同样的想法。

FIDDLE

相关文章：