Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.09.2016, 09:59
Новичок на форуме
Отправить личное сообщение для thystruby Посмотреть профиль Найти все сообщения от thystruby
 
Регистрация: 15.09.2016
Сообщений: 2

SeTimeOut анимация javascript

Делаю приложение веб-камера( с фильтрами и т.п) . Есть метод 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)
    });
Ответить с цитированием
  #2 (permalink)  
Старый 15.09.2016, 10:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,116

анимация числа с 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
javascript анимация domius Ваши сайты и скрипты 4 09.07.2014 01:23
Анимация глаз на Javascript Серджио Events/DOM/Window 1 28.11.2012 15:43
Анимация slide для таблицы на javascript Jmunb Элементы интерфейса 1 13.11.2012 12:57
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34