javascript - 当我转换它们时，div 左侧出现一条线

Question

    var numSquares = 6;
    var containerId = document.getElementById("container");
    var jumbotronId = document.getElementById("jumbotronId");
    var newGame = document.getElementById("newGame");
    var easyGame = document.getElementById("easyGame");
    var hardGame = document.getElementById("hardGame");
    var header = document.getElementById("header");
    var modeOfGame = document.getElementsByClassName("mode")

    var divData = document.getElementsByClassName("square");

    var ans = document.getElementsByClassName("dick");
    var head = document.getElementById("rgbHeader");
    var message = document.getElementById("message");

    var newGameButton = document.getElementById("newGame");

    var pickedColor;

    var colors;







    newBgColor();
    newPickedColor();



console.log(colors);


function generateRandomColor(num){

  var arr = [];

  for(i = 0; i < num; i++){

    arr.push(randomRGB());


  }

  return arr;

}

  
  for(i = 0; i < modeOfGame.length; i++){

    modeOfGame[i].addEventListener("click", function(){
      modeOfGame[0].classList.remove("selected");
      modeOfGame[1].classList.remove("selected");
      this.classList.add("selected");

      this.textContent === "Easy" ? numSquares = 3 : numSquares = 6;

      newBgColor();





    });

  }
  

  






    function randomNum() {
      return Math.floor(Math.random() * 256);
    }
    

    function randomRGB() {
      var color = "rgb(" + randomNum() + ", " + randomNum() + ", " + randomNum() + ")"

      return color;

      }



    function newBgColor(){

      header.style.backgroundColor = "rgb(70, 130, 180)";




       colors = generateRandomColor(numSquares);

        for(i = 0; i < divData.length; i++){


        if(colors[i]){
        divData[i].style.backgroundColor = colors[i];
        divData[i].style.display = "block";

        }else{
          divData[i].style.display = "none";

        }



        }
        




      }



    function newPickedColor(){

      message.textContent = "";


      pickedColor = colors[Math.floor(Math.random() * colors.length)]


      head.textContent = pickedColor;



    }





      newGame.addEventListener("click", function(){

      

       numSquares === 3 ? difficult = false : difficult = true;



        newBgColor(difficult);
        newPickedColor();




      });

  
      for(i = 0; i < modeOfGame.length; i++){


        modeOfGame[i].addEventListener("click", function(){
          modeOfGame[0].classList.remove("selected");
          modeOfGame[1].classList.remove("selected");
          this.classList.add("selected");

          this.textContent ==="Easy"? numSquares = 3 : numSquares = 6;

          newBgColor();
          newPickedColor();


        });

      }
      






 

      function changeColor(color){

        for(i = 0; i < divData.length; i++){

          if(divData[i].style.backgroundColor === color){

            continue
          }else{

            divData[i].style.backgroundColor = color;
          }


        }


      }






    









      for(i = 0; i < colors.length; i++){


      


      divData[i].addEventListener("click", function(){
      
     var clickedColor = this.style.backgroundColor;


      if(clickedColor === pickedColor){


        changeColor(clickedColor);

        header.style.backgroundColor = pickedColor;


        message.textContent = "Correct!"
        newGame.textContent = "Play Again?"
      }else{

        this.style.backgroundColor = "#232323";


        message.textContent = "Try Again!"
      }


      });



      }


      newGameButton.addEventListener("click", function(){

        this.textContent = "New Colors";


      });

body{

	background-color: #232323;
	font-family: "Montserrat", "Avenir";
	margin: 0px;



}

#myNav{


	background-color: white;
	text-align: center;
	height: 30px;




}



#jumbotronId{


	height: 150px;

}






.square{
	

	width: 30%;
	padding-bottom: 25%; 
	margin: 1.66%;
	float: left;
	border-radius: 20%;
	transition: background-color 0.5s;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;




}

#container{
	margin: 20px auto;
	max-width: 600px;




}

#header{

	text-align: center;
	color: white;
	text-transform: uppercase;
	line-height: 1.1;
	padding-top: 20px;
	padding-bottom: 20px;
	font-weight: normal;
	background-color: steelblue;
	margin: 0px auto;
	transition: background-color 0.5s;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;


}





