Question

我正在使用div标签来制作自定义进度条，而不是使用HTML5。我写了一些不完美的代码。在这里的代码我试图获取内部div的宽度使用javascript并解析为整数以获得数字格式的宽度运行第一个IF条件但我得到内部div的宽度null所以第一个IF条件将永远不会执行。第二个IF条件只是检查进度是否完成然后将div宽度清除回0px并关闭间隔函数。

<style type="text/css">
    #outer{
        width:300px; 
        height:50px; 
        background:#000; 
        border:1px solid #000;
    }
    #inner{
        background-color: rgba(255,255,255,0.5);
        margin:2px;
        width:0px; 
        height:46px;
    }
</style>
<script type="text/javascript">
    var increaseWidth = 0;
    function getID(element){
        return document.getElementById(element);
    }
    function progressBarEvent(){
        var interval = setInterval(function(){
                if(parseInt(getID('inner').style.width) < 296) {
                    getID('inner').style.width = increaseWidth+"px";
                    increaseWidth++;
                }
                if(getID('inner').style.width) == "296px"){
                getID('inner').style.width == "0px";
                increaseWidth = 0;
                clearInterval(interval);
                }
            }
            ,5
        );
    }
</script>
<div id="outer">
    <div id="inner">
    </div>
</div>
<button onclick="progressBarEvent()">Upload</button>

Answer 1

问题在于，第一次没有设置width样式时，这个表达式

parseInt(getID('inner').style.width)

将返回NaN。所以你永远不会增加宽度。你可以像这样解决它：

if ((parseInt(getID('inner').style.width) || 0) < 296) {
    getID('inner').style.width = increaseWidth + "px";
    increaseWidth++;
}

同样验证您的代码，目前它包含此行中的语法错误：

if(getID('inner').style.width) == "296px"){
//   extra ) ----------------^

还有一个问题：将getID('inner').style.width == "0px";更改为getID('inner').style.width = "0px";因为您指的是此处的分配，而非比较。

使用Javascript增加Div使其像进度条一样工作

1 个答案:

演示：http://jsfiddle.net/hrtkwbx9/1/