在javascript中创建一个倒计时计时器,在1小时后开始倒计时
Create a countdown timer in javascript that starts countdown after 1 hr
我试图创建一个页面,其中1小时的视频显示。接近视频的结尾,让我们说在53分钟,我想要一个倒计时计时器与链接显示。
我已经搜索了互联网,试图找到一个解决方案,但我只找到了一个参考,立即开始倒计时定时器,如这里所示。
注意:我也想采取当前时间(一旦计时器开始),所以我可以在php传递它作为$_GET变量。
这是我的HTML: <h1>Countdown Clock</h1>
<div id="clockdiv">
<!-- <div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div> -->
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
这是我的JavaScript:
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
// var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySele`enter code here`ctor('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
// daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
return
}
var currentdate = new Date();
var dateTime = (currentdate.getTime()/1000)/60;
var startTimer = (dateTime)+.1;
var deadline = new Date(Date.parse(new Date()) +60 * 60 * 1000);
initializeClock('clockdiv', deadline);
Any help would be appreciated.
Thanks!
如果你使用的是HTML5视频,你可以使用它的API很容易地做到这一点。这取决于IIFE创建闭包来保持状态,因为在我对此进行的快速测试中,事件在取消订阅之前仍然触发多次。
用你的代码替换alert('Almost done...!')
开始倒计时。
document.
querySelector('video').
addEventListener('timeupdate', function almostdone(e) {
var _ = e.target,
fired = false;
(function() {
if (_.currentTime / _.duration > .8 && !fired) {
_.removeEventListener('timeupdate', almostdone);
fired = true;
alert('Almost done...!');
}
})();
});
<video controls="" autoplay="" height="360" width="640">
<!-- MP4 must be first for iPad! -->
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
<!-- Safari / iOS, IE9 -->
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
<!-- Chrome10+, Ffx4+, Opera10.6+ -->
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">
<!-- Firefox3.6+ / Opera 10.5+ -->
<!-- fallback to Flash: -->
<object type="application/x-shockwave-flash" data="player.swf" height="360" width="640">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="player.swf">
<param name="flashvars" value="autostart=true&controlbar=over&image=poster.jpg&file=http://clips.vorwaerts-gmbh.de/VfE_flash.mp4">
<!-- fallback image -->
<img src="poster.jpg" alt="Big Buck Bunny" title="No video playback capabilities, please download the video below" height="360" width="640">
</object>
</video>
可以使用javascript函数
setTimeout(your_function(),60000);
相关文章:
- 如何在窗体打开时从javascript倒计时计时器值中节省时间
- 设置倒计时计时器,IE出现问题
- 显示具有服务器端自动时间注销的同步倒计时计时器
- 倒计时计时器应该持续两个php页面
- 在Jquery倒计时计时器上设置每个数字的动画
- Javascript倒计时计时器倒计时未正确更新秒/分钟
- 创建一个倒计时计时器脚本,该脚本计算声音文件的持续时间,而不是特定的日期
- 递归倒计时计时器
- 制作一个按钮倒计时计时器,该计时器将在5分钟后永久禁用,即使在页面刷新时也应保持禁用状态
- 我需要JS/jQuery中的倒计时计时器
- 设置Javascript倒计时计时器的初始值
- JavaScript倒计时计时器不会显示两次
- 如何设置此javascript倒计时计时器的样式
- 如何使用momentjs将澳大利亚/墨尔本时区设置为倒计时计时器
- 如何用JavaScript编写倒计时计时器
- 试图修复一个倒计时计时器问题,该问题导致计时器运行,然后在使用Javascript时崩溃约10秒
- 如何制作倒计时计时器并在时间到时更新MySQL记录
- 如何制作两个倒计时计时器,如果一个开始,另一个会停止
- 创建php/javascript倒计时计时器时出现问题
- 当分钟和秒为0时,倒计时计时器不会减少小时数