#headerContainer{

	margin: 0 auto;
	max-width: 800px;

}


#message{

	display: inline-block;
	width: 20%;
}

button{

	border: none;
	background: none;
	text-transform: uppercase;
	height: 100%;
	font-weight: 700;
	color: #4682b4;
	letter-spacing: 1px;
	font-size: inherit;
	transition: background-color .3s, color .3s;
	-moz-transition: background-color .3s, color .3s;
	-webkit-transition: background-color .3s, color .3s;
}



button:hover{

	background-color: steelblue;
	color: white;
}

#rgbHeader{

	font-size: 200%;
}


.selected{

	background-color: steelblue;
	color: white;
}

<!DOCTYPE html>
<html>
<head>
	<title>RGB Guessing Game</title>



	<script type="text/javascript" src = "rgb.js" async></script>

	<link rel="stylesheet" href = "rgb.css">

</head>
<body>


	
		
		<h1 id = "header">THE GREAT <br><span id = "rgbHeader">ddd</span><br> GUESSING GAME</h1>

  





<div id = "myNav">




		<button id = "newGame">New Color</button>






        <span id = "message"></span>

  

    
        <button class = "mode">Easy</button>
        <button class = "mode selected">Hard</button>






    

</div>


<div id = "container">



	


		<div id = "rgb0" class = "square"></div>
		<div id = "rgb1" class = "square"></div>
		<div id = "rgb2" class = "square"></div>

		<div id = "rgb3" class = "square"></div>
		<div id = "rgb4" class = "square"></div>
		<div id = "rgb5" class = "square"></div>




	



</div>










</body>
</html>

我遵循了有关如何使用 HTML、CSS 和 Javascript 制作 RGB 猜谜游戏的在线教程。我遇到了一个问题，当我点击它时，div 方 block ，特别是左边部分，似乎没有正确转换。他们留下随机的线条。

我尝试将填充属性从指示的“15%”更改为 20px 和 2em，并且线条似乎消失了。但是，我仍然很好奇为什么每次我使用百分比值时，方 block 都会留下线条。

当我转换方 block 时不应出现随机线条。

图像链接将显示当我单击左侧的方 block 时发生的情况

enter image description here

Answer 1

当方 block 被隐藏时，你使用

this.style.backgroundColor = "#232323";

如果设置了边框，这可能会导致问题。相反，使用 opacity: 0; 这将是

this.style.opacity = "0";

此外，不要忘记更新您的 CSS 转换:

transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;

最后，请确保您的代码保持整洁。把它隔开那么多会让其他人难以阅读。示例代码已更新，包含更紧凑的间距，这应该有助于提高可读性。

var numSquares = 6;
var containerId = document.getElementById("container");
var jumbotronId = document.getElementById("jumbotronId");
var newGame = document.getElementById("newGame");
var easyGame = document.getElementById("easyGame");
var hardGame = document.getElementById("hardGame");
var header = document.getElementById("header");
var modeOfGame = document.getElementsByClassName("mode")

var divData = document.getElementsByClassName("square");

var ans = document.getElementsByClassName("dick");
var head = document.getElementById("rgbHeader");
var message = document.getElementById("message");

var newGameButton = document.getElementById("newGame");

var pickedColor;

var colors;


newBgColor();
newPickedColor();

console.log(colors);

function generateRandomColor(num) {
  var arr = [];
  for (i = 0; i < num; i++) {
    arr.push(randomRGB());
  }
  return arr;
}
for (i = 0; i < modeOfGame.length; i++) {
  modeOfGame[i].addEventListener("click", function() {
    modeOfGame[0].classList.remove("selected");
    modeOfGame[1].classList.remove("selected");
    this.classList.add("selected");
    this.textContent === "Easy" ? numSquares = 3 : numSquares = 6;
    newBgColor();
  });
}

function randomNum() {
  return Math.floor(Math.random() * 256);
}

function randomRGB() {
  var color = "rgb(" + randomNum() + ", " + randomNum() + ", " + randomNum() + ")"
  return color;
}

