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

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

转载作者：行者123 更新时间：2023-11-29 23:18:26

25

4

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

文章推荐： php - mysql转储命令与 'waiting for table lock property'

文章推荐： java - 从火力地堡检索数据

文章推荐： c# - 访问SQL Server数据库的登录表单错误

MSSQL监控数据库的DDL操作(创建，修改，删除存储过程，创建，修改，删除表等)
前言：有时候，一个数据库有多个帐号，包括数据库管理员，开发人员，运维支撑人员等，可能有很多帐号都有比较大的权限，例如DDL操作权限(创建，修改，删除存储过程，创建，修改，删除表等），账户多了，管理
javascript - 使用 Storybook 创建 React App 创建 webpack 问题
所以我用 Create React App 创建并设置了一个大型 React 应用程序。最近我们开始使用 Storybook 来处理和创建组件。它很棒。但是，当我们尝试运行或构建应用程序时，我们不断遇
javascript - 创建 Angular Directive(指令)以重用代码 - 创建 html 时解析错误
遵循我正在创建的控件的代码片段。这个控件用在不同的地方，变量也不同。我正在尝试编写指令来清理代码，但在 {{}} 附近插入值时出现解析错误。刚接触 Angular ，无法确定我错过了什么。请帮忙。
java - 创建 JAX-RS 提供程序以从 InputStream 创建 Java Image
我正在尝试创建一个 image/jpeg jax-rs 提供程序类，它为我的基于 post rest 的 Web 服务创建一个图像。我无法制定请求来测试以下内容，最简单的测试方法是什么？ @POST
c - 当我使用 FILE 创建 txt 文件时，Dev C++ 创建 test.txt
我一直在 Windows 10 的模拟器中练习 c。后来我改用dev C++ IDE。当我在 C 中使用 FILE 时。创建的文件的名称为 test.txt ，而我给出了其他名称。请帮助解决它。下面
ios - 为什么我们不遵循使用 xib 创建 customTableViewCell 的相同过程，就像使用 xib 创建 customView 一样？
当我们创建自定义 View 时，我们将 View 文件的所有者设置为自定义类，并使用 initWithFrame 或 initWithCode 对其进行实例化。当我们创建 customUITable
创建 Pthreads
我正在尝试为函数 * Producer 创建一个线程，但用于创建线程的行显示错误。我为这句话加了星标，但我无法弄清楚它出了什么问题...... #include #include #include
创建、调用JavaScript对象的方法集锦
今天在做项目时，遇到了需要创建JavaScript对象的情况。所以Bing了一篇老外写的关于3种创建JavaScript对象的文章，看后跟着打了一遍代码。感觉方法挺好的，在这里与大家分享一下。 &
python - 创建 StringToSign
我正在阅读将查询字符串传递给 Amazon 的 S3 以进行身份验证的文档，但似乎无法理解 StringToSign 的创建和使用方式。我正在寻找一个具体示例来说明 (1) 如何构造 String
c# - 创建、不等待和确保任务完成的正确方法
前言:我对 C# 中任务的底层实现不太了解，只了解它们的用法。为我在下面屠宰的任何东西道歉: 对于“我怎样才能开始一项任务但不等待它？”这个问题，我找不到一个好的答案。在 C# 中。更具体地说，即使任
linq - 创建 ILookups
我有一个由一些复杂的表达式生成的 ILookup。假设这是按姓氏查找人。 (在我们简单的世界模型中，姓氏在家庭中是唯一的) ILookup families; 现在我有两个对如何构建感兴趣的查询。首
WIX bundle 创建
我试图创建一个 MSI，其中包含和 exe。在 WIX 中使用了捆绑选项。这样做时出错。有人可以帮我解决这个问题。下面是代码: 错误 error LGH
Yii 创建、更新具有不同字段的表单
在 Yii 中，Create 和 Update 通常使用相同的形式。因此，如果我在创建期间有电子邮件、密码、...other_fields...等字段，但我不想在更新期间专门显示电子邮件和密码字段，但
qt - 创建 QModelIndex
上周我一直在努力创建一个给定一行和一列的 QModelIndex。或者，我会满足于在已经存在的 QModelIndex 中更改 row() 的值。任何帮助，将不胜感激。编辑: QModelInd
C: 创建、传递和访问指向常量字符串的常量指针数组
出于某种原因，这不起作用: const char * str_reset_command = "\r\nReset"; const char * str_config_command = "\r\nC
r - 创建 "other"字段
现在，我有以下由 original.df %.% group_by(Category) %.% tally() %.% arrange(desc(n)) 创建的 data.frame。 DF 5),
vim - 创建〜/.vimrc后错误打开文件
在今天之前，我使用/etc/vim/vimrc来配置我的vim设置。今天，我想到了创建.vimrc文件。所以，我用 touch .vimrc cat /etc/vim/vimrc > .vimrc 所
iPhone:创建 MKAnnotation
我可以创建一个 MKAnnotation，还是只读的？我有坐标，但我发现使用 setCooperative 手动创建 MKAnnotation 并不容易。想法？最佳答案 MKAnnotation
iphone - 创建 NSDictionary
在以下代码中，第一个日志语句按预期显示小数，但第二个日志语句记录 NULL。我做错了什么？ NSDictionary *entry = [[NSDictionary alloc] initWithOb
php - 创建/添加多维数组值时的未定义偏移
我正在使用与此类似的代码动态添加到数组； $arrayF[$f+1][$y][$x+1] = $value+1; 但是我在错误报告中收到了这个: undefined offset :1 问题:尝试创

首页

博学

6Ren·AI

商城

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