页面加载时随机渐变背景间歇性无法生效的问题排查

数据老陈

2026-7-6

问题排查与解决方案

问题根源

你遇到的随机渐变背景偶尔失效的问题，核心原因是生成的随机十六进制颜色字符串长度可能不足6位：

Math.floor(Math.random() * 0xffffff)生成的数值范围是0到16777215（0xffffff）
当数值小于1048576（0x100000）时，toString(16)转换后的字符串长度会小于6位（例如0x1234转为"1234"）
CSS要求十六进制颜色必须是3位或6位，这种长度不足6位且非3位的颜色值是无效的，导致渐变背景无法被浏览器解析。

修复方案

修改getRandomColor函数，使用padStart(6, '0')确保生成的字符串始终是6位：

const getRandomColor = () => Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');

完整修改后的`backgroundColor`函数

function backgroundColor() {
    const getRandomColor = () => Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');

    const calculateAndSetBackground = () => {
        let color1, color2;

        do {
            color1 = getRandomColor();
            color2 = getRandomColor();
        } while (calculateContrast(color1, color2) < 4.5);

        document.body.style.background = `linear-gradient(to left top, #${color1}, #${color2})`;
    };

    showTask();
    calculateAndSetBackground();
}