Calculate the time when the javascript paintwork is clamped

Good evening.

The task is as follows: press the left mouse button and, when pressed, display how many seconds it was clamped.

Is it possible to do this in JavaScript?

Author: Crok, 2016-11-19
Source

3 answers

The time from start to end is usually calculated as

  1. find out the current time
  2. perform operation
  3. measure the time again and subtract the starting time from it.

Accordingly, you can measure it using new Date for example. https://learn.javascript.ru/datetime; and the difference will have to be divided by 1000, because the difference will be in milliseconds.

That is, the result: 

var d1 = new Date(); 
какая-то операция 
var d2 = new Date(); 
(d2-d1)/1000
 4
Author: Алексей Шиманский, 2016-11-19 17:36:13

The current time can be obtained using the Date object. If we convert an object with a date to a number, we get the time in ms. It is enough to save time when pressing the key, and releasing it. The time difference when releasing the button and pressing it will be what you need. 

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>
 3
Author: saaaaaaaaasha, 2017-05-14 07:18:20

In this particular case, it is more appropriate to use Data.now() than the objects created using the constructor new Date() suggested in other variants.

Try to have specific objects, and not some global variables.

Try to avoid magic values, which are 1000 in time / 1000. Always create constants with speaking names and use only them. 

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>
 1
Author: user220409, 2016-11-19 18:23:26