如何显示自约会以来的年,月,周和日

时间:2017-07-27 11:05:31

标签: javascript html time counter countdown

希望你们一切顺利,

我一直在努力寻找一种方法来显示自特定日期以来的年,月,周和日所经过的时间。我发现的最接近的是下面的内容,但我可以很好地了解如何让它显示年份和月份。

任何提示都将不胜感激。

由于



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>
&#13;
&#13;
&#13;

- 感谢前一篇文章的建议,遗憾的是我已经尝试了,我只能让它来处理两个实际日期之间的差异,我不能让它自动生成结束日期,所以它随着时间的推移自动计数。

- 我已经做了一些更多的摆弄并设法达到这个目标,对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>

2 个答案:

答案 0 :(得分:0)

简单,近似差异

&#13;
&#13;
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)
&#13;
<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>
&#13;
&#13;
&#13;

momentjsprecise range plugin

的精确差异

&#13;
&#13;
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)
&#13;
<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> 
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我不是IT专家,所以也许有更好的方法,但是我所做的似乎可行。这里可以看到一个示例:Date difference in action

我的方法不是从第一个日期算起天数差异,而是从“开始日期”中的天数位置算出“截至日期”中的天数位置。即,在我60岁生日那天,我出生以来已经过了15个leap年,但这些日子不算在内。我今年60岁,而不是60岁15天。

为了证明我不是IT专家,我无法发布代码,但是您可以在示例中查看源代码。 顺便说一句,我只使用chrome / edge,因此未在其他平台上进行测试。