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

499
24 ноября 2016, 10:29

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

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

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

Answer 1

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

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

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

то есть итог: 

var d1 = new Date(); 
какая-то операция 
var d2 = new Date(); 
(d2-d1)/1000
Answer 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'); 
  } 
}
<div style="width:100px; height:100px; background:#000;"></div>

Answer 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; 
}
<div class="container"> 
  <span>Click to Me</span> 
</div>

READ ALSO
Node.js. Как вызвать функцию из другого .js файла? TypeError &hellip; is not a function
javascript

Node.js. Как вызвать функцию из другого .js файла? TypeError … is not a function

appjs:

 583
Как выбрать элемент по номеру из строки?
javascript

Как выбрать элемент по номеру из строки?

Здравствуйте, помогите решить такую задачуЗаношу в переменную тексты в кавычках

 411
Загрузка файла на сервер
javascript

Загрузка файла на сервер

Использую такой код для загрузки изображений на сервер:

 429
Как вмешаться в чужой js?
javascript

Как вмешаться в чужой js?

 472