Javascript计时器进度条
Javascript timer progress bar
本文关键字:计时器 Javascript 更新时间:2023-09-26
我有计时器功能,带有进度条。它工作得很好,但我想制作一个流畅的进度条动画,60 FPS
function started(duration) {
var TotalSeconds = 40;
var documentWidth = $(document).width();
var start = Date.now();
var intervalSetted = null;
function timer() {
var diff = duration - (((Date.now() - start) / 1000) | 0);
var seconds = (diff % 60) | 0;
seconds = seconds < 10 ? "0" + seconds : seconds;
$('#timer').html("00:" + seconds);
var progresBarWidth = (seconds * documentWidth / TotalSeconds);
$('#progress').css({
width: progresBarWidth + 'px'
});
if (diff <= 0) {
clearInterval(intervalSetted);
}
}
timer();
intervalSetted = setInterval(timer, 1000);
}
started(40);
如何实现60FPS动画?
下面是我的代码演示:JSFiddle!
您可以使用CSS3动画。我写了一些示例代码,其中显示了一个进度条,它使用您可以选择的持续时间倒计时。动画完成后,也可以进行回调。
CSS3动画是硬件加速的,所以当你使用它时,你会有最流畅的体验。
/*
* Creates a progressbar.
* @param id the id of the div we want to transform in a progressbar
* @param duration the duration of the timer example: '10s'
* @param callback, optional function which is called when the progressbar reaches 0.
*/
function createProgressbar(id, duration, callback) {
// We select the div that we want to turn into a progressbar
var progressbar = document.getElementById(id);
progressbar.className = 'progressbar';
// We create the div that changes width to show progress
var progressbarinner = document.createElement('div');
progressbarinner.className = 'inner';
// Now we set the animation parameters
progressbarinner.style.animationDuration = duration;
// Eventually couple a callback
if (typeof(callback) === 'function') {
progressbarinner.addEventListener('animationend', callback);
}
// Append the progressbar to the main progressbardiv
progressbar.appendChild(progressbarinner);
// When everything is set up we start the animation
progressbarinner.style.animationPlayState = 'running';
}
addEventListener('load', function() {
createProgressbar('progressbar1', '40s');
createProgressbar('progressbar2', '30s');
createProgressbar('progressbar3', '20s', function() {
alert('20s progressbar is finished!');
});
createProgressbar('progressbar4', '10s', function() {
alert('10s progressbar is finished!');
});
});
.progressbar {
width: 80%;
margin: 25px auto;
border: solid 1px #000;
}
.progressbar .inner {
height: 15px;
animation: progressbar-countdown;
/* Placeholder, this will be updated using javascript */
animation-duration: 40s;
/* We stop in the end */
animation-iteration-count: 1;
/* Stay on pause when the animation is finished finished */
animation-fill-mode: forwards;
/* We start paused, we start the animation using javascript */
animation-play-state: paused;
/* We want a linear animation, ease-out is standard */
animation-timing-function: linear;
}
@keyframes progressbar-countdown {
0% {
width: 100%;
background: #0F0;
}
100% {
width: 0%;
background: #F00;
}
}
<div id='progressbar1'></div>
<div id='progressbar2'></div>
<div id='progressbar3'></div>
<div id='progressbar4'></div>
在jquery中使用.animate()
方法,而不是.css()
。
animate()方法允许我们在任何数字CSS属性。唯一需要的参数是的普通对象CSS属性。此对象与可以发送到的对象相似.css()方法,除了属性的范围更大限制性的。
$('#progress').animate({
width: progresBarWidth + 'px'
}, 1000);
Fiddle
相关文章:
- 如何在窗体打开时从javascript倒计时计时器值中节省时间
- 我如何才能确保计时器设置为每天4点半,所以我不会;不用在Javascript中提及某个日期
- 如果弹出窗口关闭,Javascript停止/重置计时器
- Javascript倒计时计时器倒计时未正确更新秒/分钟
- 设置Javascript倒计时计时器的初始值
- JavaScript图像横幅计时器HTML
- 计时器自动运行,而不是单击javascript按钮
- JavaScript倒计时计时器不会显示两次
- 如何设置此javascript倒计时计时器的样式
- 在 Node.Js 脚本中使用 Javascript 计时器在特定时间触发事件
- 如何在 JavaScript 中计算秒表/计时器
- Javascript 倒数计时器 - 客户端时间与 mySQL 时间
- 如何运行javascript并每分钟重新加载DIV容器(计时器)
- Javascript 计时器只调用一次 Code 隐藏方法
- 如何用JavaScript编写倒计时计时器
- 重置图像滑块的Javascript计时器
- 设置计时器并使用javascript/PHP进行检查
- 正在停止Javascript计时器
- 暂停倒计时计时器(JavaScript)
- 如何在 Django 模板中创建计时器 JavaScript 组件