搜索文档
首页
HTML/CSS
JavaScript
服务端开发
Java教程
移动端
数据库
当前位置:
首页
JavaScript
JavaScript 教程
JavaScript基础教程
源代码
清空
点击运行
<!DOCTYPE html> <html> <title>JavaScript 计数器功能示例 - 基础教程(div.cn)</title> <head> <style> #result { color: #ec181e; font-size: 25vw; font-weight: 900; font-family: Lato; text-shadow: 0 6px 4px rgba(255, 100, 100, 0.6); } </style> </head> <body> <div id="result">0</div> <button onclick="startCount()">开始计数</button> <button onclick="stopCount()">停止计数</button> <p>单击上方的"开始计数"按钮以启动计时器。</p> <p> id="result"的DIV将永远计数,从0开始。</p> <p>点击"停止计数"按钮停止计数。</p> <p>单击"开始计数"按钮以再次启动计时器。</p> <script> var counter = 0; var is_timer_on = false; var t; function timedCount() { document.getElementById("result").innerHTML = counter; counter++; t = setTimeout(timedCount, 1000); } function startCount() { if (!is_timer_on) { is_timer_on = true; timedCount(); } } function stopCount() { clearTimeout(t); is_timer_on = false; } </script> </body> </html>
运行结果