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

lightbox with 2 different progress bar inside

本文关键字：2个      更新时间：2023-09-26

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

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

我的代码是这样的:

my javascript is:

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;
}

您定义了两个具有相同名称的函数start，因此将使用第二个函数并且只运行它，因此您可以看到只有一个进度条有效。您可以修改函数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>

更新演示。

注意你不应该使用inline事件属性

相关文章：