Секундомер

@Forsees · Регистрация: 06.09.2021

Студворк — интернет-сервис помощи студентам

Сделал секундомер но тряска результата напрягает. Как его стабилизировать?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
    <style>
        .time {
            margin-left: auto;
            margin-right: auto;
            background: rgb(255, 255, 255);
            width: 10%;
            padding: 40px;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            font-size: 17pt;
            border: 4px solid coral;
        }
        body {
            background: #3f4fac;
        }
        .start {
            border: 3px solid red;
            background: #282f57;
            border-radius: 50px;
            text-align: center;
            width: 128px;
            color: white;
        }
        .block {
            text-align: center;
        }
        .start:hover {
            cursor: pointer;
        }
        button {
            margin-top: 30%;
        }
    </style>
    <head>
        <title>Секундомір</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="block">
            <p class="time">00:00:00:00</p>
        <button onclick="funcS()" class="start">Start</button>
    </div>
    </body>
    <script>
        let msec = '00';
        let sec = '00';
        let min = '00';
        let hour = '00';
        function funcS() {        
            let msec = setInterval(func, 10);
        }
 
        function func() {
        msec++
        document.querySelector('.time').innerHTML = hour + ':' + min + ':' + sec + ':' + msec;
        if (msec == 100) {
                sec++;
                msec= "00";
            document.querySelector('.time').innerHTML = hour + ':' + min + ':' + sec + ':' + msec;
            }
            if (sec == 60) {
                min++;
                sec= "00";
            document.querySelector('.time').innerHTML = hour + ':' + min + ':' + sec + ':' + msec;
            }
            if (min == 60) {
                hour++;
                min= "00";
            document.querySelector('.time').innerHTML = hour + ':' + min + ':' + sec + ':' +  msec;
            }
        }
    </script>
</html>

@Balanaar · 07.10.2021, 21:24

Используйте моноширинный шрифт и нолики приписывайте числам менее 10.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
        let msec = 0;
        let sec = 0;
        let min = 0;
        let hour = 0;
        function funcS() {        
            let msec = setInterval(func, 10);
        }
 
        function func() {
        msec++
        if (msec == 100) {
                sec++;
                msec = 0;
            }
            if (sec == 60) {
                min++;
                sec = 0;
            }
            if (min == 60) {
                hour++;
                min = 0;
            }
          document.querySelector('.time').innerHTML = [hour, min, sec, msec].map(e => e < 10 ? '0' + e : e).join(':');
        }

CSS
1
2
3
.time {
            font-family: monospace;
}

https://codepen.io/Balanaar/pen/rNzBVaY

Если использование немоноширинного шрифта принципиально, заносите каждое число в отдельный элемент, чтобы у вас хотя бы двоеточия не прыгали. Но числа всё равно будут прыгать.

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

Секундомер

Решение