Форум

thystruby · #1 (**permalink**) 15.09.2016, 09:59

Делаю приложение веб-камера( с фильтрами и т.п) . Есть метод 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

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>

Форум

Справочник

Discord чат

Курсы javascript