Question

我正在尝试找出从选定日期捕获用户输入的最佳方法，然后将其生成倒数计时器。到目前为止，下面的代码是我现在使用的Javascript：

WITH 
source_data_raw
AS 
(
    SELECT tbl.* FROM (VALUES
      ( 'Amy', 'Humera', 7, CAST('12-Feb-2017' AS DATE), CAST('18-Feb-2017' AS DATE))
    , ( 'Amy', 'Humera', 5, '28-Feb-2017', '04-Mar-2017')
    , ( 'Amy', 'Humera', 5, '03-Mar-2017', '07-Mar-2017')
    , ( 'Amy', 'Humera', 2, '08-Mar-2017', '09-Mar-2017')
    , ( 'Amy', 'Humera', 7, '10-Mar-2017', '16-Mar-2017')
    , ( 'Amy', 'Humera', 30, '17-Mar-2017', '15-Apr-2017')
    , ( 'Amy', 'Humera', 2, '22-Mar-2017', '23-Mar-2017')
    , ( 'Amy', 'Humera', 2, '24-Mar-2017', '25-Mar-2017')
    , ( 'Amy', 'Humera', 3, '31-Mar-2017', '15-Apr-2017')
    , ( 'Amy', 'Humera', 5, '07-Apr-2017', '16-Apr-2017')
    , ( 'Amy', 'Humera', 30, '13-Apr-2017', '27-May-2017')
    ) tbl ([User], [Drug], [DaySupply], [RxStartDate], [RxEndDate]) 
) 
, 
source_data
AS
(
    SELECT 
          sdr.[User]
        , sdr.[Drug]
        , sdr.[RxStartDate]
        , sdr.[RxEndDate]
        , [RxEndDate_ALT] = DATEADD(DAY, 1, sdr.[RxEndDate])
    FROM 
        source_data_raw AS sdr
)
, 
source_data_grouped
AS
(
    SELECT 
          s1.[User]
        , s1.[Drug]
        , s1.[RxStartDate]
        , [RxEndDate] = MIN(t1.[RxEndDate]) 
    FROM 
        source_data AS s1 
        INNER JOIN source_data AS t1 ON s1.[User] = t1.[User] AND s1.[Drug] = t1.[Drug] AND s1.[RxStartDate] <= t1.[RxEndDate_ALT]
            AND NOT EXISTS 
                (
                    SELECT 1
                    FROM source_data AS t2
                    WHERE 
                        1=1
                        AND t1.[User] = t2.[User]
                        AND t1.[Drug] = t2.[Drug]
                        AND t1.[RxEndDate_ALT] >= t2.[RxStartDate]
                        AND t1.[RxEndDate_ALT] < t2.[RxEndDate_ALT]
                ) 
    WHERE 
        1=1
        AND NOT EXISTS 
        (
            SELECT 1
            FROM source_data AS s2
            WHERE 
                1=1
                AND s1.[User] = s2.[User]
                AND s1.[Drug] = s2.[Drug]
                AND s1.[RxStartDate] > s2.[RxStartDate]
                AND s1.[RxStartDate] <= s2.[RxEndDate_ALT]
        )
    GROUP BY 
          s1.[User]
        , s1.[Drug]
        , s1.[RxStartDate]
)
SELECT 
      sdg.[User]
    , sdg.[Drug]
    , [DaySupply] = SUM(sdr.[DaySupply])
    , sdg.[RxStartDate]
    , sdg.[RxEndDate]
FROM 
    source_data_grouped AS sdg
    INNER JOIN source_data_raw AS sdr ON sdr.[RxStartDate] BETWEEN sdg.[RxStartDate] AND sdg.[RxEndDate]
GROUP BY 
      sdg.[User]
    , sdg.[Drug]
    , sdg.[RxStartDate]
    , sdg.[RxEndDate]

基本上，我试图从用户输入的HTML中捕获一个选定的日期，并将其传递到截止日期变量中，以创建自定义倒数计时器。

此外，我将在11/15/2018发表此帖子，并且为了测试，我将截止日期变量设置为11/16/2018，但现在的倒数是负数。我该如何解决？

更新：更新后的HTML如下：

var deadline = '2018-11-16';

// Calculate the Time Remaining
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor( (t/1000) % 60 );
  var minutes = Math.floor( (t/1000/60) % 60);
  var hours = Math.floor( (t/(1000*60*60)) % 24);
  var days = Math.floor( t/(1000*60*60*24) );
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(clockdiv, endtime) {
    var clock = document.getElementById(clockdiv);
    var timeinterval = setInterval(function(){
      var t = getTimeRemaining(endtime);
      clock.innerHTML = 'days: ' + t.days + '<br>' + 'hours: ' + t.hours + '<br>' + 'minutes: ' + t.minutes + '<br>' + 'seconds: ' + t.seconds;
      if(t.total<=0){
        clearInterval(timeinterval);
      }
    },1000);
  }
initializeClock('clockdiv', deadline);

更新后的JS在下面：

<body>
  <div id="formdiv">
    <form action="" id="div" method="POST">
      <input id="myDate" type="date">
      <input type="submit" id="submit" onclick="getTimeRemaining()">
    </form>
  </div>
  <div id="clockdiv"></div>
</body>

Answer 1

问题出在如何使用javascript Date类。

尝试将getTimeRemaining()的第1行替换为

var t = Date.parse(endtime).getTime() - (new Date()).getTime();

根据您的最新更新进行更新。

您几乎拥有了它。但是随着函数的移动，您已经失去了对一些变量的跟踪：deadline和endtime是同一件事，只是作用域不同。它们可以合并为一个。而且在getTimeRemaining()的最后一行（它称为initializeClock()）上存在问题，因为它将在该时间间隔内每次重新初始化时钟。

这里是尝试的更新版本：

HTML

<div id="formdiv">
    <input id="myDate" type="date">
    <button onclick="window.initializeClock('clockdiv', 'myDate')">Start</button>
</div>
<div id="clockdiv"></div>

Javascript

window.initializeClock = function(clockId, dateId) {
    var getTimeRemaining = function(endtime) {
        var t = Date.parse(endtime) - (new Date()).getTime();
        var seconds = Math.floor( (t/1000) % 60 );
        var minutes = Math.floor( (t/1000/60) % 60);
        var hours = Math.floor( (t/(1000*60*60)) % 24);
        var days = Math.floor( t/(1000*60*60*24) );
        return {
            'total': t,
            'days': days,
            'hours': hours,
            'minutes': minutes,
            'seconds': seconds
        };
    }

    var clock = document.getElementById(clockId);
    var deadline = document.getElementById(dateId).value;
    var timeinterval = setInterval(function(){
        var t = getTimeRemaining(deadline);
        clock.innerHTML = 'days: ' + t.days + '<br>' + 'hours: ' + t.hours + '<br>' + 'minutes: ' + t.minutes + '<br>' + 'seconds: ' + t.seconds;
        if(t.total<=0){
            clearInterval(timeinterval);
        }
    }, 1000);
}

请注意，我先前的回答有一个错误-Date.parse()返回自1970年以来的毫秒数，因此不需要调用getTime()。但是(new Date()).getTime()是正确的。 javascript日期变化无穷！

这里是link to a working jsfiddle

基于用户输入的JavaScript倒数计时器

1 个答案: