<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> *{margin:0px auto; padding:0px;} #wai{width:100%; height:200px; margin-top:60px;} #zuobian{width:200px; height:15px; border:1px solid #F66;} #limian{width:0%; height:15px; background-color:#C00; margin-left:0px;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div id="wai"> <div id="zuobian"> <div id="limian"></div> </div> <br/> <input type="button" value="开始" id="h"/> </div> </body> <script type="text/javascript"> var bb = 0; var add; var aa = document.getElementById("h"); aa.onclick = function(){ add = window.setInterval("jia()",30) } function jia(){ if(bb<100){ bb++; }else{ window.clearInterval(add); } var limiana = document.getElementById("limian");limiana.style.width = bb+"%"; } </script> </html>
