Количество секунд в секундах

Dan спросил: 28 марта 2018 в 03:06 в: javascript

Я работаю в этом длинном счетчике времени

ПРОБЛЕМА Хорошо работает, но теперь вместо отображения разницы во времени (конец - начало) я хочу, чтобы она отображалась числовых чисел, как работа с count++ (1,2,3,4 ....)

Я пробовал использовать delta = end.getSeconds() - start.getSeconds() ; или delta = end.getMilliseconds() - start.getMilliseconds(); но иногда он показывает отрицательные числа https://jsfiddle.net/7h65ufLq/18/

(function(window, document, undefined){
 'use strict';
 var start;
 var end;
 var delta;
 var button =  document.getElementById('myCanvas');
function getDate(){
   start = new Date();
 }
 
 function retrieveDate() {
   end = new Date();
   delta = end - start;
document.getElementById("demo").innerHTML = delta;
 }
 
 button.addEventListener("mousedown", getDate);
 button.addEventListener("mouseup",retrieveDate );
 
  button.addEventListener("touchstart", getDate);
 button.addEventListener("touchend",retrieveDate );
 document.addEventListener('contextmenu', event => event.preventDefault())
})(window, document)

#myCanvas{
  
  height:100px;
  width:100px;
  border:1px solid red;
-webkit-user-select: auto;
  -webkit-touch-callout: inherit;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

<canvas id="myCanvas">click</canvas>
<span id="demo">0</span>

javascript

Mark Meyer ответил: 28 марта 2018 в 03:14

Можете ли вы уточнить, что вы подразумеваете под "Я хочу, чтобы он отображал числа отсчетов, как при работе с подсчетом ++"

Dan ответил: 28 марта 2018 в 03:16

хорошо, показать целые числа. как 1,2,3,4,5,6 .... показывая время нажатия холста. мой английский не самый лучший.

1 ответ

Есть решение

Mark Meyer ответил: 28 марта 2018 в 03:25

Вместо отображения дельта-времени вы можете просто запустить интервал, который увеличивает количество в определенное время. Затем при наведении курсора мыши очистите интервал.

Например:

(function(window, document, undefined) {
  'use strict';
  var button = document.getElementById('myCanvas');
  var interval;
  var count;

  function startCount() {
    count = 0
    document.getElementById("demo").innerHTML = count
    interval = setInterval(function() {
      count++;
      document.getElementById("demo").innerHTML = count
    }, 1000) // increase count every second
  }

  function endCount() {
    clearInterval(interval)
  }

  button.addEventListener("mousedown", startCount);
  button.addEventListener("mouseup", endCount);

  button.addEventListener("touchstart", startCount);
  button.addEventListener("touchend", endCount);
  document.addEventListener('contextmenu', event => event.preventDefault())
})(window, document)

#myCanvas {
  height: 100px;
  width: 100px;
  border: 1px solid red;
  -webkit-user-select: auto;
  -webkit-touch-callout: inherit;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

<canvas id="myCanvas">click</canvas>
<span id="demo">0</span>

Dan ответил: 28 марта 2018 в 03:23

хорошо, спасибо за ваш подход. В этом случае счет не возвращается к 0, когда мышь поднята?

Mark Meyer ответил: 28 марта 2018 в 03:24

Да, извините, смотрите правку - вы можете просто сбросить счетчик в обработчике мыши.

Dan ответил: 28 марта 2018 в 03:27

jsfiddle.net/7h65ufLq/27 Я проверяю это здесь, счетчик не возвращается к 0, при этом код будет работать потрясающе, спасибо

Mark Meyer ответил: 28 марта 2018 в 03:28

@ Дан, вы можете просто установить innerHTML на 0 в начале startCount - смотрите другое редактирование.

Dan ответил: 28 марта 2018 в 03:29

jsfiddle.net/7h65ufLq/29 да спасибо я сделал это работает, +1 определенно !!