javascript - 按钮保持选中状态，JS 中的 .classList 切换仅每隔一次运行

标签 javascript html css dom cross-browser

我正在尝试完善我正在参加的前端开发类(class)中的练习。该元素是一个随机颜色渐变背景生成器。

我正在使用 DOM 操作来设置颜色、通过 CSS 类为按钮设置动画等。

不过我对如何解决 3 件事有疑问:

1- 我的“随机化”按钮在按下后保持选中状态，并且它周围有一个可见的蓝色选择框。因此，在用户点击按钮之前，它不会播放悬停动画。

2- 我的 HTML 颜色输入元素的样式在 Firefox 和 CSS 动画中不起作用。我对修复兼容性不是很熟悉，所以想不通:/

3- 为了对两个颜色输入进行动画处理，我使用 classList.toggle javascript 方法来切换动画 CSS 类。当然，正如方法名称所暗示的那样，它切换 类，这意味着动画只会在用户单击随机化按钮时每隔一段时间播放一次。我尝试了很多“重新切换”类(class)的组合，但都无济于事。

我非常感谢任何关于这些问题的意见，因为它在学习过程中对我有很大帮助!

非常感谢您到目前为止的阅读，并提前感谢您的帮助!

代码如下(请原谅我它仍然不是很漂亮或重构:P):

// variables
var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var rndmBtn = document.getElementById("randomizerButton");
var body = document.getElementById("gradient");

//  generate a random color
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  };

// set the initial gradient on page load
function setGradient() {
    body.style.background = "linear-gradient(to right, " + color1.value + ", " + color2.value + ")";
    css.textContent = body.style.background + ";";
};

// picks two random colors, assigns them to variables and sets input value and BG as the new colors
function randomColors() {
    var rndmCol1 = getRandomColor();
    var rndmCol2 = getRandomColor();

    document.querySelector(".color1").setAttribute("value", rndmCol1);
    document.querySelector(".color2").setAttribute("value", rndmCol2);
    document.getElementById("gradient").style.background = "linear-gradient(to right, " + rndmCol1 + ", " + rndmCol2 + ")";
    css.textContent = body.style.background + ";";
};

// function for pressing the space bar
function pressSpace() {
    if  (event.keyCode === 32) {
        randomColors();
        animateButton();
    }
    };

// function for animated button

function animateButton() {
    color1.classList.toggle("animated");
    color2.classList.toggle("animated");  
};

function animateButton2() {
    color1.classList.toggle("animated");
    color2.classList.toggle("animated");  
};

// call function that sets initial gradient on page load
setGradient();

//  event listeners for color picking
window.addEventListener("load", randomColors);
rndmBtn.addEventListener("click", animateButton);
color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);
rndmBtn.addEventListener("click", randomColors);
window.addEventListener("keydown", pressSpace);
body {
    font: 'Raleway', sans-serif;
    color: rgba(0,0,0,0.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5em;
    top: 15%;
    background: linear-gradient(to right, #73ff01, #0bebeb);
}

h1 {
    font: 600 3.5em 'Raleway', sans-serif;
    color: rgba(0,0,0,0.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5em;
    width: 100%;
}

h3 {
    font: 900 1em 'Raleway', sans-serif;
    color: rgba(0,0,0,0.5);
    text-align: center;
    text-transform: none;
    letter-spacing: 0.01em;
}

h2 {
    font-family: 'Raleway', sans-serif;
}

#randomizerButton {
    display: block;
    margin: auto;
    margin-top: 30px;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    letter-spacing: .3em;
    padding: 10px;
    padding-right: 15px;
    padding-left: 15px;
    border: 1.5px solid;
    border-color:  rgba(0,0,0,0.5);
    background-color:  rgba(0,0,0,0.01);;
    border-radius: 20px;
    cursor: pointer;
}

#randomizerButton:hover {
    background-color:  rgba(0,0,0,0.2);;
    color: rgb(0, 0, 0);
}

#randomizerButton:active {
    background-color:  rgba(0,0,0,0.4);;
    color: rgb(0, 0, 0);
}

