如何在时间进度条中放置时间显示框

我有时间进度条。我使用这个code.i需要时间亚军内的蓝色框。如何在时间进度条中放置时间显示框

我怎么能解决这个问题，意味着当黄色条移动取决于时间需要时间

显示框。

var timer = 0, 
    perc = 0, 
    timeTotal = 2500, 
    timeCount = 1, 
    cFlag; 

function updateProgress(percentage) { 
    var x = (percentage/timeTotal)*100, 
     y = x.toFixed(3); 
    $('#pbar_innerdiv').css("width", x + "%"); 
    $('#pbar_innertext').text(y + "%"); 
} 

function animateUpdate() { 
    if(perc < timeTotal) { 
     perc++; 
     updateProgress(perc); 
     timer = setTimeout(animateUpdate, timeCount); 
    } 
} 

$(document).ready(function() { 
    $('#pbar_outerdiv').click(function() { 
     if (cFlag == undefined) { 
      clearTimeout(timer); 
      perc = 0; 
      cFlag = true; 
      animateUpdate(); 
     } 
     else if (!cFlag) { 
      cFlag = true; 
      animateUpdate(); 
     } 
     else { 
      clearTimeout(timer); 
      cFlag = false; 
     } 
    }); 
});

#pbar_outerdiv { cursor: pointer; }

来源

2016-09-20 aswathy

你可以创建一个小提琴？ – user6838959

@ user6838959：为什么要使用小提琴？所以也有代码编辑器..只需点击编辑器工具栏上的<<>按钮 –

您可以试着修改这里的措辞。我很难理解你想做什么。 – Stewart

-1

检查this JSFiddle。您可以根据需要调整CSS：颜色，大小等。

基本上我把#pbar_innerdiv以外的文字放在span框中。

<div id="pbar_outerdiv"> 
    <div id="pbar_innerdiv"></div> 
    <span id="pbar_innertext">Click!</span> 
</div>

编辑

所以我编辑的脚本，我希望现在它符合您的需求：JSFiddle Link。这是我使用的脚本：

var timer = 0, 
    perc = 0, 
    percIncreaser, 
    timeTotal = 2500, //Only change this value time according to your need 
    timeCount = 1, 
    secondsCount=0, 
    cFlag; 

function updateProgress(percentage,time) { 
    //var x = (percentage/timeTotal)*100; 
    $('#pbar_innerdiv').css("width", percentage + "%"); 
    $('#pbar_innertext').text(time/1000 + "s"); 
} 

function animateUpdate() { 
    if(perc < timeTotal) { 
     perc+=percIncreaser; 
     secondsCount+=10; 
     updateProgress(perc,secondsCount); 
     if(perc>=100) clearTimeout(timer); 
     else timer = setTimeout(animateUpdate, timeCount); 
    } 
} 
$(document).ready(function() { 
    $('#pbar_outerdiv').click(function() { 
     percIncreaser = 100/timeTotal*10; 
     if (cFlag == undefined) { 
      clearTimeout(timer); 
      perc = 0; 
      cFlag = true; 
      animateUpdate(); 
     } 
     else if (!cFlag) { 
      cFlag = true; 
      animateUpdate(); 
     } 
     else { 
      clearTimeout(timer); 
      cFlag = false; 
     } 
    }); 
});

来源

2016-09-20 11:42:22

而不是显示百分比我想要一个时间 – aswathy

倒计时或计数？ @aswathy –

你已经拥有的实际时间中的UpdateProgress（）方法，因此其作为改变线的比例设置为这个简单：

$('#pbar_innertext').text((percentage/100).toFixed(2) + " s");

的jsfiddle： https://jsfiddle.net/McNetic/hnfRe/395/

编辑：使用不同的浏览器，我现在看到下一个问题：动画所花的时间可能比公布的2500毫秒时间（因为每秒1000帧的更新频率非常高）。所以，你应该少做动画帧，并计算实际时间测量的百分比基数，这样的：

https://jsfiddle.net/McNetic/hnfRe/396/

来源

2016-09-20 11:44:34

我想只显示它在黄色时间结束时的暂停时间吧 – aswathy

你的意思是这样的？ https://jsfiddle.net/McNetic/hnfRe/397/ –

@ nicolai亚我想显示时间只显示暂停时间 – aswathy

如何在时间进度条中放置时间显示框

回答

相关问题