創建計數器

我正在創建一個計數器，我很難做到這一點。計數器的目標是永遠第二通過多項將由170 增加，因爲你可以看到下面的數字不加起來並在新線由，主要是因爲我不知道如何使它加起來。像這樣的時鐘從The Economist 創建計數器

<!DOCTYPE html> 
<html> 
<body> 
<p>Click the button see how much AirHelps market increases by every second.</p> 

<button onclick="counterFunction()">See it now</button> 

<p id="counter"></p> 

<script> 
function counterFunction() { 
setTimeout(function() { 
    var text = ""; 
    var i = 170; 
    while (i < 3500) { 
     text += "<br>The number is " + i; 
     i+=170; 
    }, 1000) } 

document.getElementById("counter").innerHTML = text; 
} 
</script> 

</body> 
</html>

任何想法如何，我可以讓這個什麼東西有些是錯我的代碼？

來源

2015-10-27 Hauk1

不要使用內嵌的JavaScript（JavaScript的HTML裏面元素屬性），這是可怕的可維護性和可讀性。

你似乎有一個關於如何超時，間隔和while循環工作，你想要的是一個區間的誤解。

定義一個計數變量的事件偵聽器功能之外，則在區間的每個迭代遞增一計數變量，並通過170

乘上數我在那裏加入一點點地隱藏按鈕一旦被點擊，只是爲了阻止用戶重新啓動計數器。

var clicker = document.getElementById('clicker'); 
 
var counter = document.getElementById('counter'); 
 
var count = 0; 
 

 
clicker.onclick = function() { 
 
    setInterval(function() { 
 
    counter.textContent = "The number is " + ++count * 170; 
 
    }, 1000); 
 
    clicker.style.display = 'none'; 
 
}

<p>Click the button see how much AirHelps market increases by every second.</p> 
 

 
<button id="clicker">See it now</button> 
 

 
<p id="counter"></p>

來源

2015-10-27 19:18:19

您需要使用setInterval，不setTimeout`。請注意，如果您單擊該按鈕，它將重置您的計時器。

您還需要聲明var i和var text超出區間的範圍，否則它們也會在每次迭代中重置。

來源

2015-10-27 19:13:54

好了，所以加法器變量應該超時功能之外聲明，因爲如果不是要更換的價值。你應該使用的setInterval

var p =0; 

function counterFunction(){ 
setInterval(function(){ p+=170; 
console.log('value of p '+p); 
}, 3000); 
}

，如果你不想在這裏推出自己是一個很好的反 http://keith-wood.name/countdown.html

來源

2015-10-27 19:17:30 jstuartmilne

'p'在170遞增下去，不是1。這是錯誤的。 –

謝謝你，編輯了回覆 – jstuartmilne

有幾件事你的代碼錯誤。除其他事項外：

您i變量是在錯誤的地方宣佈爲重用
您的結束括號是放錯了地方的回調函數
你使用的是while環，它運行同步，而你真的只想使用setInterval呼叫。

這應該工作：

function counterFunction() { 
 
    var i = 170; 
 
    var text = ""; 
 
    var interval = setInterval(function() { 
 
    text += "<br>The number is " + i; 
 
    i+=170; 
 
    document.getElementById("counter").innerHTML = text; 
 
    if (i >= 3500) { 
 
     clearInterval(interval); 
 
    } 
 
    }, 1000); 
 

 
}

<p>Click the button see how much AirHelps market increases by every second.</p> 
 

 
<button onclick="counterFunction()">See it now</button> 
 

 
<p id="counter"></p>

來源

2015-10-27 19:17:31 StriplingWarrior

http://jsfiddle.net/mblenton/Le4vxzrn/2/

function counterFunction() { 
    var text = ""; var i = 170; var delay = 0; var k = 1; 
    while (i < 3500) { 
     text = "The number is " + i; 
     i += 170; 
     delay = k * 1000; 
     doSetTimeout(text, delay); 
     k++; 
    } 
} 

function doSetTimeout(text, delay) { 
    setTimeout(function() { 
    document.getElementById("counter").textContent = text; 
}, delay); 
}

來源

2015-10-27 19:42:29

回答

相關問題