Бегущая строка даты и времени в <title> с использованием JavaScript

У меня есть программа JavaScript, которая отображает текущую дату и время в заголовке страницы (), затем я попытался анимировать этот заголовок как строку сканирования, но ничего не работает. Пробовал использовать метод среза, а также метод подстроки, но ничего не вышло.

function updateDateTime() {
  let datetime = new Date();
  let datetimeString = datetime.toLocaleString();
  document.title = datetimeString;
}
setInterval(updateDateTime, 1000); // оновлюємо час кожну секунду

updateDateTime();

let marquee = document.getElementById("marquee");
let datetime = document.getElementById("datetime");

function shiftDateTime() {
  const unit = "px";
  let position = Number.parseInt(datetime.style.right) || 0;
  let width = datetime.offsetWidth;

  position = position > marquee.offsetWidth ?
    -width :
    position + 1;

  datetime.style.right = position + unit;
  requestAnimationFrame(shiftDateTime);
}

shiftDateTime();

<!DOCTYPE html>
<html>

<head>
  <title>Date&Time marquee</title>
</head>

<body>
  <div id = "marquee">
    <span id = "datetime"></span>
  </div>
</body>

</html>

Вот мой код, все, что я смог сделать, это отобразить текущую дату и время в заголовке. В итоге наша программа должна отображать текущую дату и время в заголовке страницы и анимировать их в виде бегущей строки справа налево. Как мне это сделать?

Отвечает ли это на ваш вопрос? Как сделать так, чтобы текст внутри тега title анимировался с помощью JavaScript?

— 08.04.2023 17:33

У вас нет понятия px в заголовках веб-страниц. Это просто простые строки

— 08.04.2023 17:38

Кстати, мне действительно не нравится связанный вопрос. Ваша логика верна, и я бы сохранил ваш код, просто добавьте пробелы в конце, чтобы переместить заголовок

— 08.04.2023 17:39

Мне нужна дата (чч:мм:сс), которая меняется каждую секунду и перемещается, а не только текст.

— 08.04.2023 17:40

javascript html

08.04.2023 17:29

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Просто добавляйте пробел на каждой итерации:

let i = 0;
function updateDateTime() {
  const datetime = new Date();
  const datetimeString = datetime.toLocaleString();
  const trailingSpaces = Array(i).fill().map(_=>' ').join('');
  document.title = trailingSpaces + datetimeString;
  i = (i + 1) % 10;
}
setInterval(updateDateTime, 100);

<!DOCTYPE html>
<html>

<head>
  <title>Date&Time marquee</title>
</head>

<body>
  <div id = "marquee">
    <span id = "datetime"></span>
  </div>
</body>

</html>

Я не понимаю почему, но моя линия не работает. Меняется только время.

— 08.04.2023 18:05

08.04.2023 17:48

Ответ принят как подходящий

символы первого пробела нельзя использовать в элементе заголовка html.
вместо этого вы можете использовать _.

let tittlemov = 0;
setInterval(()=>
  { 
  document.title = '_'.repeat(tittlemov++) 
                 + new Date().toLocaleString() 
                 + '_'.repeat(10 - tittlemov);
  tittlemov %= 10;
  }, 1000 );

08.04.2023 18:58

Другие вопросы по теме

JS-скрипт для пересчета значений html-таблицы

Обновите количество товаров на странице корзины

ReactJS, как сопоставить массив на основе порядка другого массива

Как настроить CSS для рабочего стола, но ниже другого элемента для планшета

Как динамически изменить размер двух div, которые существуют друг над другом, чтобы они оставались одинаковой высоты по мере роста одного

Как заставить JavaScript работать внутри элементов Imba?

Как щелкнуть div с событием роли кнопки в одном классе с несколькими элементами

Как сделать все даты в строке одинаковой высоты в HTML/CSS?

Как показать превью предыдущего и следующего изображения в карусели в Bootstrap 5

Почему мой контент смещается влево после того, как я нажимаю ссылку на раздел на панели навигации?

Бегущая строка даты и времени в <title> с использованием JavaScript

Ответы 2

Другие вопросы по теме

Похожие вопросы