<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>进度条</title> <style> .c{width: 700px;height: 90px;margin: 0 auto;} .c1 #t1{color: #999999;background-color: black;width: 835px;height: 50px;font-size: 50px;line-height: 50;} </style> <script> var M=""; var ID=0; var SD; window.onload=function () { cl() }; function pre() { var ele=document.getElementById("t1"); ele.value=M+ID+"%"; ID+=10; M+="██"; if (ID>100){clearInterval(SD);} } function cl() { if (ID!=110){ pre(); SD=setInterval(pre,1000);} } </script> </head> <body> <div class="c"> <div class="c1"> <input type="text" id="t1" onfocus="this.blur()"> </div></div> </body> </html>