input[type=color]{
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 10px;
    background: none;
    cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

input[type="color"]::-webkit-color-swatch {
	border: none;
	border-radius: 10px;
}

.color1, .color2 {
    border: none;
}

.colorInfo {
    margin: auto;
    width: 50%;
    margin-top: 50px;
    border: 1.5px solid;
    border-color:  rgba(0,0,0,0.5);
    border-radius: 10px;
}


/* Input boxes Animation */

.animated {
    -webkit-animation: animation 1000ms linear both;
    animation: animation 1000ms linear both;
  }
  
/* Generated with Bounce.js */
  
  @-webkit-keyframes animation { 
    0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    3.6% { -webkit-transform: matrix3d(0.705, 0.717, 0, 0, -0.551, 0.841, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.705, 0.717, 0, 0, -0.551, 0.841, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    4.3% { -webkit-transform: matrix3d(0.606, 0.804, 0, 0, -0.641, 0.776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.606, 0.804, 0, 0, -0.641, 0.776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    7.21% { -webkit-transform: matrix3d(0.208, 0.987, 0, 0, -0.897, 0.463, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.208, 0.987, 0, 0, -0.897, 0.463, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    8.61% { -webkit-transform: matrix3d(0.06, 1.007, 0, 0, -0.957, 0.319, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.06, 1.007, 0, 0, -0.957, 0.319, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    12.91% { -webkit-transform: matrix3d(-0.179, 0.989, 0, 0, -1.005, 0.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.179, 0.989, 0, 0, -1.005, 0.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    13.51% { -webkit-transform: matrix3d(-0.191, 0.986, 0, 0, -1.004, -0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.191, 0.986, 0, 0, -1.004, -0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    17.22% { -webkit-transform: matrix3d(-0.198, 0.982, 0, 0, -0.997, -0.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.198, 0.982, 0, 0, -0.997, -0.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    19.72% { -webkit-transform: matrix3d(-0.163, 0.987, 0, 0, -0.995, -0.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.163, 0.987, 0, 0, -0.995, -0.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    26.03% { -webkit-transform: matrix3d(-0.053, 0.999, 0, 0, -0.998, -0.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.053, 0.999, 0, 0, -0.998, -0.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    28.33% { -webkit-transform: matrix3d(-0.024, 1, 0, 0, -0.999, -0.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.024, 1, 0, 0, -0.999, -0.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    32.23% { -webkit-transform: matrix3d(0.007, 1, 0, 0, -1, -0.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.007, 1, 0, 0, -1, -0.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    39.44% { -webkit-transform: matrix3d(0.017, 1, 0, 0, -1, 0.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.017, 1, 0, 0, -1, 0.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    44.74% { -webkit-transform: matrix3d(0.009, 1, 0, 0, -1, 0.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.009, 1, 0, 0, -1, 0.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    57.26% { -webkit-transform: matrix3d(-0.001, 1, 0, 0, -1, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.001, 1, 0, 0, -1, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    61.66% { -webkit-transform: matrix3d(-0.001, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.001, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    82.28% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    83.98% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    100% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
  }
  
  @keyframes animation { 
    0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    3.6% { -webkit-transform: matrix3d(0.705, 0.717, 0, 0, -0.551, 0.841, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.705, 0.717, 0, 0, -0.551, 0.841, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    4.3% { -webkit-transform: matrix3d(0.606, 0.804, 0, 0, -0.641, 0.776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.606, 0.804, 0, 0, -0.641, 0.776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    7.21% { -webkit-transform: matrix3d(0.208, 0.987, 0, 0, -0.897, 0.463, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.208, 0.987, 0, 0, -0.897, 0.463, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    8.61% { -webkit-transform: matrix3d(0.06, 1.007, 0, 0, -0.957, 0.319, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.06, 1.007, 0, 0, -0.957, 0.319, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    12.91% { -webkit-transform: matrix3d(-0.179, 0.989, 0, 0, -1.005, 0.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.179, 0.989, 0, 0, -1.005, 0.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    13.51% { -webkit-transform: matrix3d(-0.191, 0.986, 0, 0, -1.004, -0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.191, 0.986, 0, 0, -1.004, -0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    17.22% { -webkit-transform: matrix3d(-0.198, 0.982, 0, 0, -0.997, -0.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.198, 0.982, 0, 0, -0.997, -0.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    19.72% { -webkit-transform: matrix3d(-0.163, 0.987, 0, 0, -0.995, -0.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.163, 0.987, 0, 0, -0.995, -0.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    26.03% { -webkit-transform: matrix3d(-0.053, 0.999, 0, 0, -0.998, -0.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.053, 0.999, 0, 0, -0.998, -0.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    28.33% { -webkit-transform: matrix3d(-0.024, 1, 0, 0, -0.999, -0.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.024, 1, 0, 0, -0.999, -0.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    32.23% { -webkit-transform: matrix3d(0.007, 1, 0, 0, -1, -0.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.007, 1, 0, 0, -1, -0.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    39.44% { -webkit-transform: matrix3d(0.017, 1, 0, 0, -1, 0.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.017, 1, 0, 0, -1, 0.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    44.74% { -webkit-transform: matrix3d(0.009, 1, 0, 0, -1, 0.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.009, 1, 0, 0, -1, 0.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    57.26% { -webkit-transform: matrix3d(-0.001, 1, 0, 0, -1, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.001, 1, 0, 0, -1, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    61.66% { -webkit-transform: matrix3d(-0.001, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.001, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    82.28% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    83.98% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    100% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
  }

 /* Bounce In */

.hvr-bounce-in {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <title>Gradient Background</title>
</head>
<body id="gradient">
    <h1>Background Generator</h1>
    <input class="color1 animated" type="color" name="color1" id="" value="#73ff01">
    <input class="color2 animated" type="color" name="color2" id="" value="#0bebeb">
    <button id="randomizerButton" class="hvr-bounce-in">Randomize!</button>
    <div class="colorInfo">
        <h2>Current CSS Background</h2>
        <h3></h3>
    </div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

最佳答案

我可以帮助您解决按钮问题。单击该按钮后，该按钮仍处于事件状态，需要您再次单击它才能停用 => 这是我从您的问题中了解到的。

要解决这个问题，请编写一个简单的函数，在每次点击时切换按钮，这样您就不需要再次点击它来停用它。

function toggleBtn () { this.rndmBtn = !this.rndmBtn};

这应该有效。然后在需要点击按钮的地方调用 toggleBtn() 。 我希望这会有所帮助。

关于javascript - 按钮保持选中状态，JS 中的 .classList 切换仅每隔一次运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54668336/

上一篇：html - 适合窗口的图像网格

下一篇：html - 调整屏幕大小时问题居中 Logo

相关文章：

javascript - 带选择器的 jQuery appendTo()

javascript - Firebase Firestore : orderBy combined with where causes error "Operation was rejected"

html - CSS 将 HTML5 div 集中在屏幕底部

php - 我的 wordpress.ORG 主题破坏了评论功能

javascript - 标题淡出像素点触发

javascript - event.stopImmediatePropagation();适用于除 Firefox 以外的所有浏览器

javascript - 无法使用 jQuery 从字符串中删除反斜杠或连字符

javascript - 从自身获取对脚本作为 HTML DOM 元素的引用

javascript - 如何使导航栏在单击时向左延伸？ [推特 Bootstrap 3]

javascript - css3:尝试将translate3d动态应用到::after

©2024 IT工具网  联系我们