您所在的位置:小祥子 » 编程 » JavaScript » 正文

Javascript进度条

时间:2015-06-27 编辑:Levice 来源:本站整理

一个简单的进度条演示。

<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>Process Bar</title>
<script>
var t;

function s(c)
{
    if(c<=100)
    {
        val.style.width=c+"%";
        percent.innerHTML=c+"%";
        btn.disabled=true;
        btnp.disabled=false;
        c=c+10;
        t=setTimeout("s("+c+")",500);
    }
    else
    {
        clearTimeout(t);
        btnc.disabled=false;
        btnp.disabled=true;
        return;
    }
}

function c()
{
    clearTimeout(t);
    val.style.width="0px";
    percent.innerHTML="0%";
    btn.disabled=false;
    btnc.disabled=true;
    btnp.disabled=true;
    btnp.value='Pause';
}

function p()
{
    var temp;
    if('Pause' == btnp.value)
    {
        clearTimeout(t);
        btnp.value='Go on';
        btnc.disabled=false;
    }
    else
    {
        temp=val.style.width;
        btnp.value='Pause';
        var k=parseInt(delEnd(temp));
        s(k);
        btnc.disabled=true;
    }   
}

function delEnd(str)
{
    var temp="";
    for(var i=0; i < str.length-1; i++)

    {
        temp=temp+str[i];
    }

    return temp;

}
</script>
</head>

<body>
<div id="bar" style="width:300px; height:30px; border:solid 1px; float:left;">
  <div id="val" style="height:100%; background-color:#03F; width:0px;"></div>
</div>
<div id="percent" style="float:left; line-height:30px;">0%</div>
<div style="clear:both"></div>
<br />
<input id="btn" type="button" value="Start"  />
<br />
<input id="btnc" type="button" value="Clear"  disabled />
<br />
<input id="btnp" type="button" value="Pause"  disabled />
</body>
</html>

感受:

1.在简单的页面里面,在<script>标签里面,可以直接使用id表示某个控件,而不需要使用document.getElementById()。

2.setTimeout()里面的命令可以使用字符串拼接

关键词: