JavaScript 函数不适用于渐变

JavaScript function not working with gradients

本文关键字：渐变 适用于 不适用 函数 JavaScript      更新时间：2023-09-26

很抱歉问题标题含糊不清， 

var background = [
  "background: linear-gradient(to left, #F0C27B, #4B1248)",
  "background: linear-gradient(to left, #5614B0, #DBD65C)",
  "background: linear-gradient(to left, #004FF9, #FFF94C)",
  "background: linear-gradient(to left, #FFA17F, #00223E)",
  "/css/1.png",
  "/css/2.png",
  "/css/3.png",
  "/css/4.png"
];
setInterval(function() {
  var chosenImage = Math.floor(Math.random() * (8));
  if chosenImage < 4 {
    document.body.style.backgroundColor = "url(" + background[chosenImage] + ")";
  } else {
    document.body.style.backgroundImage = "url(" + background[chosenImage] + ")";
  }
}, 10000);

基本上，这（使用 css 和 html 文件）将网站上的背景图像打乱，每十秒显示一次随机图像。以前我有没有渐变的代码 

var images = ["1.png", "2.png", ...] (up to 4)

和这样的设置间隔

setInterval(function() {
  var chosenImage = Math.floor(Math.random() * (4));
  document.body.style.backgroundImage = "url(" + background[chosenImage] + ")";
}, 10000);

它工作正常，但是一旦我实现了您在开始时在代码片段中看到的内容，图像就停止更改，而是显示我在 css 文件中指定的默认图像。

关于为什么它不随渐变而变化的任何想法？谢谢！

渐

变设置方式有几点问题。

首先，您不希望在样式中包含background:，因为您已经直接分配给backgroundImage和backgroundColor属性。

其次，您不想用 url( ) 包装渐变版本。 url( )字面上期望一个URL，但你给它一个渐变。

最后，您不想使用 backgroundColor ，因为渐变被视为图像，因此您可以将脚本简化为类似的东西。

var background = [
    "linear-gradient(to left, #F0C27B, #4B1248)",
    "linear-gradient(to left, #5614B0, #DBD65C)",
    "linear-gradient(to left, #004FF9, #FFF94C)",
    "linear-gradient(to left, #FFA17F, #00223E)",
    "url(/css/1.png)",
    "url(/css/2.png)",
    "url(/css/3.png)",
    "url(/css/4.png)"
];
setInterval( function() {
    var chosenImage = Math.floor( Math.random( ) * 8 );
    document.body.style.background = background[ chosenImage ];
}, 10000 );

您的setInterval()函数存在几个问题：

  • 测试条件周围缺少括号
  • 对于 background 数组的前四个元素，您将背景图像设置为 "url("+[element]+")" ，但这些元素不是图像。相反，请将style直接设置为该。

以下应该可以解决问题：

setInterval(function() {
    var chosenImage = Math.floor(Math.random() * (8));
    if (chosenImage < 4) {
        document.body.style = background[chosenImage];
    } else {
        document.body.style.backgroundImage = "url(" + background[chosenImage] + ")";
    }
}, 10000);

这应该可以解决问题。

相关文章：