如何用flipclock.js在ruby on rails中制作倒计时

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

本文关键字：rails 倒计时 on ruby 何用 flipclock js      更新时间：2023-09-26

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

我可以将flipclock添加到我的应用程序中，但我不知道如何将剩余的时间发送到javascript。

有谁能帮忙吗?

下面是代码。谢谢。

编辑

对不起，我忘了说时区。
一个报价是在2016年7月15日GMT
另一个报价是在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>

所以我假设你有提供结束日期作为你的数据库中的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>

希望能有所帮助

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

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

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

相关文章：