搜索文档
首页
HTML/CSS
JavaScript
服务端开发
Java教程
移动端
数据库
当前位置:
首页
JavaScript
JavaScript 教程
JavaScript基础教程
源代码
清空
点击运行
<!DOCTYPE html> <html> <title>JavaScript 定时器进度条示例 - 基础教程(div.cn)</title> <head> <style> #progress { width: 100%; height: 30px; position: relative; background-color: #ddd; border-radius: 10px; overflow: hidden; } #progress-bar { background-color: #d9534f; width: 10px; height: 30px; line-height: 30px; position: absolute; text-align: center; color: white; background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-size: 40px 40px; } </style> </head> <body> <h1>JavaScript进度条</h1> <div id="progress"> <div id="progress-bar"></div> </div><br> <button onclick="start()">开始进度</button> <button onclick="stop()">结束进度</button> <script> var i = 0; var bar = document.getElementById("progress-bar"); var t; function start() { t = setInterval(progress, 60); } function progress(){ if(i < 100){ i++; bar.style.width = i + "%"; bar.innerHTML = i + " %"; } else { clearInterval(t); } } function stop() { clearInterval(t); } </script> </body> </html>
运行结果