Как я могу отобразить счетчик задолженности javascript, рассчитанный на $ .80/sec, с 1 января 2016 года?

Question

Мой клиент хочет, чтобы счетчик долгов показывал сумму задолженности, накопленную с 1 января 2016 года, поднимаясь на 0,80 центов в секунду. Очевидно, что я не могу обновить эту страницу при загрузке страницы, и я везде искал что-то, что сделало бы это. Короче говоря, я не мог найти то, что искал, поэтому я подумал, что смогу получить креатив с приведенным ниже кодом, используя обратный счетчик в обратном порядке и может устанавливать цифры равными правильной сумме долга.

Кроме того, я не математик, поэтому ответ может выглядеть мне в лицо.

Вот код, я использую прямо сейчас (от Роберта Hashemian - hashemian.com):

В моей index.html для отображения счетчика:

<script language="JavaScript"> 
TargetDate = "01/01/2016 12:00 AM"; 
BackColor = ""; 
ForeColor = "white"; 
CountActive = true; 
CountStepper = 1; 
LeadingZero = true; 
DisplayFormat = "$%%D%%,%%H%%,%%M%%,%%S%%"; 
FinishMessage = "It is finally here!"; 
</script> 

Javascript файл:

function calcage(secs, num1, num2) { 
    s = ((Math.floor(secs/num1))%num2).toString(); 
    if (LeadingZero && s.length < 2) 
    s = "0" + s; 
    return "<b>" + s + "</b>"; 
} 

function CountBack(secs) { 
    if (secs < 0) { 
    document.getElementById("cntdwn").innerHTML = FinishMessage; 
    return; 
    } 
    DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000)); 
    DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24)); 
    DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60)); 
    DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60)); 

    document.getElementById("cntdwn").innerHTML = DisplayStr; 
    if (CountActive) 
    setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod); 
} 

function putspan(backcolor, forecolor) { 
document.write("<span id='cntdwn' style='background-color:" + backcolor + 
       "; color:" + forecolor + "'></span>"); 
} 

if (typeof(BackColor)=="undefined") 
    BackColor = "white"; 
if (typeof(ForeColor)=="undefined") 
    ForeColor= "black"; 
if (typeof(TargetDate)=="undefined") 
    TargetDate = "12/31/2020 5:00 AM"; 
if (typeof(DisplayFormat)=="undefined") 
    DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; 
if (typeof(CountActive)=="undefined") 
    CountActive = true; 
if (typeof(FinishMessage)=="undefined") 
    FinishMessage = ""; 
if (typeof(CountStepper)!="number") 
    CountStepper = -1; 
if (typeof(LeadingZero)=="undefined") 
    LeadingZero = true; 


CountStepper = Math.ceil(CountStepper); 
if (CountStepper == 0) 
    CountActive = false; 
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990; 
putspan(BackColor, ForeColor); 
var dthen = new Date(TargetDate); 
var dnow = new Date(); 
if(CountStepper>0) 
    ddiff = new Date(dnow-dthen); 
else 
    ddiff = new Date(dthen-dnow); 
gsecs = Math.floor(ddiff.valueOf()/1000); 
CountBack(gsecs); 

Я не женат на какой-либо из приведенных выше кодов или идей, если у кого-то есть лучший. Спасибо всем, кто хочет помочь!

Answer 1

Это должно вас начать. Сначала получите текущий баланс, затем обновите его каждую секунду, используя setInterval. Вы можете выполнить весь рендеринг из функции setInterval.

var date1 = new Date("01/01/2016 00:00:00"); 
 
var date2 = new Date(); 
 

 
var diff = (date2.getTime() - date1.getTime())/1000; 
 
var debt = diff*.80 
 

 
setInterval (function() { 
 
    
 
    debt += .80; 
 
    console.log(debt.toFixed(2)); 
 
    
 
    
 
    }, 1000);

или что-то вроде этого

setInterval (function() { 

    var date1 = new Date("01/01/2016 00:00:00"); 
    var date2 = new Date(); 
    var diff = (date2.getTime() - date1.getTime())/1000; 
    var debt = diff*.80 
    console.log(debt.toFixed(2)); 

    }, 1000);