尝试创建带有未来日期的 Javascript 时钟

Trying to create Javascript clock with future date

本文关键字:日期 Javascript 时钟 未来 创建      更新时间:2023-09-26

我正在尝试创建一个 Javascript 时钟,它是 3 个月零 15 天和未来 280 年的未来从当前日期...到目前为止,我已经设法弄清楚如何让月份和年份正确显示......但例如,当前日期显示为"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;
    }

这并不难,试试这个。

检查小提琴

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);
});

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

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

var d = new Date();
console.log(d.toString())
d.setFullYear(d.getFullYear() + 280);
d.setMonth(d.getMonth() + 3);
// to get also correct time (60*60*24*15*1000) is just 15 days in milliseconds
d.setTime(d.getTime() + (60*60*24*15*1000))
console.log(d.toString());

假设这是针对这个日期(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

您的代码有几个问题:

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);
}

您可以通过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)));

如果您想分别获得未来的月、年和日,那也容易得多