小贝子编程

为什么只有两个我自己变色的潜水器可以工作



所以我的div中只有两个在工作并改变颜色，另外两个在旋转但不改变颜色。我尝试了很多方法，但仍然不起作用。我是编码新手，所以如果我错过了什么，我很抱歉。我希望他们四个人都能自行变色。这是我的密码。如果你能帮助我，我将不胜感激。

<head>
<style>
body {
background-color: black;
}

.div {
height: 200px;
width: 200px;
background-color: red;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.div2 {
height: 200px;
width: 200px;
background-color: rgb(0, 127, 255);
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.div3 {
height: 200px;
width: 200px;
background-color: rgb(9, 255, 0);
animation-name: spin2;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.div4 {
height: 200px;
width: 200px;
background-color: gold;
animation-name: spin2;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@keyframes spin2 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}

.center {
position: absolute;
left: 10%;
top: 30%;
transform: translate(-50%, -50%);
}

.center2 {
position: absolute;
left: 30%;
top: 30%;
transform: translate(-50%, -50%);
}

.center3 {
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -50%);
}

.center4 {
position: absolute;
left: 70%;
top: 30%;
transform: translate(-50%, -50%);
}

#div {
transition: 1s;
}

#div2 {
transition: 1s;
}

#div3 {
transition: 1s;
}

#div4 {
transition: 1s;
}
</style>
<script>
var i = 0;
function change() {
var doc = document.getElementById("div");
var color = ["red", "rgb(191, 0, 255)"];
doc.style.backgroundColor = color[i];
i = (i + 1) % color.length;
}
setInterval(change, 1000);
</script>
<script>
var i = 0;
function change() {
var doc = document.getElementById("div2");
var color = ["rgb(0, 127, 255)", "rgb(255, 204, 51)"];
doc.style.backgroundColor = color[i];
i = (i + 1) % color.length;
}
setInterval(change, 1000);
</script>
<script>
var i = 0;
function change() {
var doc = document.getElementById("div3");
var color = ["rgb(9, 255, 0)", "rgb(250, 214, 165)"];
doc.style.backgroundColor = color[i];
i = (i + 1) % color.length;
}
setInterval(change, 1000);
</script>
<script>
var i = 0;
function change() {
var doc = document.getElementById("div4");
var color = ["gold", "rgb(141, 153, 163)"];
doc.style.backgroundColor = color[i];
i = (i + 1) % color.length;
}
setInterval(change, 1000);
</script>
</head>
<body>
<div id="div" class="div center"></div>
<div id="div2" class="div2 center2"></div>
<div id="div3" class="div3 center3"></div>
<div id="div4" class="div4 center4"></div>

感谢

您的变量名到处都是。在不大量修改代码的情况下，这将起作用：

var i = 0;
function change() {
var doc = document.getElementById("div");
var color = ["red", "rgb(191, 0, 255)"];
doc.style.backgroundColor = color[i];
i = (i + 1) % color.length;
}
setInterval(change, 1000);
var i2 = 0;
function change2() {
var doc = document.getElementById("div2");
var color = ["rgb(0, 127, 255)", "rgb(255, 204, 51)"];
doc.style.backgroundColor = color[i];
i2 = (i2 + 1) % color.length;
}
setInterval(change2, 1000);
var i3 = 0;
function change3() {
var doc = document.getElementById("div3");
var color = ["rgb(9, 255, 0)", "rgb(250, 214, 165)"];
doc.style.backgroundColor = color[i];
i3 = (i3 + 1) % color.length;
}
setInterval(change3, 1000);
var i4 = 0;
function change4() {
var doc = document.getElementById("div4");
var color = ["gold", "rgb(141, 153, 163)"];
doc.style.backgroundColor = color[i];
i4 = (i4 + 1) % color.length;
}
setInterval(change4, 1000);


var i = 0;
function change0() {
var doc = document.getElementById("div1");
var color = ["red", "rgb(191, 0, 255)"];
doc.style.backgroundColor = color[i];
i = (i + 1) % color.length;
}
setInterval(change0, 100);


function change1() {
var doc = document.getElementById("div2");
var color = ["rgb(0, 127, 255)", "rgb(255, 204, 51)"];
doc.style.backgroundColor = color[i];
i = (i + 1) % color.length;
}
setInterval(change1, 200);


function change2() {
var doc = document.getElementById("div3");
var color = ["rgb(9, 255, 0)", "rgb(250, 214, 165)"];
doc.style.backgroundColor = color[i];
i = (i + 1) % color.length;
}
setInterval(change2, 300);


function change3() {
var doc = document.getElementById("div4");
var color = ["gold", "rgb(141, 153, 163)"];
doc.style.backgroundColor = color[i];
i = (i + 1) % color.length;
}
setInterval(change3, 400);

body {
background-color: black;
}

