如何显示自某个日期以来的年、月、周和日
how to display years, months, weeks and days since a date
希望你一切都好,
我一直在努力寻找一种方法来显示自特定日期(年、月、周和日)以来经过的时间量。我找到的最接近的是下面这个,但我很清楚如何让它显示年份和月份。
如有任何提示,我们将不胜感激。
谢谢
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"> </div>
—
感谢之前 post 的建议,遗憾的是我已经尝试过了,我只能让它工作两个实际日期之间的差异,我现在不能让它自动设定结束日期所以它会自动计算为时间在继续。
—
作为 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>
简单,近似的区别
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) {
var m1 = moment(Date.now())
var m2 = moment(new Date(thenString))
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/moment@2.18.1"></script>
<script src="https://unpkg.com/moment-precise-range-plugin@1.2.3"></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>
我不是 IT 专家,所以可能有更好的方法,但我所做的似乎有效。可以在这里看到一个例子:Date difference in action
我的方法不是算出从第一次约会开始的天数差异,而是算出 'to date' 中的日期位置与 'from date' 中的日期位置。也就是说,在我 60 岁生日那天,我出生后有 15 个闰年,但这些日子不算在内。我是60岁不是60岁零15天
为了证明我不是 IT 专家,我无法 post 代码,但您可以查看示例中的源代码。
顺便说一句,我只使用 chrome / edge 所以它没有在其他平台上测试过。
希望你一切都好,
我一直在努力寻找一种方法来显示自特定日期(年、月、周和日)以来经过的时间量。我找到的最接近的是下面这个,但我很清楚如何让它显示年份和月份。
如有任何提示,我们将不胜感激。
谢谢
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"> </div>
— 感谢之前 post 的建议,遗憾的是我已经尝试过了,我只能让它工作两个实际日期之间的差异,我现在不能让它自动设定结束日期所以它会自动计算为时间在继续。
— 作为 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>
简单,近似的区别
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) {
var m1 = moment(Date.now())
var m2 = moment(new Date(thenString))
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/moment@2.18.1"></script>
<script src="https://unpkg.com/moment-precise-range-plugin@1.2.3"></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>
我不是 IT 专家,所以可能有更好的方法,但我所做的似乎有效。可以在这里看到一个例子:Date difference in action
我的方法不是算出从第一次约会开始的天数差异,而是算出 'to date' 中的日期位置与 'from date' 中的日期位置。也就是说,在我 60 岁生日那天,我出生后有 15 个闰年,但这些日子不算在内。我是60岁不是60岁零15天
为了证明我不是 IT 专家,我无法 post 代码,但您可以查看示例中的源代码。 顺便说一句,我只使用 chrome / edge 所以它没有在其他平台上测试过。