尝试使用未来日期创建Javascript时钟

时间:2015-10-30 07:49:43

标签: javascript date

我正在尝试创建一个从当前日期开始的3个月,15天和280年的Javascript时钟...到目前为止,我已经设法弄清楚如何让月份和年份显示出来正确...但例如当前日期显示为“2295年12月45日星期五”我想知道如何得到它所以正确的日期将读作2296年1月14日。

到目前为止,这是我的代码:

    function date_time(id)
    {
    date = new Date;
    year = date.getFullYear() + 280;
    month = date.getMonth() + 3;
    months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
    if(month = "00") {d = 31} if(d>31);
    if(month = "01") {d = 28} if(d>28);
    if(month = "02") {d = 31} if(d>31);
    if(month = "03") {d = 30} if(d>30);
    if(month = "04") {d = 31} if(d>31);
    if(month = "05") {d = 30} if(d>30);
    if(month = "06") {d = 31} if(d>31);
    if(month = "07") {d = 31} if(d>31);
    if(month = "08") {d = 30} if(d>30);
    if(month = "09") {d = 31} if(d>31);
    if(month = "10") {d = 30} if(d>30);
    if(month = "11") {d = 31} if(d>31);
    d = date.getDate() + 15;
    day = date.getDay();
    days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
    if (d < 10) {
        d = "0" + d;
    }
    h = date.getHours();
    if(h<10)
    {
            h = "0"+h;
    }
    m = date.getMinutes();
    if(m<10)
    {
            m = "0"+m;
    }
    s = date.getSeconds();
    if(s<10)
    {
            s = "0"+s;
    }
    result = ''+days[day]+', '+months[month]+' '+d+', '+year+' '+h+':'+m+':'+s;
    document.getElementById(id).innerHTML = result;
    setTimeout('date_time("'+id+'");','1000');
    return true;
    }

5 个答案:

答案 0 :(得分:1)

没那么困难,试试这个。

check fiddle

// 3个月15天280个

$(document).ready(function(){
 var date = new Date();
 var newDate = new Date(date.getFullYear()+280,date.getMonth()+2,date.getDate()+15);// I m adding 2 to month because it returns from 0-11 not from1-12 thats why for 3 months later i m adding 2.
    alert("Today : "+ date);
    alert("after 3 months and 15 days and 280 Years : "+newDate);
});

答案 1 :(得分:1)

OAD的答案几乎没有,但结果的时间不正确。

我稍微扩展了他的想法(只是一个样本,而不是一个完整的解决方案):

from XXX import *

答案 2 :(得分:1)

假设这是在这个日期(2296年2月14日),而不是将来这么多年/月/日。如果计算到特定日期工作到UTC时间,那么无论你在哪里,你仍然会得到相同的日期。

var t = new Date(); // get time.
t.setUTCDate(t.getUTCDate() + 15);  // calculate in universal time
t.setUTCMonth(t.getUTCMonth() + 3);
t.setUTCFullYear(t.getUTCFullYear() + 280);
console.log(t) // display local time

答案 3 :(得分:1)

您的代码存在一些问题:

function date_time(id)
{
date = new Date;

代码应缩进以便于阅读,变量应与 var 保持在本地。在没有()的情况下调用新日期是可以的,但使用括号更清楚:

function date_time(id) {
  var date = new Date();
  var year = date.getFullYear() + 280;
  var month = date.getMonth() + 3;

然后:

months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

使用数组初始化器创建数组更简洁:

var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 
            'August', 'September', 'October', 'November', 'December'];

以下内容:

if(month = "00") {d = 31} if(d>31);

第二个 if 块什么都不做。特定月份的天数基于月份和年份。这里有很多答案如何做到这一点,但它可以很简单(给定一个名为 date 的Date对象):

var daysInMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();

d 的值会立即被覆盖(并且是您错误的来源):

d = date.getDate() + 15;
day = date.getDay();

仍然是原始日。

days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');

同样,数组文字会更清晰。以下填充单位数字:

if (d < 10) {
    d = "0" + d;
}

等等。编写一个简短函数来填充最多3个零的数字更简单:

function pad(n, c) {
  return ('000' + n).slice(-1*c);
}

并使用它:

pad(3, 3); // '003'

result = ''+days[day]+', '+months[month]+' '+d+', '+year+' '+h+':'+m+':'+s;
document.getElementById(id).innerHTML = result;
setTimeout('date_time("'+id+'");','1000');

要确保超时在下一个完整秒后运行(因此在每次调用后都不会跳过,所以请使用当前毫秒设置延迟:

var lag = 1020 - date.getMilliseconds();

无论如何,最终的功能可能如下:

function date_time(id) {
  var date = new Date();

  // Increment date by 280 years, 3 months and 15 days
  date.setFullYear(date.getFullYear() + 280, date.getMonth() + 3, date.getDate() + 15)

  // Arrays for month and day names
  var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July',
                'August', 'September', 'October', 'November', 'December'];
  var days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');

  // Pad function
  function pad(n, c) {
    return ('000' + n).slice(-1*c);
  }

  // Set the lag to the next call
  var lag = 1020 - date.getMilliseconds();

  // Format for output
  var dateString = days[date.getDay()] + ', ' +
                   months[date.getMonth()] + ' ' +
                   date.getDate() + ', ' +
                   date.getFullYear() + ' ' +
                   pad(date.getHours(), 2) + ':' +
                   pad(date.getMinutes(), 2) + ':' +
                   pad(date.getSeconds(), 2);
  document.getElementById(id).innerHTML = dateString;
  setTimeout('date_time("' + id + '")', lag);
}

答案 4 :(得分:0)

您可以通过jquery和html轻松实现: HTML:

<input type="text" name="TodayDate" id="TodayDate" />
<input type="text" name="futureDate" id="futureDate"  />
<input type="text" name="formattedDate" id="formattedDate"  />

JQUERY:

$(document).ready(function(){
    var todaydate = new Date();
    var futureDate = new        Date(todaydate.getFullYear()+280,todaydate.getMonth()+3,todaydate.getDate()+15);
    $("#TodayDate").val(todaydate);
    $("#futureDate").val(futureDate);
   });

更多你也可以根据需要设置格式,在页面中添加jquery ui插件。为此你需要这个代码:

$("#formattedDate").val($.datepicker.formatDate('dd M yy', new Date(futureDate)));

如果你想让未来的月份,年份和日子分离得更容易