SeTimeOut анимация javascript
:help: :help: :help: Делаю приложение веб-камера( с фильтрами и т.п) . Есть метод SetTimeOut, который после нажатия на кнопку делает снимок через определенное время. Как сделать так, что бы при нажатии на кнопку одновременно с отсчетом времени settimeout до снимка на экран выводились цифры типа ( 3....2....1). video3.addEventListener("click", function () {
setTimeout( function () {
var snap = takeSnapshot();
// Show image.
image.setAttribute('src', snap);
delete_photo_btn.classList.remove("disabled");
download_photo_btn.classList.remove("disabled");
download_photo_btn.href = image.src;
filterVisible();
take_photo_btn.classList.add('disabled');
video3.classList.add('disabled');
video5.classList.add('disabled');
document.querySelector('div#back1').classList.add('disabled');
$('div.stop-video').addClass('disables');
if (document.querySelector('div.stop-video').classList.contains('visible')){
document.querySelector('div.stop-video').classList.remove('visible')
}
// Pause video playback of stream.
video.pause();
},2300)
});
|
анимация числа с callback
thystruby,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.time{
background-color: rgb(51, 153, 0);
color: rgb(102, 255, 255);
padding: 4px 8px;
font-size: 24px;
border-radius: 4px;
}
.test{
background-color: transparent;
color: #FF0000;
}
</style>
</head>
<body>
<input id="go" name="" type="button" value="go" >
<span class="time">0</span>
<script>
function timer(b) {
return {
play: function() {
var d = performance.now();
c = !0;
requestAnimationFrame(function e(a) {
a = (a - d) / b.duration;
1 <= a && (a = 1, b.callback && b.callback());
b.elem.innerHTML = b.from + (b.to - b.from) * a | 0;
1 > a && requestAnimationFrame(e)
})
}
}
};
var span = document.querySelector('.time'),
but = document.querySelector('#go'),
anim = timer({
from : 3,
to : 0,
duration: 2 * 1000,
elem : span,
callback : function() { this.elem.classList.add('test')}
});
but.addEventListener('mousedown', anim.play);
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 12:01. |