.div {
height: 200px;
width: 200px;
background-color: red;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.div2 {
height: 200px;
width: 200px;
background-color: rgb(0, 127, 255);
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.div3 {
height: 200px;
width: 200px;
background-color: rgb(9, 255, 0);
animation-name: spin2;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.div4 {
height: 200px;
width: 200px;
background-color: gold;
animation-name: spin2;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@keyframes spin2 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}

.center {
position: absolute;
left: 10%;
top: 30%;
transform: translate(-50%, -50%);
}

.center2 {
position: absolute;
left: 30%;
top: 30%;
transform: translate(-50%, -50%);
}

.center3 {
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -50%);
}

.center4 {
position: absolute;
left: 70%;
top: 30%;
transform: translate(-50%, -50%);
}

#div {
transition: 1s;
}

#div2 {
transition: 1s;
}

#div3 {
transition: 1s;
}

#div4 {
transition: 1s;
}
<body>
<div id="div1" class="div center"></div>
<div id="div2" class="div2 center2"></div>
<div id="div3" class="div3 center3"></div>
<div id="div4" class="div4 center4"></div>
</body>

这是因为所有这些var变量都在同一范围内。所有这些<script>标记都在同一个执行堆栈上运行。

您可以简单地更改每个<script>中的变量名i来查看它。

<head>
<style>
body {
background-color: black;
}

.div {
height: 200px;
width: 200px;
background-color: red;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.div2 {
height: 200px;
width: 200px;
background-color: rgb(0, 127, 255);
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.div3 {
height: 200px;
width: 200px;
background-color: rgb(9, 255, 0);
animation-name: spin2;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.div4 {
height: 200px;
width: 200px;
background-color: gold;
animation-name: spin2;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@keyframes spin2 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}

.center {
position: absolute;
left: 10%;
top: 30%;
transform: translate(-50%, -50%);
}

.center2 {
position: absolute;
left: 30%;
top: 30%;
transform: translate(-50%, -50%);
}

.center3 {
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -50%);
}

.center4 {
position: absolute;
left: 70%;
top: 30%;
transform: translate(-50%, -50%);
}

#div {
transition: 1s;
}

#div2 {
transition: 1s;
}

#div3 {
transition: 1s;
}

#div4 {
transition: 1s;
}
</style>
<script>
var i = 0;
function change() {
var doc = document.getElementById("div");
var color = ["red", "blue"];
doc.style.backgroundColor = color[i];
i = (i + 1) % color.length;
}
setInterval(change, 1000);
</script>
<script>
var j = 0;
function change() {
var doc = document.getElementById("div2");
var color = ["rgb(0, 127, 255)", "rgb(255, 204, 51)"];
doc.style.backgroundColor = color[j];
j = (j + 1) % color.length;
}
setInterval(change, 1000);
</script>
<script>
var k = 0;
function change() {
var doc = document.getElementById("div3");
var color = ["rgb(9, 255, 0)", "rgb(250, 214, 165)"];
doc.style.backgroundColor = color[k];
k = (k + 1) % color.length;
}
setInterval(change, 1000);
</script>
<script>
var l = 0;
function change() {
var doc = document.getElementById("div4");
var color = ["gold", "rgb(141, 153, 163)"];
doc.style.backgroundColor = color[l];
l = (l + 1) % color.length;
}
setInterval(change, 1000);
</script>
</head>
<body>
<div id="div" class="div center"></div>
<div id="div2" class="div2 center2"></div>
<div id="div3" class="div3 center3"></div>
<div id="div4" class="div4 center4"></div>
</body>

PLUS：尝试使用let而不是var。因为var变量在最上面的作用域中，将是全局对象的属性(浏览器中为window(。在JS中阅读更多关于可变吊装的信息。

这里有一个简单的、可重用的类。只需传入div的名称、颜色列表和(可选(setInterval()的超时。

class Spinner {
constructor(div, colors, speed = 1000) {
this.index = 0;
this.div = document.getElementById(div);
this.colors = colors;
setInterval((() => {
this.div.style.backgroundColor = this.colors[this.index++ % this.colors.length];
}).bind(this), speed);
}
}
new Spinner("div", ["red", "rgb(191, 0, 255)"]);
new Spinner("div2", ["rgb(0, 127, 255)", "rgb(255, 204, 51)"]);
new Spinner("div3", ["rgb(9, 255, 0)", "rgb(250, 214, 165)"]);
new Spinner("div4", ["gold", "rgb(141, 153, 163)"]);
body {
background-color: black;
}
.div {
height: 200px;
width: 200px;
background-color: red;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.div2 {
height: 200px;
width: 200px;
background-color: rgb(0, 127, 255);
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.div3 {
height: 200px;
width: 200px;
background-color: rgb(9, 255, 0);
animation-name: spin2;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.div4 {
height: 200px;
width: 200px;
background-color: gold;
animation-name: spin2;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin2 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.center {
position: absolute;
left: 10%;
top: 30%;
transform: translate(-50%, -50%);
}
.center2 {
position: absolute;
left: 30%;
top: 30%;
transform: translate(-50%, -50%);
}
.center3 {
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -50%);
}
.center4 {
position: absolute;
left: 70%;
top: 30%;
transform: translate(-50%, -50%);
}
#div {
transition: 1s;
}
#div2 {
transition: 1s;
}
#div3 {
transition: 1s;
}
#div4 {
transition: 1s;
}
<div id="div" class="div center"></div>
<div id="div2" class="div2 center2"></div>
<div id="div3" class="div3 center3"></div>
<div id="div4" class="div4 center4"></div>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium