【问题标题】:Countup Timer with start date as a function variable以开始日期作为函数变量的倒计时计时器
【发布时间】:2011-05-04 07:45:51
【问题描述】:

我是 javascript 新手,正在尝试创建一个倒计时计时器,该计时器可以将某个日期作为输入并计算自该日期以来经过的时间。

我目前正在使用来自 http://keith-wood.name/countdown.html 的 jquery 插件,但我遇到了 2 个问题

1) 我不知道如何将输入日期添加为函数变量。我在这个论坛上发现了另一个类似的问题 - Jquery Countup Timer,但他们使用的是固定日期而不是可变输入日期。

2) 如何确保变量输入日期符合特定格式?目前我正在尝试从 mysql 数据库中读取输入日期,该数据库将日期标记为 2010-06-17 15:12:30,但我不认为这是 jquery 插件将读取的日期格式。有没有办法解析这个日期以便格式匹配?

非常感谢任何可以提供帮助的人!

史蒂夫

【问题讨论】:

  • 结合netbrain的回答和我的回答会解决你的问题:)

标签: javascript jquery function input countdown


【解决方案1】:

这是一个例子。

http://jsfiddle.net/HXf5v/

您需要做的就是创建一个将 Date 对象作为参数的 javascript 函数

类似:

function doDateCountUp(date){
  $('#sinceCountDown').countdown({since: date, compact:true, format: 'YOWDHMS', description: ''});    
}

或者,您也可以始终创建一个 jquery 函数。

jQuery.fn.doDateCountUp = function(date){
    $(this).countdown({since: date, compact:true, format: 'YOWDHMS', description: ''});  
}

然后你可以像这样调用jquery函数:

$('#mydiv').doDateCountUp(new Date())

至于格式化一个新的 Date() 对象。你应该看看:

http://www.w3schools.com/jS/js_obj_date.asp

这表明你可以像这样创建一个日期对象:

new Date() // current date and time
new Date(milliseconds) //milliseconds since 1970/01/01
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

【讨论】:

    【解决方案2】:

    这是一个从文本框中获取日期并将其用作开始日期的示例:

    countup with input exmample

    javascript 可以通过接受几种不同格式的字符串来创建新日期。以下是这些格式的快速链接:javascript date

    【讨论】:

      【解决方案3】:

      将 mysql 日期转换为 javascript 日期对象:

      function mysql2jsdate(mysqlDate){
         var parts = mysqlDate.replace(/:/g, '-').replace(' ', '-').split("-");
         parts = $.map(parts, function(part){ return parseInt(part, 10) });
         return new Date(parts[0], parts[1]-1, parts[2], parts[3], parts[4], parts[5]);
      }
      

      使用示例:

      var jsDate = mysql2jsdate('2010-06-17 15:12:30');
      

      希望这有助于实现您的目标

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-02-03
        • 2014-10-19
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多