4.8進度條
阿新 • • 發佈：2018-04-08
left rip timeout ndb 取字符串 oat ava 擴大 藍色
進度條 <div id="tiao" style="width:500px; height:30px; border:1px solid #333;">
<div id="jindu" style="width:0px; height:30px; background-color:#00F;">0%</div>
js部分 window.setTimeout("tiao()",20) function tiao() { var y = document.getElementById("tiao"); var z = document.getElementById("jindu"); var l = y.style.width; var i = z.style.width; var m = parseInt(l.substr(0,l.length-2)); var n = parseInt(i.substr(0,l.length-2)); if(n<m) { n = n+2; jindu.style.width = n+"px"; window.setTimeout("tiao()",20) } } 獲取兩個div的寬，讓第二個用間隔或延遲遞加到等於第一個的寬 獲取屬性截取字符串取整 比較
<style type="text/css"> #kuang{ width:800px; height:300px; } #zuo{ height:300px; background-color:red; float:left;} #you{ height:300px; background-color:blue; float:left;} #an{ width:50px; height:50px; background-color:#000; position:absolute; top:125px; } </style></head> <body> <div id="kuang"> <div id="zuo" style="width:200px;"></div> <div id="you" style="width:600px;"></div> </div> <div id="an" onclick="Zou()" ondblclick="hui()" style="left:180px;"></div> </body> <script type="text/javascript"> var id; function Zou() { //執行間隔語句 id = window.setInterval("Jin()",20); } //調起的函數 function Jin() { //改變紅色的寬度 var zuo = document.getElementById("zuo"); var zw = zuo.style.width; //截取字符串 var zc = parseInt(zw.substr(0,zw.length-2)); if(zc>=600) { window.clearInterval(id); return; } zc = zc+2; zuo.style.width = zc+"px"; //藍色的寬度 var you = document.getElementById("you"); var yw = you.style.width; var yc = parseInt(yw.substr(0,yw.length-2)); yc = yc-2; you.style.width = yc+"px"; //黑色的位置 var an = document.getElementById("an"); var al = an.style.left; var ac = parseInt(al.substr(0,al.length-2)); ac = ac+2; an.style.left = ac+"px"; }
點擊黑色紅色向右擴大 ， 藍色向右縮小， 圖片的一種效果
4.8進度條