Сам пробовал делать-ничего не выходит, понимаю что нужно if(x<10).innerHTML="0"+x;
if(x<59)getElementById("counter").innerHTML=x;
а дальше как это соединить все в приемлимый формат 00:00 минуты секунды я хз...
JavaScript
Помогите составить таймер на javascript чтобы отображалось время пребывания пользователя на странице.
Сергей Горшков
508
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Таймер</title>
<script>
const main = () => {
const timer = document.querySelector('#timer');
console.log(timer);
if (timer !== null) clock(timer);
};
class Time {
constructor() {
this.hh = 0;
this.mm = 0;
this.ss = 0
this.begin = Date.now();
}
inc() {
this.ss += 1;
if (this.ss === 60) {
this.ss = 0;
this.mm += 1;
}
if (this.mm === 60) {
this.mm = 0;
this.hh += 1;
}
if (this.hh === 24) {
this.hh = 0;
}
}
diff() {
const dx = Date.now() - this.begin;
if (dx >= 1000) {
this.begin += 1000;
this.inc();
return 0;
}
return dx;
}
get str() {
let time = "";
if (this.hh < 10) time += "0";
time += this.hh + ":";
if (this.mm < 10) time += "0";
time += this.mm + ":";
if (this.ss < 10) time += "0";
time += this.ss;
return time;
}
}
const clock = (timer) => {
const time = new Time();
let delay = 1000;
setInterval(
() => {
delay = time.diff();
if (!delay) timer.textContent = time.str;
}, delay >> 1, timer
);
};
window.addEventListener('DOMContentLoaded', main);
</script>
</head>
<body>
<div id="timer">00:00:00</div>
</body>
</html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Таймер</title>
<script>
const main = () => {
const timer = document.querySelector('#timer');
console.log(timer);
if (timer !== null) clock(timer);
};
class Time {
constructor() {
this.hh = 0;
this.mm = 0;
this.ss = 0
this.begin = Date.now();
}
inc() {
this.ss += 1;
if (this.ss === 60) {
this.ss = 0;
this.mm += 1;
}
if (this.mm === 60) {
this.mm = 0;
this.hh += 1;
}
if (this.hh === 24) {
this.hh = 0;
}
}
diff() {
const dx = Date.now() - this.begin;
if (dx >= 1000) {
this.begin += 1000;
this.inc();
return 0;
}
return dx;
}
get str() {
let time = "";
if (this.hh < 10) time += "0";
time += this.hh + ":";
if (this.mm < 10) time += "0";
time += this.mm + ":";
if (this.ss < 10) time += "0";
time += this.ss;
return time;
}
}
const clock = (timer) => {
const time = new Time();
let delay = 1000;
setInterval(
() => {
delay = time.diff();
if (!delay) timer.textContent = time.str;
}, delay >> 1, timer
);
};
window.addEventListener('DOMContentLoaded', main);
</script>
</head>
<body>
<div id="timer">00:00:00</div>
</body>
</html>
если знаете метод лучше - в комменты или ответы
если нужно переведите в let
если хотите можно на x++ и в этом случае считаться будет не время открытия страницы, а время её работы, что в большинстве браузеров равно времени фактического пребывания на странице ± хрен знает сколько ибо страница морозится не сразу (зависит от настроек и браузера), однако таймер не идеален и имеет погрешности (через час два будет на пол секунды секунду опаздывать, от железок и доступа к ним зависит)
var h, m, s, x = 0, t = Date.now();
setInterval(() => {
//x++;
x = (Date.now() - t) / 1000 | 0;
if ((s = (x % 60).toString()).length < 2) s = '0' + s;
if ((m = ((x / 60 | 0) % 60).toString()).length < 2) m = '0' + m;
if ((h = (x / 3600 | 0).toString()).length < 2) h = '0' + h;
console.log(`${h}:${m}:${s}`); //replace this line with desired output
}, 1000);
пояснения - чего не знаем ищем в гугле
<some number> | 0 - быстрая обрезка дробной части (truncate)
() = > { ... } - лямбда-функция
console.log - вывод в консоль бровсера сообщения типа лог (есть ошибка предупреждение и прочие)
`${<some var>}` - интерполяция в js, использует третий (да!) вид кавычек, ставяться через ё
при незнании остального задумайтесь о подтягивании базы
если нужно переведите в let
если хотите можно на x++ и в этом случае считаться будет не время открытия страницы, а время её работы, что в большинстве браузеров равно времени фактического пребывания на странице ± хрен знает сколько ибо страница морозится не сразу (зависит от настроек и браузера), однако таймер не идеален и имеет погрешности (через час два будет на пол секунды секунду опаздывать, от железок и доступа к ним зависит)
var h, m, s, x = 0, t = Date.now();
setInterval(() => {
//x++;
x = (Date.now() - t) / 1000 | 0;
if ((s = (x % 60).toString()).length < 2) s = '0' + s;
if ((m = ((x / 60 | 0) % 60).toString()).length < 2) m = '0' + m;
if ((h = (x / 3600 | 0).toString()).length < 2) h = '0' + h;
console.log(`${h}:${m}:${s}`); //replace this line with desired output
}, 1000);
пояснения - чего не знаем ищем в гугле
<some number> | 0 - быстрая обрезка дробной части (truncate)
() = > { ... } - лямбда-функция
console.log - вывод в консоль бровсера сообщения типа лог (есть ошибка предупреждение и прочие)
`${<some var>}` - интерполяция в js, использует третий (да!) вид кавычек, ставяться через ё
при незнании остального задумайтесь о подтягивании базы
Farhat Kanaev
5 038
Liu Bei
3 699
Farhat Kanaev
о компиляция подъехала XD
только у меня пара вопросов (не сочтите)
почему вы на три строчки (8, 9, 10) разнесли одну? (count.innerHTML = timePassed(((Date.now()-load)/sec) | 0))
зачем innerHTML - это не безопасно? innerText
и чем вам интерполяция не угодила?)
только у меня пара вопросов (не сочтите)
почему вы на три строчки (8, 9, 10) разнесли одну? (count.innerHTML = timePassed(((Date.now()-load)/sec) | 0))
зачем innerHTML - это не безопасно? innerText
и чем вам интерполяция не угодила?)
Похожие вопросы
- помогите составить загадку в javaScript пожалуйста.
- Помогите решить задачи в Javascript:
- помогите решить задачу по javascript
- Пожалуйста, помогите с простым кодом JavaScript
- Помогите разобраться с кодом (JavaScript)
- Помогите с вопросом про JavaScript Object
- Помогите решить задачу в JavaScript, тема: матрицы.
- JavaScript как в данном коде передавать значения не в alert а чтобы отображалось в input после каждого нажатия кнопки
- Как сделать таймер на js
- Как составить синтаксис JavaScript для автозаполнения формы * (к примеру, анкеты) нажатием на кнопку ** ?
↓
s = String(x % 60).padStart(2, "0");