语音气泡不会每 30 秒出现一次

Question

我正在尝试创建一个每 30 秒出现在浮动按钮旁边的对话气泡。我已经添加了必要的 HTML、JavaScript 和 CSS 样式，但对话框没有按预期显示。

这是我的代码：

<div class="floating-button" style="
      position: fixed;
      bottom: 20px;
      right: 20px; /* Changed from left to right */
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #ff6347;
      box-shadow: 0 0 15px rgba(255, 99, 71, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: box-shadow 0.3s ease;
      cursor: pointer;
    " onmouseover="this.style.boxShadow='0 0 25px rgba(255, 99, 71, 1)'" onmouseout="this.style.boxShadow='0 0 15px rgba(255, 99, 71, 0.6)'">
            <!-- Image Inside the Button -->
      <img src="https://files.oaiusercontent.com/file-U1rw4cb2Q4LKzu41EK5M5J6S?se=2024-09-04T17%3A08%3A10Z&sp=r&sv=2024-08-04&sr=b&rscc=max-age%3D604800%2C%20immutable%2C%20private&rscd=attachment%3B%20filename%3D69cadf7d-9e41-48cd-aa92-8361b108725b.webp&sig=PVKZ92cCPlN8LRuR0RcR/wTJvaA%2BOuSJ5Ew7UwPh/74%3D" alt="Button Image" style="
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
      ">
    </div>

<!-- Add a container for the speech bubble -->
<div class="speech-bubble-container" style="
  position: fixed;
  bottom: 80px;
  right: 20px;
"></div>

<script>
  // Get the speech bubble container
  const speechBubbleContainer = document.querySelector('.speech-bubble-container');

  // Function to create a speech bubble
  function createSpeechBubble(message) {
    const speechBubble = document.createElement('div');
    speechBubble.className = 'speech-bubble';
    speechBubble.textContent = message;
    speechBubble.style = `
      background-color: #fff;
      border-radius: 10px;
      padding: 10px;
      font-size: 16px;
      font-weight: bold;
      color: #333;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      animation: fadeOut 2s forwards;
    `;
    speechBubbleContainer.appendChild(speechBubble);

    // Remove the speech bubble after 2 seconds
    setTimeout(() => {
      speechBubble.remove();
    }, 2000);
  }

  // Create a speech bubble every 30 seconds
  setInterval(() => {
    createSpeechBubble('Hi');
  }, 30000);
</script>

对话气泡并未按预期每 30 秒出现一次。我尝试过将 CSS 样式移至 HTML 代码中，但这也不起作用。

谁能帮我找出问题所在吗？

Answer 1

你的代码是正确的，我将其缩短到 3 秒进行演示

// Get the speech bubble container
const speechBubbleContainer = document.querySelector('.speech-bubble-container');

// Function to create a speech bubble
function createSpeechBubble(message) {
  const speechBubble = document.createElement('div');
  speechBubble.className = 'speech-bubble';
  speechBubble.textContent = message;

  speechBubbleContainer.appendChild(speechBubble);

  // Remove the speech bubble after 2 seconds
  setTimeout(() => {
    speechBubble.remove();
  }, 2000);
}

// Create a speech bubble every 30 seconds
setInterval(() => {
  createSpeechBubble('Hi');
}, 3000);

.floating-button {
  position: fixed;
  bottom: 20px;
  right: 20px; /* Changed from left to right */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #ff6347;
  box-shadow: 0 0 15px rgba(255, 99, 71, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s ease;
  cursor: pointer;
}

.floating-button:hover {
  box-shadow: 0 0 25px rgba(255, 99, 71, 1);
}

.button-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.speech-bubble-container {
  position: fixed;
  bottom: 80px;
  right: 20px;
}

.speech-bubble {
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  animation: fadeOut 2s forwards;
}

<div class="floating-button">
  <!-- Image Inside the Button -->
  <img src="https://picsum.photos/412/370" alt="Button Image" class="button-img">
</div>

<!-- Add a container for the speech bubble -->
<div class="speech-bubble-container"></div>