这篇博客介绍了如何创建一个以秒计数的计数器，通过HTML和JavaScript实现。当点击开始按钮时，input标签内的数字开始递增，而点击停止按钮则会结束计数。关键在于JavaScript的事件绑定和setInterval/clearInterval函数的使用。
今天我们来学习以秒计数的计数器，点击开始计数按钮后input标签会开始计数，然后点击停止计数则会停止计数。
- 代码
1.HTML：设置一个input标签使显示的数字在input标签里面显示，两个button按钮用于开始与停止计数。
<body>
<input type="text" value="0" id="number">
<button id="start">开始计数</button>
<button id="stop">停止计数</button>
</body>
- 2.JavaScript：我们先给button按钮一个“id”，然后获取到元素，然后绑定这个按钮的点击事件（onclick）。
- 然后获取input标签，我们注意在后面要加上“.value”属性，这个获取的是文本框里的内容属性。接着就是把数值设为“0”，然后让代码带动数值变化，然后设置每次计数的时间点。
- 最后设置 clearInterval（）停止计数。
<script>
window.onload = function(){
var timer = 0;
var num = 0;
var numbers=document.getElementById("number");
document.getElementById("start").onclick = function(){
timer = setInterval(function(){
num++;
numbers.value=num;
},1000)
}
document.getElementById("stop").onclick = function(){
clearInterval(timer);
}
}
</script>
总结：此案例所用到的关键技术为JavaScript，我把这个案例归类为点击事件，主要是获取ID名以及利用获取到的元素带入点击事件中，实现数字的自增效果以及停止计数效果。
这是我所学到的JavaScript案例，所以我要分享给你们，希望可以帮助到你们。
以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！
扫一扫
3007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
