如何在時間進度條中放置時間顯示框

我有時間進度條。我使用這個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

如何在時間進度條中放置時間顯示框

回答

相關問題