function newBgColor() {
  header.style.backgroundColor = "rgb(70, 130, 180)";
  colors = generateRandomColor(numSquares);
  for (i = 0; i < divData.length; i++) {
    if (colors[i]) {
      divData[i].style.backgroundColor = colors[i];
      divData[i].style.display = "block";
    } else {
      divData[i].style.display = "none";
    }
  }
}

function newPickedColor() {
  message.textContent = "";
  pickedColor = colors[Math.floor(Math.random() * colors.length)]
  head.textContent = pickedColor;
}
newGame.addEventListener("click", function() {
  numSquares === 3 ? difficult = false : difficult = true;
  newBgColor(difficult);
  newPickedColor();
});
for (i = 0; i < modeOfGame.length; i++) {
  modeOfGame[i].addEventListener("click", function() {
    modeOfGame[0].classList.remove("selected");
    modeOfGame[1].classList.remove("selected");
    this.classList.add("selected");
    this.textContent === "Easy" ? numSquares = 3 : numSquares = 6;
    newBgColor();
    newPickedColor();
  });
}

function changeColor(color) {
  for (i = 0; i < divData.length; i++) {
    if (divData[i].style.backgroundColor === color) {
      continue
    } else {
      divData[i].style.backgroundColor = color;
    }
  }
}
for (i = 0; i < colors.length; i++) {
  divData[i].addEventListener("click", function() {
    var clickedColor = this.style.backgroundColor;
    if (clickedColor === pickedColor) {
      changeColor(clickedColor);
      header.style.backgroundColor = pickedColor;
      message.textContent = "Correct!"
      newGame.textContent = "Play Again?"
    } else {
      this.style.opacity = "0";
      message.textContent = "Try Again!"
    }
  });
}
newGameButton.addEventListener("click", function() {
  this.textContent = "New Colors";
});

body {
  background-color: #232323;
  font-family: "Montserrat", "Avenir";
  margin: 0px;
}

#myNav {
  background-color: white;
  text-align: center;
  height: 30px;
}

#jumbotronId {
  height: 150px;
}

.square {
  width: 30%;
  padding-bottom: 25%;
  margin: 1.66%;
  float: left;
  border-radius: 20%;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
}

#container {
  margin: 20px auto;
  max-width: 600px;
}

#header {
  text-align: center;
  color: white;
  text-transform: uppercase;
  line-height: 1.1;
  padding-top: 20px;
  padding-bottom: 20px;
  font-weight: normal;
  background-color: steelblue;
  margin: 0px auto;
  transition: background-color 0.5s;
  -webkit-transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
}

#headerContainer {
  margin: 0 auto;
  max-width: 800px;
}

#message {
  display: inline-block;
  width: 20%;
}

button {
  border: none;
  background: none;
  text-transform: uppercase;
  height: 100%;
  font-weight: 700;
  color: #4682b4;
  letter-spacing: 1px;
  font-size: inherit;
  transition: background-color .3s, color .3s;
  -moz-transition: background-color .3s, color .3s;
  -webkit-transition: background-color .3s, color .3s;
}

button:hover {
  background-color: steelblue;
  color: white;
}

#rgbHeader {
  font-size: 200%;
}

.selected {
  background-color: steelblue;
  color: white;
}

<!DOCTYPE html>
<html>

<head>
  <title>RGB Guessing Game</title>
  <script type="text/javascript" src="rgb.js" async></script>
  <link rel="stylesheet" href="rgb.css">
</head>

<body>
  <h1 id="header">THE GREAT <br><span id="rgbHeader">ddd</span><br> GUESSING GAME</h1>
  <div id="myNav">
    <button id="newGame">New Color</button>
    <span id="message"></span>
    <button class="mode">Easy</button>
    <button class="mode selected">Hard</button>
  </div>
  <div id="container">
    <div id="rgb0" class="square"></div>
    <div id="rgb1" class="square"></div>
    <div id="rgb2" class="square"></div>
    <div id="rgb3" class="square"></div>
    <div id="rgb4" class="square"></div>
    <div id="rgb5" class="square"></div>
  </div>
</body>

</html>