【发布时间】：2018-07-09 12:36:34
【问题描述】：
我创建了一个线性渐变并在 javascript 中对其进行动画处理，并将其设置为我网站的背景。然后我在 HTML 中添加了一个按钮，当单击渐变的颜色时，该按钮会切换出去。
现在我试图让按钮也改变我页面上模式的背景颜色，但我似乎无法弄清楚。谁能帮我看看我哪里出错了？ 我想我只是在针对模态 div 上的 .modal 类时遇到问题。
当我尝试添加更改模态背景的功能时，我将首先放置损坏的javascript。然后我把没坏掉的html、css、javascript放上去（不用代码改变模态背景。
损坏的 Javascript
var angle = -20, color = "#2b2b2b", colors = "#000", font = "rgba(102, 102, 102, .3)", shadow = "4px 4px 40px #000", modalz = "rgba(0, 0, 0, 0.6)";
var changeBackground = function() {
angle = angle + .3
document.body.style.backgroundImage = "linear-gradient(" + angle + "deg, " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color;
requestAnimationFrame(changeBackground)
}
var changeFont = function() {
document.querySelectorAll('li').forEach(li => li.style.color = font);
}
var changeShadow = function() {
document.querySelectorAll('li').forEach(li => li.style.textShadow = shadow);
}
var changeModal = function() {
document.body.style.modal.backgroundColor = "rgba(0, 0, 0, 0.6)";
}
changeBackground()
changeFont()
changeShadow();
document.querySelector('#myBtn').addEventListener('click', function () {
color = (color != "#2b2b2b") ? "#2b2b2b" : "#f1f9d4";
colors = (colors != "#000") ? "#000" : "#759ef3";
font = (font != "rgba(102, 102, 102, .3)") ? "rgba(102, 102, 102, .3)" : "rgba(178, 117, 164, .3)";
shadow = (shadow != "4px 4px 40px #000") ? "4px 4px 40px #000" : "4px 4px 40px #fff";
modalz = (modalz != "rgba(0, 0, 0, 0.6)") ? "rgba(0, 0, 0, 0.6)" : "rgba(240, 240, 240, 1)";
changeFont()
changeModal()
changeShadow();
})
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jacob Truax Portfolio</title>
<script src="main.js"></script>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js"></script>
</head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p> This is a test </p>
</div>
</div>
<!-- Button triggering color change -->
<div id="myBtn" class="Btn">
<button></button>
</div>
<!-- main content -->
<div class="main">
<ul>
<li id="hover1-1" class="fnup">fn-up</li>
<li id="hover1-2" class="about">about</li>
<li id="hover1-3" class="issue">issue 0</li>
<li id="hover1-4" class="contact">contact</li>
</ul>
</div>
CSS
/* The Modal (background) */
.modal {
color: #fff;
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 5; /* Sit on top */
padding-top: 20px; /* Location of the box */
padding-bottom: 20px;
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
margin: auto;
text-align: center;
padding: 20px;
width: 80%;
font-size: 3vw;
line-height: 6.4vh;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
display: none;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* End modal ============ */
body {
background-color: #d22c1f;
font-family:"Brrr", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 700;
font-size: 12vw;
overflow: hidden;
perspective: 1500px;
height: 100vh;
width: 100vw;
}
@media only screen and (min-width: 1600px) {
body {
font-size: 210px
}
}
/* a {
opacity: 0;
color: rgba(102, 102, 102, 0);
text-decoration: none;
display: inline-block;
} */
/* the main contet is in 3d space and rotates slightly with the cursor */
.main {
position: relative;
height: 100vh;
width: 100vw;
transform-style: preserve-3d;
backface-visibility: hidden;
transform: rotateX(0deg) rotateY(0deg);
}
li {
text-shadow: 4px 4px 40px #000;
color: rgba(102, 102, 102, .3);
padding-left: 60px;
top: -10px;
display: inline-block;
}
div.Btn {
position: fixed;
line-height:0;
font-size: 0px;
right: 3vw;
bottom: 3vh;
width: 36px;
height: 36px;
background-image: url(lib/frown.svg);
opacity: 0.3;
mix-blend-mode: overlay;
z-index: 2;
}
div.Btn:hover {
background-image: url(lib/smile.svg);
opacity: 0.3;
mix-blend-mode: overlay;
}
button {
width: 36px;
height: 36px;
border: none;
outline:none;
background: transparent;
border: none !important;
cursor: pointer;
font-size:0;
}
Javascript（未损坏）
var angle = -20, color = "#2b2b2b", colors = "#000", font = "rgba(102, 102, 102, .3)", shadow = "4px 4px 40px #000";
var changeBackground = function() {
angle = angle + .3
document.body.style.backgroundImage = "linear-gradient(" + angle + "deg, " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color;
requestAnimationFrame(changeBackground)
}
var changeFont = function() {
document.querySelectorAll('li').forEach(li => li.style.color = font);
}
var changeShadow = function() {
document.querySelectorAll('li').forEach(li => li.style.textShadow = shadow);
}
changeBackground()
changeFont()
changeShadow();
document.querySelector('#myBtn').addEventListener('click', function () {
color = (color != "#2b2b2b") ? "#2b2b2b" : "#f1f9d4";
colors = (colors != "#000") ? "#000" : "#759ef3";
font = (font != "rgba(102, 102, 102, .3)") ? "rgba(102, 102, 102, .3)" : "rgba(178, 117, 164, .3)";
shadow = (shadow != "4px 4px 40px #000") ? "4px 4px 40px #000" : "4px 4px 40px #fff";
changeFont()
changeShadow();
})
【问题讨论】：
标签： javascript