Flipclock js倒计时1小时不复位
Flipclock js countdown 1hour without reset
我正在尝试在不重置刷新时间的情况下进行倒计时。我需要倒计时1小时,但我不希望它在刷新时重置。从服务器获取当前时间和过期时间是不工作的,因为我想在点击上重置计时器。以下是我当前的js代码:
<script>
var clock;
clock = $('.clock').FlipClock({
clockFace: 'HourlyCounter',
autoStart: false,
callbacks: {
stop: function() {
$('.message').html('The clock has stopped!')
},
}
});
clock.setTime(3600);
clock.setCountdown(true);
</script>
是的,你可以在你的例子中使用flipclock和jquery-cookie看看1分钟倒计时示例。
flipclock
在cookie中存储End Date的init()
功能中,用clock.setTime()
初始化定时器,用clock.setCountdown(true)
使能倒计时,用clock.start()
启动倒计时。
现在如果用户刷新页面,我们设置定时器与当前和结束日期之间的差异,所以像这个计数器可以继续正常倒计时:
var counter = $.cookie('endDate')-currentDate;
clock.setTime(counter);
点击reset
按钮将通过移除cookie endDate
和初始化倒计时功能来重置计数器。
<div class="clock" style="margin:2em;"></div>
<div class="message"></div>
<button id='reset'>Reset</button>
Js:
//ready function
$(function(){
countDown = function(){
var currentDate = Math.round(new Date() / 1000);
var clock = $('.clock').FlipClock({
countdown: true,
callbacks: {
init: function() {
//store end date If it's not yet in cookies
if(!$.cookie('endDate')){
// end date = current date + 1 minutes
var endDate = Date.now() + 1*60*1000;
// store end date in cookies
$.cookie('endDate', Math.round(endDate / 1000));
}
},
stop: function() {
$('.message').html('The clock has stopped!');
},
}
});
/* counter will be at first 1 min if the user refresh the page the counter will
be the difference between current and end Date, so like this counter can
continue the countdown normally in case of refresh. */
var counter = $.cookie('endDate')-currentDate;
clock.setTime(counter);
clock.setCountdown(true);
clock.start();
}
//reset button
$('#reset').click(function(){
$.removeCookie('endDate'); //removing end date from cookies
countDown(); //launch countdown function
});
//Lanching count down on ready
countDown();
});
在您的情况下(1小时),您只需将这一行中的1替换为60:
var endDate = Date.now() + 1*60*1000; // For you .... + 60*60*1000
相关文章:
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 调整窗口大小时,可拖动的对象会出现在容器外部
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 如何在iOS应用程序中从Firebase中删除超过6小时的数据
- IE在将字符串转换为日期时从日期中删除4小时
- 调整屏幕大小时更改属性值
- 将直流图表库中的折线图缩放限制为小时
- 为什么要做新的.Date()与new相差1小时.日期().到ISOString()
- 让谷歌数据图表有一个24小时x轴
- Jqgrid 24小时格式的日期列
- 如果在过去两个小时内没有记录,返回0,javascript逻辑
- 解析云代码作业:删除在数据库中已经存在一个小时的行
- JavaScript:如何每整小时做一些事情
- 如何在浏览器窗口变大/变小时捕捉元素的宽度
- javascript日期减去小时-错误
- 每小时倒计时一次,但以30分钟为单位
- 24小时输入时间:mm格式跨浏览器
- 如何在调整浏览器大小时将图像保持在适当位置
- 试图创建一个24小时计时器来重置自己
- Flipclock js倒计时1小时不复位