JS控制背景渐变无法随奇偶数字切换问题求助

问题1：无效的CSS属性值 #

你的JavaScript代码中，奇数分支的backgroundImage值末尾多了一个多余的分号，导致浏览器无法解析这个渐变样式：

// 错误写法（末尾多了分号）
bgImg.style.backgroundImage = "linear-gradient(45deg, #051937, #A8EB12);";

浏览器遇到无效值会直接忽略该样式设置，所以背景只会停留在第一次生效的偶数渐变。

问题2：逻辑顺序不匹配 #

原代码先判断i的奇偶性，再执行i--并更新页面显示，这会导致显示的数字与背景对应的奇偶性不一致：

• 初始i=10，判断为偶数并设置对应背景，然后显示9（奇数），此时背景是偶数样式，但页面显示奇数数字。

问题3：边界处理不完善 #

当i<0时，你只更新了页面显示为0，但i会继续递减为负数，后续循环仍会判断负数的奇偶性，不符合需求。

修复后的完整JS代码 #

const element = document.getElementById("title");
var bgImg = document.getElementById("bg");
var i = 10;

setInterval(function () {
  // 先更新显示的数字，确保背景与显示的数字奇偶对应
  element.innerHTML = i;

  if (i % 2 === 0) {
    bgImg.style.backgroundImage = "linear-gradient(45deg, #845EC2, #FF6F91)";
    console.log("even");
  } else {
    // 移除末尾多余的分号
    bgImg.style.backgroundImage = "linear-gradient(45deg, #051937, #A8EB12)";
    console.log("odd");
  }

  i--;

  // 当i小于0时，重置为0，保持显示0并停止递减
  if (i < 0) {
    i = 0;
    element.innerHTML = 0;
  }
}, 1500);

额外优化建议 #

你的CSS中#bg的宽度设置为100vh，这在宽屏设备上会导致横向滚动条，建议改为100vw以适配视口宽度：

#bg {
  height: 100vh;
  width: 100vw; /* 替换100vh为100vw */
  background-repeat: no-repeat;
}

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