结合 2 个 JS 确实有麻烦

Question

我正在努力将两个 JS 合并为一个…我尝试在 JSFiddle 中尝试，但无法真正理解控制台错误…

我试图让背景颜色与 div 中不断变化的背景 .svg 相结合......

$(document).ready(function() {

 //Initializing

var i = 0;

var images = []; //array

var time = 3000; // time in millie seconds

//images

images[0] = "url(http://www.cyrill-kuhlmann.de/verve/img/logo_1.svg)";

images[1] = "url(http://www.cyrill-kuhlmann.de/verve/img/logo_2.svg)";

images[2] = "url(http://www.cyrill-kuhlmann.de/verve/img/logo_3.svg)";

images[3] = "url(http://www.cyrill-kuhlmann.de/verve/img/logo_4.svg)";

//function

function changeImage() {

var el = document.getElementById('header');

el.style.backgroundImage = images[i];

if (i < images.length - 1) {

    i++;

} else {

    i = 0;

}

setTimeout('changeImage()', time);

}

window.onload = changeImage;

$(function setbackground() {

        window.setTimeout( "setbackground()", 2000);

var index = Math.round(Math.random() * 4);

var ColorValue = "FA89CB";

if(index == 1)

ColorValue = "FAED96";

if(index == 2)

ColorValue = "D27DFA";

if(index == 3)

ColorValue = "6CFA64";

if(index == 4)

ColorValue = "8370FA";

document.getElementsByTagName("body")[0].style.backgroundColor = "#" + ColorValue;

});

});

这是我的小提琴： http://jsfiddle.net/gmck02ru/1/

有人有线索吗——我想我到目前为止还没有真正理解我在这里做什么……请帮忙！

Answer 1

问题是因为您用来定义setbackground()函数的语法不正确。您已将其放置在 jQuery 对象中。该函数也从未被调用。您应该将其定义为独立函数并在页面加载时调用它。此外，您还可以对逻辑进行一些改进。使用addEventListener()超过设置onclick或其他onX事件属性。在定义数组本身的同时声明数组的元素。使用数组来保存背景颜色，而不是对语句进行硬编码if。在递增计数器时使用模运算符，以节省必须编写逻辑来重置的操作0如果您想要重复更新背景颜色，就像对图像所做的那样，请将调用放在函数setTimeout()中setbackground()。直接使用document.body而不是通过标签名获取$(document).ready(function() {  let i = 0;  let images = [    "url(http://www.cyrill-kuhlmann.de/verve/img/logo_1.svg)",    "url(http://www.cyrill-kuhlmann.de/verve/img/logo_2.svg)",    "url(http://www.cyrill-kuhlmann.de/verve/img/logo_3.svg)",    "url(http://www.cyrill-kuhlmann.de/verve/img/logo_4.svg)"  ];  let backgroundColours = ['#FAED96', '#D27DFA', '#6CFA64', '#8370FA']  function changeImage() {    let el = document.getElementById('header');    el.style.backgroundImage = images[i];    i = ++i % (images.length - 1)    setTimeout(changeImage, 3000);  }  changeImage();  function setbackground() {    let index = Math.round(Math.random() * 4);    document.body.style.backgroundColor = backgroundColours[index];    setTimeout(setbackground, 2000);  }  setbackground();});