Open LePhenix47 opened 1 year ago
In order to make the numbers always take the exact same width and height, we can use the CSS property font-variant-numeric
:
.chronometer{
//...
font-variant-numeric: tabular-nums;
}
First, we need to take the total previous time, then the time now, subtract to get the difference
Chronometer
How to create a chronometer
To begin, there are a few distinct features:
You can pause the chronometer
You can start/resume a chronometer
You can get the partials by clicking on the flag
You can restart the chronometer
It is also important to note:
You cannot add a partial when the chronometer is paused
The partials are reset whenever the chronometer is restarted
The chronometer shows up the centiseconds (csec) and deciseconds (dsec)
For this app, we can drag and drop the partials to fit them in a particular order
How to create the chronometer in JS
To begin with, we are going to need of one variable:
currentAmountOfSeconds
(CAoS
) set to 0 Then we're going to add an interval that will increment the counter every 0.010 s (10 ms)Then we'll need to set the time variables for t:
Now if either of these values are under 10, then add 1 zero or more depending on the unit:
We'll talk about the partials in a separate conecpt post