Question

我在javascript中创建了一个灯箱，我在其中放置了一个进度条，我也用javascript创建了它。我的问题是，当我试图在我的灯箱内插入第二个进度条时，只有第一个工作。知道如何解决这个问题吗？

这是我的jsfiddle：http://jsfiddle.net/QHMKk/3/

我的代码是这样的：

我的javascript是：

function show() {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}

function start() {
var stepSize = 50;
setTimeout((function() {
var filler = document.getElementById("filler"),
percentage = 0;
return function progress() {
  filler.style.height = percentage + "%";
  percentage +=1;
  if (percentage <= 100) {
    setTimeout(progress, stepSize);
 }
}

}()), stepSize);
}


function start() {
var stepSize = 50;
setTimeout((function() {
var filler2 = document.getElementById("filler2"),
percentage = 0;
return function progress() {
  filler.style.height = percentage + "%";
  percentage +=1;
  if (percentage <= 100) {
    setTimeout(progress, stepSize);
 }
}

}()), stepSize);
}

这是我的HTML：

<a href = "javascript:void(0)" onclick = "show(); start();"> OPEN</a>

  <div id="light" class="white_content_stats">

  <div class="prog">
    <div id="filler" class="filler"></div>
  </div>
  </br> 
  <div class="prog2">
    <div id="filler2" class="filler2"></div>
  </div>


<a href = "javascript:void(0)" onclick = " document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'; "> 
</br>CLOSE</a>

这是我的CSS：

  .black_overlay_stats{
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 50%;
        z-index:1001;
        -moz-opacity: 0.6;
        opacity:.70;
        filter: alpha(opacity=70);
    }
    .white_content_stats {
        display: none;
        position:fixed;
        top: 15%;
        width: 300px;

        padding: 30px;
        margin-left:10px;
        background-color:#F2F2F2;   

        border-radius: 0px;
        box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.6);    
        z-index:1002; 
    }



.prog {
    height: 100px;
    width: 30px;
    border: 1px solid white;
    position: relative;
}
.filler {
    height: 0%;
    width: 30px;
    position: absolute;
    bottom: 0;
    background-color: grey;
}


.prog2 {
    height: 100px;
    width: 30px;
    border: 1px solid white;
    position: relative;
}
.filler2 {
    height: 0%;
    width: 30px;
    position: absolute;
    bottom: 0;
    background-color: grey;
}

Answer 1

您定义了2个具有相同名称start的函数，因此将使用第二个函数并且仅运行它，因此您只能看到1个进度条工作。您可以修改函数start，使其接受id这样的参数：

function start(id) {
    //...
    var filler = document.getElementById(id)
    //...
}

然后同时拨打start('filler')和start('filler2')：

<a href = "javascript:void(0)" onclick = "show(); start('filler'); start('filler2');"> OPEN</a>

Updated Demo.

请注意，您不应使用内嵌事件属性。

灯箱内有2个不同的进度条

1 个答案:

Updated Demo.