Question

我对JS，Jquery和CSS比较陌生。

我正在寻找写《西蒙·说说》风格的游戏。当我尝试为计算机设置动画以自动点亮所需的正方形时，我没有得到所需的结果。

我的解决方案是使彩色方块的透明度从0.5开始。每个方块都有一个ID。当该ID与正确的数字匹配时，我使用

$（this）.css（“ opacity”，“ 1”）;使它变亮

我不知道如何获得平方以自动更改回.5

我尝试使用setTimeout（）函数来延迟更改。即使代码延迟，它也不会改变。我同时使用了空白和.5作为值

<!DOCTYPE html>
<html>
<head>
    <title>Matchy Matchy</title>
    <link rel="stylesheet" type="text/css" href="simonSays.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <h1>Match the Colors!</h1>
    <div id="banner">
        <button id="reset">Reset</button>
        <span id="level">Level:1</span>
    </div>
    <div id="container">
        <div class="square" id="1"></div>
        <div class="square" id="2"></div>
        <div class="square" id="3"></div>
        <div class="square" id="4"></div>
        <div class="square" id="5"></div>
        <div class="square" id="6"></div>
    </div>

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

</body>
</html>

body{
    background-color:black;
    margin:0;
}

h1{
    color:white;
    text-align: center;
    background-color:steelblue;
    margin:0;
}

#banner{
    background-color:white;
    margin:0;
    text-align: center;
}


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

.square{
    background-color:pink;
    float:left;
    padding-bottom:30%;
    width:30%;
    margin:1.66%;
    opacity: 0.5;
    transition: opacity 0.5s;
    --webkit-transition: opacity 0.5s;
    --moz-transition: opacity 0.5s;
}

//variables
var level = 1;

//add event listeners for player use
//probably can make a class and use toggle to shorten code
$(".square").on("click",function(){
    $(this).css("opacity","1");
});
$(".square").on("mouseleave",function(){
   $(this).css("opacity",".5"); 
});

init();
doLevel(level); //test

function init(){
    //go through all squares and add a random color as background
    $(".square").each(function(i, obj){
        $(obj).css("backgroundColor", generateRandomColor());
    });
}

function doLevel(level){
    //get the colors to copy
    var pattern = selectColors(level);
    //showPattern(pattern);
    //test
    console.log(pattern[0]);
}


function generateRandomColor(){
    var color = "";
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);

    var color = "rgb(" + r + ", " + g + ", " + b + ")";
    return color;
}

function selectColors(amount){
    //declare array to hold values
    var order = [];
    //loop through amount
    for(var i = 0; i < amount; i++){
        order.push(Math.floor(Math.random() * 6 + 1));
    }

    return order;

}

function showPattern(pattern){
    //for each number in pattern,
    for(var i = 0; i < pattern.length; i++){
        //for each square on the screen
        $(".square").each(function(j,obj){
            var $this = $(this); //settimeout changes to global, so I am declaring locally here
            //if the ID is equal to the pattern number
            if(parseInt($(this).attr("id")) === parseInt(pattern[i])){
                //brighten
                console.log("light up");
                $(this).css("opacity","1");
                //dim
                setTimeout(function(){
                    console.log("changing back");
                    $this.css("opacity",".5");
                }, 3000);

            }
        })
    }
}

我希望不透明度恢复到0.5，但是样式保持为1。我没有尝试将其改回来。所以我想了解为什么它不会改变，第二，如果有更好的方法来实现这一点，我很想知道。

谢谢！

Answer 1

setTimeout将此this指针重置为全局范围，您最终会遇到问题。如果您在每次通话中使用该对象，那么世界上一切都很好；）

还请记住，不透明度是一个数字值，因此设置它时不需要用引号引起来。

$(document).ready(() => {
  $('.square').each((i, e) => {
    $(e).css('opacity', 1);
    setTimeout(() => {
      $(e).css('opacity', 0.5)
    }, 3000)
  });
});

.square{
  width: 50px;
  height: 50px;
  opacity: 0.5;
  background: #000;
  margin-bottom: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

另一种有趣的选择是使用jQuery动画。

$(document).ready(() => {
  $('.square').each((i, e) => {
    $(e).css('opacity', 1).animate({
      opacity: 0.5
    }, 3000);
  });
});

.square{
  width: 50px;
  height: 50px;
  opacity: 0.5;
  background: #000;
  margin-bottom: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

为什么我的CSS不透明度无法通过setTimeout（）转换回其原始状态.5？

1 个答案: