gpt4 book ai didi

javascript - 创建一个后退按钮以在数组中使用

转载 作者:行者123 更新时间:2023-11-29 23:18:26 25 4
gpt4 key购买 nike

所以我目前正在做一个小项目网站,基本上是在按下按钮时改变背景颜色。但我也在尝试实现一个“后退”按钮,以便在我创建的颜色数组中向后退,所有正在生成的颜色代码都将保存在该数组中。但是正如您在测试项目时看到的那样,后退按钮不起作用,我知道那是因为在调用“prevColor”函数时没有保存“i”变量。

function prevColor() {
(i == randomColors.length ? bodyStyle.backgroundColor = randomColors[i-2] : bodyStyle.backgroundColor = randomColors[i-1])
};

这是我无法解决的部分,但请随时通过下面提供的链接或通过代码片段(单击打开)在 jsfiddle.net 上检查整个代码。

https://jsfiddle.net/jamal000/kobmajyx/

var button = document.querySelector("#change");
var buttonStyle = button.style;
var bodyStyle = document.querySelector("body").style;
var p = document.querySelector("p");
var i = 0;
var randomColors = [];
var hue;
var HSLcolor;
var back = document.querySelector("#back");


button.addEventListener("click", randomHSL);
back.addEventListener("click", prevColor);

function randomHSL(){
hue = Math.floor((Math.random() * 360) + 1);
HSLcolor = `HSL(${hue}, 80%, 70%)`;

bodyStyle.backgroundColor = HSLcolor;
randomColors.push(`${HSLcolor}`);

p.textContent = "Color: " + randomColors[i];
i++;

p.style.color, buttonStyle.borderColor = `HSL(${hue + 180}, 80%, 70%)`;
p.style.color = buttonStyle.borderColor;
};

function prevColor(){
(i == randomColors.length ? bodyStyle.backgroundColor = randomColors[i-2] : bodyStyle.backgroundColor = randomColors[i-1])
};
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
transition: all 0.5s ease;
}

#change {
height: 40.6px;
width: 200px;
outline: none;
font-family: Raleway;
font-size: 15px;
font-weight: 600;
text-decoration: none;
border: 2px solid darkgrey;
border-radius: 10px;
background-color: #f1f1f1;
color: black;
box-shadow: 5px 7px 40px rgba(0,0,0,0.5);
}

#change:hover {
color: #666666;
box-shadow: 7px 10px 40px rgba(0,0,0,0.4);
transition: all 0.5s ease;
}

:active {
border-color: #666666;
transition: all 0.5s ease;
}

p {
font-family: Raleway;
font-weight: 500;
}

#back {
outline: none;
margin-right: 5px;
background-color: inherit;
border: 2px solid #2f2f2f;
border-radius: 5px;
}

#back:hover {
border-color: #aaa;
transition: all 0.5s ease;

}

#back:active {
transition: all 0.2s ease;
color: #aaa;
background-color: inherit;
}

div {
margin-right: 38.172px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Color Toggle</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Raleway:500" rel="stylesheet">
</head>
<body>

<p>Color: White</p>

<div>
<button id="back"> &#9668; </button>
<button id="change">Click for a surprise!!!</button>
</div>

<script src="toggle.js"></script>
</body>
</html>

最佳答案

首先我想澄清一下 UI

<p id="color"></p>
<p id="current"></p>
<button id="back"> &#9664; </button>
<button id="new">Click for a surprise!!!</button>
<button id="next"> &#9654; </button>

如果我们想要后退和前进,让我们有单独的按钮。还有一个令人惊讶的按钮,它将新颜色推送到数组并将索引设置为该新颜色。

然后我会将所有 DOM 操作提取到一个方法中,我们称它为 applyColor。此外,我会将默认颜色值作为 colors 数组的第一项。并将 index 适当设置为 0。因此脚本应该可以将新颜色推送到 colors 数组,移动颜色 index 并通过 applyColor() 调用更新 UI。

const colors = ['white'];
let index = 0;

function applyColor() {
const color = colors[index];
bodyStyle.backgroundColor = color;
colorElement.textContent = "Color: " + color;
currentElement.textContent = (index + 1) + " / " + colors.length;
}

function generateColor() { // bound with click on "new" button
const hue = Math.floor((Math.random() * 360) + 1);
const HSLcolor = `HSL(${hue}, 80%, 70%)`;
colors.push(HSLcolor);
index = colors.length - 1;
applyColor();
}

function prevColor(){ // bound with click on "back" button
index -= index > 0 ? 1 : 0;
applyColor();
}

function nextColor(){ // bound with click on "next" button
index += index < colors.length - 1 ? 1: 0;
applyColor();
}

applyColor();

这是更新后的演示:https://jsfiddle.net/dhilt/fz2dktxu/36/

关于javascript - 创建一个后退按钮以在数组中使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51771494/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com