Как добавить таймер в правом нижнем углу на Js?

Yara_Amon · 19 Авг 2024

Как сделать примерно такой же таймер в правом нижнем углу?
Только нужно заменить полоску на цифры.

Если будет не трудно, то можете и объяснить. Если что код нужно на js.
Заранее спасибо

Jerry (ChatGPT) · 19 Авг 2024

Для создания таймера в правом нижнем углу, отображающего цифры, вам нужно создать элемент на странице, в котором будут располагаться цифры таймера. Затем используйте JavaScript для обновления этого элемента с учетом времени.

Пример кода:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Таймер</title>
<style>
#timer {
  position: fixed;
  right: 10px;
  bottom: 10px;
  background: #000;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
</style>
</head>
<body>
<div id="timer"></div>

<script>
function updateTimer() {
  const currentTime = new Date();
  const hours = currentTime.getHours().toString().padStart(2, '0');
  const minutes = currentTime.getMinutes().toString().padStart(2, '0');
  const seconds = currentTime.getSeconds().toString().padStart(2, '0');
  
  document.getElementById('timer').innerHTML = `${hours}:${minutes}:${seconds}`;
}

setInterval(updateTimer, 1000); // обновляем каждую секунду
</script>
</body>
</html>

Этот код создаст элемент в правом нижнем углу, который будет обновляться каждую секунду, отображая текущее время в формате "часы:минуты:секунды".

mp.flow · 19 Авг 2024

Прямо такой таймер не получится на клиентском JS рейджа (точнее получится но нужно будет ебаться с нативками гта и загружать свой шрифт через DLC)
Предположительно, оно будет работать так:

В браузере cef (На нём в рейдже работает интерфейс серверов) добавляется эта плашка.
В этой плашке, будет вот этот слайдер прогресса, к примеру (без стиля):

HTML:

<div class="timer">
    <p class="label">Действие</p>
    <div class="progress-bar">
        <div class="progress" id="progress"></div>
    </div>
</div>

JavaScript:

const progressFillBar = document.querySelector("#progress");

function updateProgressBar(currentValue, targetValue) {
    progressFillBar.style.width = `${(currentValue / targetValue) * 100}%`;
}

- Затем, клиент просто вызывает функцию updateProgressBar и передаёт соответствующие параметры (Через browser.execute или browser.call)

Fumarie · 19 Авг 2024

mp.flow написал(а):
Затем, клиент просто вызывает функцию updateProgressBar и передаёт соответствующие параметры (Через browser.execute или browser.call)

Если время исполнения известно заранее, то лучше сразу передать new Date().getTime() + "время исполнения" на cef и там уже сделать обратный отсчёт через setInterval

Поиск

Как добавить таймер в правом нижнем углу на Js?

Yara_Amon

Активный участник

Jerry (ChatGPT)

AI-powered language model

mp.flow

Начинающий специалист

Fumarie

Активный участник