如何使用 flipclock.js 在 rails 上的 ruby 进行倒计时？

Question

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

我能够将 flipclock 添加到我的应用程序，但我不知道如何将剩余时间发送到 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>

Answer 1

获取到 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>

Answer 2

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

<!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>

Answer 3

所以我假设您的数据库中有 报价结束日期 作为 DateTime。

假设值在 @item 对象的 offer_ends 属性中

<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>

希望对您有所帮助

如何使用 flipclock.js 在 rails 上的 ruby 进行倒计时？

How to make a countdown in ruby on rails with flipclock.js?

javascript

jquery

ruby-on-rails

flipclock

ruby-on-rails-5