3
我有一个包含3个按钮的页面。该页面的默认背景为gif。 Button 1应使背景变黑。 Button 2应该将背景更改回gif。 当您将鼠标悬停在button 3上时，背景闪烁red和。覆盖/更改背景的问题
加载后，我可以将背景设置为black，但不能返回到gif。 Button 3作品不管gif或black背景，但使用它后，我不能使用button 1将背景更改为black。 （并且button 2仍然不起作用） 如何获得这3个按钮来完成他们的工作，并更改背景？
var myHoverInterval = null;
function switchfunction() {
if (document.body.style.background === 'red') {
document.body.style.background = 'green';
} else {
document.body.style.background = 'red';
}
}
window.onload = function() {
// Get references to the DOM elements you'll work with
var bdy = document.body;
var btn = document.getElementById("changeBackgroundButton");
var btn2 = document.getElementById("changeBackgroundBackButton")
var btn3 = document.getElementById("trippyBackground")
// Set up the button to have a click event handler:
btn.addEventListener("click", function() {
/* Just remove the image and the page will revert to the previously set color */
bdy.style.backgroundImage = "url('')";
});
btn.style.color = "red";
btn2.addEventListener("click", function() {
/* Just remove the image and the page will revert to the previously set color */
bdy.style.backgroundImage = "url(https://media.giphy.com/media/ko7twHhomhk8E/giphy.gif) no-repeat center center fixed";
});
btn3.addEventListener("mouseover", function() {
if (myHoverInterval != null) {
return;
}
myHoverInterval = setInterval(function() {
switchfunction();
}, 500);
});
btn3.addEventListener("mouseout", function() {
if (myHoverInterval != null) {
clearInterval(myHoverInterval);
myHoverInterval = null;
}
});
}<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
background: url(https://media.giphy.com/media/ko7twHhomhk8E/giphy.gif) no-repeat center center fixed;
background-size: cover;
background-color: black;
}
</style>
</head>
<body>
<p>
<button id="changeBackgroundButton" style="color:white; font-size: 150%;background-color :lightblue">Click this button if the page is slow, it's probably due to the background</button> <br>
<button id="changeBackgroundBackButton" style="color:white; font-size: 150%;background-color :lightblue">Try to load the background again</button> <br>
<button id="trippyBackground" style="color:white; font-size: 150%;background-color :lightblue">trolololol?</button>
</p>
</body>
</html>