0

我正在尝试对 2016 年 7 月 15 日结束的报价进行倒计时。

我能够将翻转时钟添加到我的应用程序中，但我不知道如何将剩余时间发送到 javascript。

任何人都可以帮忙吗？

这是代码。谢谢。

编辑

对不起，我忘了提到时区。
一个报价是格林威治标准时间 2016 年 7 月 15 日，
另一个报价是美国东部标准时间 2016 年 7 月 25 日。

这是我的应用在 heroku 上的时区。

suai@railrial:~/workspace/conrse (master) $ rails c
Loading development environment (Rails 5.0.0.rc2)
>> Time.zone.name
=> "UTC"
>> 


<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css">
</head>

<body>

  <div class="clock"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>

  <script type="text/javascript">
    var clock = $('.clock').FlipClock(25 * 25 * 35 * 35, {
      clockFace: 'DailyCounter',
      countdown: true,
    });
  </script>

</body>

</html>

4

3 回答 3

2

所以我假设你的数据库中有提供结束日期DateTime。

可以说该值在offer_ends您的@item对象的属性中

<script type="text/javascript">
  // We need to convert the time difference to integer
  time_diff = <%= (@item.offer_ends - Time.now).to_i.abs %>;
  //Rails will put the seconds difference right there, so if you inspect your code will look like this in browser
  //time_diff = 1035937;

  var clock = $('.clock').FlipClock(time_diff, {
    clockFace: 'DailyCounter',
    countdown: true,
  });
</script>

希望这可以帮助

于 2016-07-02T18:46:10.630 回答
1

我添加了一些代码，为您添加了选项：

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css">
</head>

<body>

  <div class="clock"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>

  <script type="text/javascript">
    var date = new Date("July 15 2016"); //Create your date object
    var now = new Date(); //Get todays date
    var diff = (date.getTime()/1000) - (now.getTime()/1000); //Calculate differenece
    var clock = $('.clock').FlipClock(diff, {
      clockFace: 'DailyCounter',
      countdown: true,
    });
  </script>

</body>

</html>

于 2016-07-02T18:34:18.067 回答
0

在javascript中获取日期之前的秒数

var targetDate = new Date(2016, 06, 15, 0, 0, 0, 0);//new Date(YYYY, MM, DD, 0, 0, 0, 0);//MM is the month starting from 0;
var now = new Date();
 var dif = (targetDate.getTime() - now.getTime())/1000;


<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css">
</head>

<body>

  <div class="clock"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>

  <script type="text/javascript">
    
    var targetDate = new Date(2016, 06, 15, 0, 0, 0, 0);
    var now = new Date();
    var dif = (targetDate.getTime() - now.getTime())/1000;
    
    var clock = $('.clock').FlipClock(dif, {
      clockFace: 'DailyCounter',
      countdown: true,
    });
  </script>

</body>

</html>

于 2016-07-02T18:32:36.810 回答