document操作例題4
阿新 • • 發佈：2018-04-09
inpu html http 判斷 寬度 樣式 tel 取整 -type
六.進度條
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
*{
margin:auto
}
#kuang{
height:30px;
border:2px solid #999}
#tiao{
height:30px;
background-color:red;
float:left}
</style>
</head>
<body>
<div id="kuang" style="width:600px;">
<div id="tiao" style="width:0px;"></div>
</div>
<input type="button" value="前進" onclick="Qian()"/>
<input type="button" value="後退" onclick="Hou()"/>
</body>
<script type="text/javascript">
var x; //定義變量x
var y;
function Qian()
{
x=window.setInterval("Jindu()",1); //將間隔操作賦值給變量x
window.clearInterval(y); //清除間隔變量y，在這可理解為當執行y操作時再執行x操作可以終止y操作
}
function Jindu()
{
var kuang=document.getElementById("kuang");
var tiao=document.getElementById("tiao");
var kc=parseInt(kuang.style.width); //將獲取到的樣式取整後賦值給變量kc
var tc=parseInt(tiao.style.width);
if(tc>=kc) //條件判斷
{
window.clearInterval(x); //清除間隔變量x，此時x已存有間隔操作
return; //條件符合的話用return終止函數向下執行。
}
tc=tc+2; //將寬度樣式累加
tiao.style.width=tc+"px";
}
function Hou()
{
y=window.setInterval("Houtui()",1);
window.clearInterval(x);
}
function Houtui()
{
var kuang=document.getElementById("kuang");
var tiao=document.getElementById("tiao");
var kc=parseInt(kuang.style.width);
var tc=parseInt(tiao.style.width);
if(tc<=0)
{
window.clearInterval(y);
return;
}
tc=tc-2;
tiao.style.width=tc+"px";
}
</script>
</html>
document操作例題4