2017-07-27 16 views
1

希望大家都好,顯示年,月,周,日,如何自日期

我一直在努力尋找一種方法來顯示自特定日期時間的流逝的時間量,幾個月,幾周和幾天。最近我發現,這是下面,但我可以相當努力如何讓它顯示年份和月份。

任何提示將不勝感激。

感謝

window.onload = function() { 
 
    doTime('jan,01,2017,00:00:01'); 
 
} 
 

 
function doTime(then) { 
 

 
    now = new Date(); 
 
    then = new Date(then); 
 

 
    difference = (now - then); 
 

 
    days = Math.floor(difference/(60 * 60 * 1000 * 24) * 1); 
 
    hours = Math.floor((difference % (60 * 60 * 1000 * 24))/(60 * 60 * 1000) * 1); 
 
    mins = Math.floor(((difference % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000))/(60 * 1000) * 1); 
 
    secs = Math.floor((((difference % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000))/1000 * 1); 
 

 
    document.getElementById('timer').firstChild.nodeValue = 
 

 
    +days + ' days ' + hours + ' hours ' + mins + ' minutes ' + secs + ' seconds'; 
 
    clearTimeout(doTime.to); 
 
    doTime.to = setTimeout(function() { 
 
    doTime(then); 
 
    }, 1000); 
 
}
<div id="timer">&nbsp;</div>

- 感謝以前的職位的建議,可惜我已經試過了,我只能得到它的工作兩個實際日期之間的區別,我不能讓它現在自動完成結束日期,所以隨着時間的推移它會自動計數。

- 我已經做了一些更多的擺弄,並設法達到這一點,對js來說是新的,你們會說這很接近嗎?感謝

var startDateTime = new Date(2012,5,24,09,43,0,0); // YYYY (M-1) D H m s 
(start time and date from DB) 
var startStamp = startDateTime.getTime(); 

var newDate = new Date(); 
var newStamp = newDate.getTime(); 

var timer; 

function updateClock() { 
    newDate = new Date(); 
    newStamp = newDate.getTime(); 
    var diff = Math.round((newStamp-startStamp)/1000) 

    var years = Math.floor(diff/(12*4.3479*7*24*60*60)); 
    diff = diff-(years*12*4.3479*7*24*60*60) 


    var months = Math.floor(diff/(4.3479*7*24*60*60)); 
    diff = diff-(months*4.3479*7*24*60*60) 

    var weeks = Math.floor(diff/(7*24*60*60)); 
    diff = diff-(weeks*7*24*60*60) 

    var days = Math.floor(diff/(24*60*60)); 
    diff = diff-(days*24*60*60); 
    var hours = Math.floor(diff/(60*60)); 
    diff = diff-(hours*60*60); 
    var mins = Math.floor(diff/(60)); 
    diff = diff-(mins*60); 
    var secs = diff; 

    document.getElementById("time-elapsed").innerHTML = years+" years, 
"+months+" months, " +weeks+" weeks, " +days+" days, "+hours+" hours and 
"+mins+" minutes,"; 
} 

setInterval(updateClock, 1000); 



<div id="time-elapsed"></div> 
+3

嘗試使用'momentjs'庫。這將有助於在JavaScript中處理日期:https://momentjs.com/ –

+1

什麼是不工作? – Salketer

+0

[JavaScript中的兩個日期在年,月,日中的差異]的可能重複(https://stackoverflow.com/questions/17732897/difference-between-two-dates-in-years-months-days-in-javascript ) – Salketer

回答

0

簡單,近似差異

function calculateDifference(thenString) { 
 
    const second = 1000 
 
    const minute = 60 * second 
 
    const hour = 60 * minute 
 
    const day = 24 * hour 
 
    const month = 30 * day // approximately 
 
    const year = 365 * day // approximately 
 

 
    const now = new Date(); 
 
    const then = new Date(thenString); 
 

 
    let difference = (now - then); 
 
    const time = [{ year }, { month }, { day }, { hour }, { minute }, { second }].map((item, i, a) => { 
 
    const [[unitName, unit]] = Object.entries(item) 
 
    const units = difference/unit | 0 
 
    difference -= unit * units 
 
    const maybePlural = units === 1 ? "" : "s" 
 
    return units > 0 ? units + " " + unitName + maybePlural : "" 
 
    }).filter(x => x) 
 

 
    const formattedTime = time.length > 1 ? [...time.slice(0, -1), "and", time.slice(-1)].join(" ") : time[1] 
 
    return formattedTime 
 
} 
 

 
function displayDifference() { 
 
    displayBox.textContent = calculateDifference(dateInput.value + ", " + timeInput.value) 
 
} 
 

 
const dateInput = document.querySelector(".date") 
 
const timeInput = document.querySelector(".time") 
 
const displayBox = document.querySelector(".js-display-difference") 
 
dateInput.addEventListener("change", displayDifference) 
 
timeInput.addEventListener("change", displayDifference) 
 
displayDifference() 
 
setInterval(displayDifference, 1000)
<h3> 
 
    since 
 
<input class="date" type="date" value="2017-01-01"/> 
 
<input class="time" type="time" value="00:00"/> 
 
elapsed 
 
<span class="js-display-difference"></span> 
 

 
</h3>

momentjs精確差異和precise range plugin

function calculateDifference(thenString) { 
 
\t var m1 = moment(Date.now()) 
 
\t var m2 = moment(new Date(thenString)) 
 
\t var diff = moment.preciseDiff(m1, m2) 
 
    return diff 
 
} 
 

 
function displayDifference() { 
 
    displayBox.textContent = calculateDifference(dateInput.value + ", " + timeInput.value) 
 
} 
 

 
const dateInput = document.querySelector(".date") 
 
const timeInput = document.querySelector(".time") 
 
const displayBox = document.querySelector(".js-display-difference") 
 
dateInput.addEventListener("change", displayDifference) 
 
timeInput.addEventListener("change", displayDifference) 
 
displayDifference() 
 
setInterval(displayDifference, 1000)
<script src="https://unpkg.com/[email protected]"></script> 
 
<script src="https://unpkg.com/[email protected]"></script> 
 
<h3> 
 
    since 
 
<input class="date" type="date" value="2017-01-01"/> 
 
<input class="time" type="time" value="00:00"/> 
 
elapsed 
 
<span class="js-display-difference"></span>

+0

不可思議!謝謝你有這麼多 – lionnn

+0

再次感謝,我只是想知道是否有一種簡單的方法讓這樣的腳本在safari上工作? – lionnn

+0

@lionnn safari有什麼問題? – marzelin