时间戳

首页 > 解决方案 > 结合 2 个 JS 真的很麻烦

javascript - 结合 2 个 JS 真的很麻烦

问题描述

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

我正在尝试让背景颜色与 div 中不断变化的背景 .svg 相结合......</p> 

$(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/

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

标签： javascriptjquery

解决方案

问题是因为您用于定义setbackground()函数的语法不正确。您已将其放置在 jQuery 对象中。该函数也永远不会被调用。您应该将其定义为独立函数并在页面加载时调用它。

此外，您还可以对逻辑进行一些改进。

  • 使用addEventListener()over 设置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();
});

工作 jsFiddle - 请参阅小提琴中的演示，因为图像位于不安全的域中，因此无法从 SO 调用。

推荐阅读