如何用JavaScript实现页面标题日期时间的跑马灯滚动效果？

你的问题在于之前的跑马灯逻辑是针对页面内的DOM元素做位置偏移，而页面标题（<title>）是纯文本内容，无法通过CSS定位实现滚动，必须通过循环截取字符串的方式模拟滚动效果。以下是实现方案：

核心思路 #

1. 实时获取并更新日期时间字符串，作为滚动的源文本
2. 维护一个滚动偏移量，每隔固定时间（比如100ms）将源文本从偏移量处截断，把后半部分拼到前面，设置为新的页面标题
3. 偏移量超出文本长度时重置，实现循环滚动

完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Date&Time marquee</title>
</head>
<body>
  <!-- 页面内元素可根据需求保留或删除，不影响标题滚动 -->
</body>
</html>

// 全局变量存储滚动相关数据
let currentDatetimeStr = '';
let scrollOffset = 0;
const scrollInterval = 100; // 滚动速度，值越小越快

// 更新日期时间字符串
function updateDateTime() {
  const datetime = new Date();
  currentDatetimeStr = datetime.toLocaleString();
  // 首次更新时直接设置标题，避免等待滚动定时器
  document.title = currentDatetimeStr;
}

// 处理标题滚动
function scrollTitle() {
  if (!currentDatetimeStr) return;
  
  // 从偏移量处截断字符串，拼接成滚动后的文本
  const scrolledText = currentDatetimeStr.slice(scrollOffset) + ' ' + currentDatetimeStr.slice(0, scrollOffset);
  document.title = scrolledText;
  
  // 更新偏移量，超出长度后重置
  scrollOffset = (scrollOffset + 1) % currentDatetimeStr.length;
}

// 启动定时器
setInterval(updateDateTime, 1000); // 每秒更新日期时间
setInterval(scrollTitle, scrollInterval); // 定时滚动标题

// 初始化执行一次
updateDateTime();

关键细节说明 #

• 滚动速度控制：调整scrollInterval的值可以改变滚动快慢，比如设为50ms会比100ms更快
• 字符串拼接优化：在截断的两部分之间加了一个空格，避免文本首尾衔接过于生硬
• 循环逻辑：通过(scrollOffset + 1) % currentDatetimeStr.length实现偏移量的循环重置，确保滚动不会停止

内容的提问来源于stack exchange，提问作者Mykola