JavaScript时钟向上计数包括几个月和几年

时间:2014-05-24 23:33:45

标签: javascript clock

我对JavaScript的经验很少,所以对于这个问题必须有一点点的掌控。我需要一个简单,没有大惊小怪的JavaScript时钟,按时间顺序显示该订单中的年,月和日,开始日期为2013年9月26日。显然,这些年将不会在今年9月26日开始。而且我需要能够使用级联样式表来设置各种元素的样式。任何和所有的帮助将不胜感激。是的,我搜索了互联网。我发现时钟在网页加载时开始计数,而且只能达到几分钟。一个上升到几个小时,但它们似乎都没有达到数月或数年。再次,任何帮助将非常感激。

4 个答案:

答案 0 :(得分:2)

你似乎并不想要一个时钟,就像人类对时间的看法一样 - 在你的情况下,每个月的第26个时钟都会超过你的柜台。

   <!doctype html>
    <html lang="en">
    <head>
    <meta charset= "utf-8">
    <title>count up</title>
    <script>
    function monthLengths(y){
        var y=y || new Date().getFullYear();
        var feb= y%4== 0 && (y%100 || y%400== 0)? 29: 28;
        return [31, feb, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    }

    function ymdBetween(fromDay, toDay){
        var to, from= new Date(fromDay);
        if(!toDay && toDay!== 0) to= new Date();
        else to= new Date(toDay);

        var A= [], years= 0, months= 0, days= 0, 
        fromYear= from.getFullYear(), 
        fromMonth= from.getMonth(), 
        fromDate= from.getDate(), 
        toYear= to.getFullYear(), 
        toMonth= to.getMonth(), 
        toDate= to.getDate(),
        monthdays= monthLengths(toYear),
        years= toYear-fromYear;

        if(years){
            if(fromMonth>toMonth || (fromMonth== toMonth && fromDate>toDate)) years-= 1;
            if(years) A[0]= (years +' year');
        }
        if(fromMonth>toMonth || (fromMonth=== toMonth && fromDate>toDate)){
            months= 12-fromMonth+toMonth;
        }
        else{
            months= toMonth-fromMonth;
        }
        if(fromDate>toDate)--months;
        if(months) A[A.length]= (months +' month');

        if(fromDate>toDate){
            var lastmonthlength= monthdays[toMonth-1];
            if(lastmonthlength< fromDate)fromDate=lastmonthlength;
            days= lastmonthlength-fromDate+toDate;
        }
        else days= toDate-fromDate;
        if(days) A[A.length]= (days+' day');

        return A.map(function(itm){
            return parseInt(itm, 10)>1? itm+'s': itm;
        }).join(', ');
    }
    function printSince(){
        var str= document.getElementById('whenTxt').value,
        s=ymdBetween(str);
        alert(s)
        document.getElementById('sinceText').innerHTML='<h2>'+s+'</h2>';
    }
    window.onload=function(){
        document.getElementById('sinceBtn').onclick=printSince;
    }
    </script>

    </head>
    <body>
    <h1>Since When: <input id="whenTxt" type="text" value="September 26, 2013">
    <button id="sinceBtn" type="text">Display</button></h1>
    <div id="sinceText" style="margin-left:2em">&nbsp;</div>
    </body>
    </html>

答案 1 :(得分:1)

http://jsfiddle.net/9fQcL/3

我刚才为我的项目写了这篇文章。我希望它有所帮助。这给你一个开始。请注意,目前,我的代码可以在几天内完成,因此您必须对其进行修改以显示多年,几个月和一天,但您需要弄清楚。 ;)

var d = new Date();
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(2013,08,28);

var Y =  d.getFullYear();
var M = d.getMonth();
var D = d.getDate();

var secondDate = new Date(Y,M,D);

var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
document.getElementById("dd").innerHTML = diffDays+" days";
document.getElementById("since").innerHTML = "Since "+ firstDate;

同时,这实际上会做你想要的,在日期()之间计算天,月和年。

http://daycalc.appspot.com/09/28/2013

答案 2 :(得分:0)

您可以使用我的jQuery插件。 https://github.com/Masquerade-Circus/setDate.js

这就像写一样简单:

var dateContainer = $('#your/date/container/id');
setInterval(function(){
    dateContainer.setDate();
},1001);

您可以根据需要设置日期格式,甚至可以翻译日期。示例:

var dateContainer = $('#your/date/container/id');
setInterval(function(){
    dateContainer.setDate({format: "Today is: +l +j of +F of +Y. And the time is: +G:+ii +a."});
},1001);

您只需要传递两个日期之间的毫秒数。

答案 3 :(得分:0)

如果你需要更多的控制,一个复杂但更明确的方法就是:

http://jsfiddle.net/masqueradecircus/qPPU5/

var date2 = new Date("May 14, 2010 23:59:59"), date;
function aC(a){return a<10?('0'+a):a;}

setInterval(function(){
    date = new Date(), z = [date.getFullYear()-date2.getFullYear(),date.getDate()-date2.getDate(), date.getHours()-date2.getHours(), date.getMinutes()-date2.getMinutes(), date.getSeconds()-date2.getSeconds() ];
        if(z[4] < 0) z[3]-=1,z[4]=60+z[4];
        if(z[3] < 0) z[2]-=1,z[3]=60+z[3];
        if(z[2] < 0) z[1]-=1,z[2]=24+z[2];
        if(z[1] < 0) z[0]-=1,z[1]=30+z[1];
        $('.daysleft').html('It has been  <b>'+ aC(z[0]) +' years, '+ aC(z[1]) +' days, '+ aC(z[2]) +' hours '+ aC(z[3]) +' minutes and '+ aC(z[4]) +' secconds</b>.');
},1001);

结果:

It has been 04 years, 10 days, 02 hours 38 minutes and 31 secconds