如何创建一个显示带有递增，递减按钮的数字并从NUmber倒数到零的网页?

Question

我想用HTML，JAvascript和CSS做一个网站， 屏幕中将显示一个数字。用户可以使用按钮递减或递增预设值。开始/停止按钮将从显示的数字开始倒计时到零。当数字达到零时，页面会显示一个警报框。我知道只有html和css基础知识可以帮忙这是一个粗略的草图

。

Answer 1

这可能有助于您入门：

var intvl;
var valueContainer = document.getElementById("value");
document.getElementById("decrement").addEventListener("click", function(e){
var value = +valueContainer.textContent;
if(value){
valueContainer.textContent = value - 1;
}
});
document.getElementById("increment").addEventListener("click", function(e){
var value = +valueContainer.textContent;
valueContainer.textContent = value + 1;
});
document.getElementById("toggle").addEventListener("click", function(e){
if(intvl){
clearInterval(intvl);
} else {
var curr = +valueContainer.textContent;
intvl = setInterval(function(){
if(curr){
valueContainer.textContent = --curr;
} else {
clearInterval(intvl);
document.getElementById("messages").innerHTML = "Alert<br/>----------------<br/>Count reached 0!";
}
}, 1000);
}
});
document.getElementById("reset").addEventListener("click", function(e){
clearInterval(intvl);
valueContainer.textContent = 25;
document.getElementById("messages").innerHTML = "";
});

#messages {
text-align: center;
border: 1px solid grey;
width: 80%;
margin-bottom: 50px;
}
#wrapper {
text-align: center;
border: 1px solid grey;
display: inline-block;
width: 40%;
padding: 2px;
}
#wrapper > div {
display: inline-block;
}
body {
text-align: center;
}
#main > button, #controls > button {
border: 1px solid grey;
border-radius: 5px;
background-color: inherit;
padding: 2px 10px;
}
#controls {
margin-top: 10px;
}

<div id="wrapper">
<div id="messages">
&nbsp;
</div>
<div id="main">
<button id="decrement">-</button>
<span id="value">25</span>
<button id="increment">+</button>
</div><br/>
<div id="controls">
<button id="toggle">Start/Stop</button>
<button id="reset">Reset</button>
</div>
</div>