<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="http://cdn.bootcss.com/flipclock/0.7.8/flipclock.css" rel="stylesheet"> </head> <body> <div class="clock animated flipInX" data-time="2022-01-01 12:00:00" style="margin-top:100px"></div> <div class="clockmessage"></div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script src="http://cdn.bootcss.com/flipclock/0.7.8/flipclock.js"></script> <script type="text/javascript"> //倒计时 var clock; $(document).ready(function() { var dataTime = $('.clock').attr('data-time'); var pastDate = new Date(dataTime); // Grab the current date var currentDate = new Date(); console.log(pastDate); // Set some date in the past. In this case, it's always been since Jan 1 // var pastDate = new Date(currentDate.getFullYear(), 0, 1); // Calculate the difference in seconds between the future and current date var diff = pastDate.getTime() / 1000 - currentDate.getTime() / 1000; console.log(diff); // Instantiate a coutdown FlipClock clock = $('.clock').FlipClock(diff, { clockFace: 'DailyCounter', countdown: true, callbacks: { stop: function() { $('.clockmessage').html('已经结束!'); } } }); }); </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » flipclock.js 倒计时 喜欢 (1)or分享 (0)
