结合 2 个 JS 确实有麻烦

Question

我正在努力将两个 JS 合并为一个…我尝试在 JSFiddle 中尝试，但无法真正理解控制台错误…我试图让背景颜色与 div 中不断变化的背景 .svg 相结合......$(document).ready(function() { //Initializingvar i = 0;var images = []; //arrayvar time = 3000; // time in millie seconds//imagesimages[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)";//functionfunction 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();

});