如何实现标题随时间动态变化？setInterval字符动态显隐咨询

Hey Justin! You’re spot-on that setInterval is the right approach for these periodic dynamic effects. Let’s walk through how to build both the text appear/disappearing animation and the changing page title step by step with working code examples.

1. Dynamic Text Appear/Disappear Effect #

There are a few ways to pull off this effect—cycling through different phrases, toggling visibility, or even building text character by character. Here’s a simple, flexible example that swaps between text options every second, with an optional fade transition for smoother visuals:

Basic HTML Setup #

<div id="dynamic-text">Initial Text</div>

Option 1: Instant Text Cycling #

This swaps text instantly every second:

const textCycle = ["First Phrase", "Second Phrase", "Third Phrase", "Fourth Phrase"];
let currentTextIndex = 0;
const textElement = document.getElementById("dynamic-text");

// Run every 1000ms (1 second)
const textInterval = setInterval(() => {
  // Update the text content
  textElement.textContent = textCycle[currentTextIndex];
  // Loop back to the start when we reach the end of the array
  currentTextIndex = (currentTextIndex + 1) % textCycle.length;
}, 1000);

Option 2: Fade In/Out Transition #

For a smoother visual effect, add CSS transitions and adjust the JavaScript to sync with the animation:

#dynamic-text {
  opacity: 1;
  transition: opacity 0.5s ease; /* Match this timing to your JS delay */
}

#dynamic-text.fade-out {
  opacity: 0;
}

const textCycle = ["First Phrase", "Second Phrase", "Third Phrase", "Fourth Phrase"];
let currentTextIndex = 0;
const textElement = document.getElementById("dynamic-text");

const textInterval = setInterval(() => {
  // Trigger fade out
  textElement.classList.add("fade-out");
  
  // Wait for the fade to finish before updating text
  setTimeout(() => {
    currentTextIndex = (currentTextIndex + 1) % textCycle.length;
    textElement.textContent = textCycle[currentTextIndex];
    // Fade back in
    textElement.classList.remove("fade-out");
  }, 500); // Matches the CSS transition duration
}, 1000);

2. Dynamic Page Title Updates #

Changing the page title on a timer is super straightforward—just update document.title inside your setInterval callback. Here are two common use cases:

Example 1: Cycling Page Titles #

const titleCycle = ["My Original Title", "🔄 Updated Title!", "📢 New Content!", "My Original Title"];
let currentTitleIndex = 0;

const titleInterval = setInterval(() => {
  document.title = titleCycle[currentTitleIndex];
  currentTitleIndex = (currentTitleIndex + 1) % titleCycle.length;
}, 1000);

Example 2: Blinking Notification Title #

Mimic a "new message" blink effect by toggling between the original title and a notification:

const originalTitle = document.title;
let showOriginalTitle = true;

const titleInterval = setInterval(() => {
  document.title = showOriginalTitle ? "🔔 New Notification!" : originalTitle;
  showOriginalTitle = !showOriginalTitle;
}, 1000);

Important Tips #

• Don’t forget to clean up intervals when you’re done with them (using clearInterval(textInterval) or clearInterval(titleInterval)) to avoid memory leaks—this is especially important if your app uses single-page routing or dynamic components.
• Adjust the 1000ms value if you need faster or slower updates.
• For more complex text animations (like typing letter by letter), modify the interval to add one character at a time instead of swapping full phrases.

Hope these examples help you replicate the effects you observed! Let me know if you need to tweak anything for your specific use case.

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