到目前为止这是我的调用脚本,
<script type="text/javascript">
var clock = $('.clock').FlipClock(3600 * 24 * 5, {
clockFace: 'DailyCounter',
countdown: true,
});
</script>
请有人能告诉我如何从确切的日期算起来吗？
例如,日期是2014年7月21日在英国时间,并且访问该网站的每个人将根据当前日期查看到该日期剩余的时间.
我一直试图使flipclock.js完全响应并且失败了.有没有人完成这个？如果是这样,我怎么能让它工作？感谢您的时间.我试图将所有内容转换为百分比,但这并不像我预期的那样有效.我正在使用这个插件的twitter bootstrap.
这是我的flipclock.js的css:
/* Get the bourbon mixin from http://bourbon.io */
/* Reset */
.countdown {
postion:relative;
width: 39%;
}
.flip-clock-wrapper {
margin-left: 8% !important;
max-width: 100%;
font: normal .75em "Helvetica Neue", Helvetica, sans-serif;
-webkit-user-select: none;
}
.flip-clock-wrapper * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-clock-wrapper a {
cursor: pointer;
text-decoration: none;
color: #ccc; }
.flip-clock-wrapper a:hover {
color: #fff; }
.flip-clock-wrapper ul { …我正在使用jQuery插件将倒数计时器放在我的网页中.目前控制计时器显示内容的代码是:
<script type="text/javascript">
var clock = $('.clock').FlipClock(3600 * 24 * 3, {
clockFace: 'DailyCounter',
countdown: true
});
</script>
插件的JS可以在这里查看:https://github.com/objectivehtml/FlipClock/blob/master/js/flipclock/flipclock.js
可以在此处查看正在使用的代码的示例页面:http: //flipclockjs.com/faces/daily-counter
目前,计时器是3天的倒计时,每次刷新页面时都会重置.我想使用倒数计时器的自定义时间,这将是绝对的(不会通过页面刷新重置).我希望日期是2013年9月30日太平洋标准时间中午12:00(美国西部 - 加利福尼亚时区).
无论如何使用Javascript或jQuery做到这一点？
当用户从下拉列表中选择语言时,我正在尝试以编程方式更改FlipClock.js时钟上的标签语言.
我看到在实例化时钟时如何设置语言(https://github.com/objectivehtml/FlipClock/blob/master/examples/localization.html),我在这里看到文档http://flipclockjs.com/api但是我不确定如何动态更改语言.
就像是:
var clock = $('#flipclock').FlipClock(6000, {
countdown: true,
clockFace: 'DailyCounter'
});
clock.loadLanguage("es"); // change language? doesn't work
但这不起作用.我也试过了
clock.language = "es";
那也不起作用.有任何想法吗？
http://codepen.io/anon/pen/dhtAo
.container{
zoom: 2 !important;
-moz-transform: scale(2);
-ms-zoom: scale(2);
}
此代码适用于FF和chrome.但是在IE 9中,只有文本是缩放的,而不是时钟.只有删除上面的代码才会显示时钟.
谁知道这个问题的原因和解决方案？
在达到特定计数后，我无法让 FlipClock.js 停止。我曾尝试使用“ clock.stop();”调用，但即使在多次尝试设置“停止”号码后它也不起作用。这是我拥有的适用于我的计数器的代码：
<script type="text/javascript">
var clock;
$(document).ready(function() {
// Instantiate a counter
clock = new FlipClock($('.clock'), {
clockFace: 'Counter',
minimumDigits: 4,
});
setTimeout(function() {
setInterval(function() {
clock.increment();
}, 0.1);
});
});
</script>
关于如何设置我的计数器停止在“300”的任何想法？任何帮助是极大的赞赏！
我在我的网站上添加了一个倒计时倒计时器,我希望每分钟都能触发一个事件,以便我可以对源中的元素进行更改.我尝试在代码中添加一个警告,看看回调是否被触发,但我很确定我不太了解回调方法的文档.我引用了flipclock.min.js和flipclock.css,我能够让时钟倒计时,我需要在每分钟后发生一次事件.在这里您可以找到文档和下载:Flipclock.js
这是我目前拥有的javascript代码:
<script type="text/javascript">
var clock = $('#clock').FlipClock(3600,{
countdown: true,
callbacks: {
_interval: function () {
var time = clock.getTime().time;
alert(time);
if (time % 60 == 0) {
//Change element
}
}
}
});
</script>
这是html:
<div id="clock-container"style="width: 100%">
<div class="col-lg-6" id="clock"></div>
</div>
我正在使用FlipClock 1.1a,我想在倒计时结束时设置图像并隐藏计数器.目前,当时间到了,计数器进入时间(-1小时,-12分钟).我怎样才能做到这一点？该网站回调很少,没有帮助.
时间结束后如何重新启动活动时钟？
var clock;
$(document).ready(function() {
clock = new FlipClock($('.clock'), 10, {
clockFace: 'Counter',
autoStart: true,
countdown: true
});
});
我想在某种情况下10秒后再次启动计数器。我试过的是
var clock;
$(document).ready(function() {
clock = new FlipClock($('.clock'), 10, {
clockFace: 'Counter',
autoStart: true,
countdown: true,
callbacks: {
stop: function() {
//my custom condition here if(not_free){start showing again}
clock.start();
}
}
});
});
但这没有用。任何的想法？
flipclock ×10
javascript ×7
jquery ×5
css ×2
css3 ×1
date ×1
divider ×1
localization ×1
time ×1