进度条效果
<style type="text/css"> *{ margin:0px auto; padding:0px; } #wai{ 100px; height:20px; margin-top:100px; border:1px solid #000; } #nei{ 0%; height:20px; float:left; background-color:#00F; } </style> </head> <body> <div id="wai"> <div id="nei"> </div> <br /> <br /> <input type="button" value="点击" onclick="zou()" /> </div> </body> <script type="text/javascript"> var a=0; function zou(){ if(a<100){ a++; } document.getElementById("nei").style.width=a+"%"; window.setTimeout("zou()",100); } </script>
<style type="text/css"> *{ margin:auto; padding:0px;} #index_wai{ 800px; height:500px; } #index_liebiao{ 100%; height:50px; } .list{ 100px; height:50px; float:left; } .item{ 100%; height:400px; } </style> </head> <body> <div id="index_wai"> <div id="index_liebiao"> <div class="list" onclick="show('one')" style="background-color:#0FF"></div> <div class="list" onclick="show('two')" style="background-color:#0F0"></div> <div class="list" onclick="show('three')" style="background-color:#FF0"></div> <div class="list" onclick="show('four')" style="background-color:#F0F"></div> </div> <div class="item" id="one" style="background-color:#0FF"></div> <div class="item" id="two" style="background-color:#0F0; display:none"></div> <div class="item" id="three" style="background-color:#FF0; display:none"></div> <div class="item" id="four" style="background-color:#F0F; display:none"></div> </div> </body> <script type="text/javascript"> function show(id){ var d=document.getElementsByClassName("item"); for(var i=0;i<d.length;i++){ d[i].style.display="none"; } document.getElementById(id).style.display="block"; } </script>
