Посчитать время зажатия ЛКМ javascript

#javascript

Добрый вечер.

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

Возможно ли такое сделать на JavaScript?
    

Ответы

Ответ 1

время от начала до конца обычно вычисляется как 


узнать текущее время 
проделать операцию 
опять измерить время и из него вычесть стартовое.


соответственно замерить можно через new Date например. https://learn.javascript.ru/datetime;
а разницу надо будет поделить на 1000, т.к. разница будет в миллисекундах.

то есть итог: 

var d1 = new Date(); 
какая-то операция 
var d2 = new Date(); 
(d2-d1)/1000


Ответ 2

Текущее время можно получить с помощью объекта Date. Если объект с датой преобразовать
к числу, то получим время в мсек. Достаточно сохранить время при нажатии клавиши, и
отпускании. Разница времени при отпускании кнопки и нажатии будет то, что вам нужно. 



var startTime; // начальное время

document.body.onmousedown = function(e) {
  // which указывает на клавишу (1 - левая)
  if (e.which === 1) {
    console.log('mousedown');
    startTime = +new Date(); // получаем время в мс при нажатии на клавишу мыши
  }
}

document.body.onmouseup = function(e) {
  if (e.which === 1) {
    console.log('mouseup');
    var endTime = +new Date();
    var time = (endTime - startTime) / 1000; // из мс получаем секунды
    console.log(time + ' sec');
  }
}



Ответ 3

В данном конкретном случаи целесообразней использовать Data.now() нежели предложенные
в других вариантах создаваемые с помощью конструктора объекты new Date().  

Старайтесь чтобы были конкретные объекты, а не какие-то там глобальные переменные.

Старайтесь избегать магических значений, коими является 1000 в time / 1000. Всегда
создавайте константы с говорящими именами и используйте только их. 



let time = { startTime: NaN, endTime: NaN };
let button = document.body.querySelector('span');

button.addEventListener('mousedown', button_mouseDownHandler);

function button_mouseDownHandler() {
  button.removeEventListener('mousedown', button_mouseDownHandler);
  button.addEventListener('mouseup', button_mouseUpHandler);

  time.startTime = Date.now();
}

function button_mouseUpHandler() {
  button.removeEventListener('mouseup', button_mouseUpHandler);
  button.addEventListener('mousedown', button_mouseDownHandler);

  time.endTime = Date.now();

  inputTime(time);
}

const MILLESECOND_TO_SECOND = 1000;

function inputTime({ startTime, endTime }) {
  let elapsedTime = (endTime - startTime) / MILLESECOND_TO_SECOND;

  console.log(`elapsed time: ${ elapsedTime }s.`);
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}
span {
  width: 60%;
  height: 30%;
  background: tomato;
  color: #fff;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

  Click to Me