我希望颜色按顺序闪烁,因此第二次闪光将在第一次闪光结束后不在中间。 函数setTimeOut()只是重新安排执行,因此脚本不等待setTimeOut函数。
var array=["Gre","Red","Yel","Blu"];
var action=[];
var response=[];
function clickGreen(){
$("#buttonGre").addClass("activated");
setTimeout(function() {$("#buttonGre").removeClass("activated");}, 250);
}
function clickRed(){
$("#buttonRed").addClass("activated");
setTimeout(function() {$("#buttonRed").removeClass("activated");}, 250);
}
function clickYellow(){
$("#buttonYel").addClass("activated");
setTimeout(function() {$("#buttonYel").removeClass("activated");}, 250);
}
function clickBlue(){
$("#buttonBlu").addClass("activated");
setTimeout(function() {$("#buttonBlu").removeClass("activated");}, 250);
}
function buildAction(){
var step=Math.floor((Math.random() * 4));
action.push(array[step]);
for(var i=0;i<action.length;i++){
if(action[i]=="Gre"){
clickGreen();
}
if(action[i]=="Red"){
clickRed();
}
if(action[i]=="Yel"){
clickYellow();
}
if(action[i]=="Blu"){
clickBlue();
}
}
}
.gameContainer {
position:relative;
width:440px;
height:440px;
margin:0 auto;
margin-top: 50px;
border: solid 1px black;
border-radius: 50%;
background-color: grey;
}
.fourButton {
position:absolute;
width:190px;
height:190px;
margin: 20px;
pointer-events: none;
}
#buttonGre {
top:0;
left:0;
background-color:green;
border-radius:100% 0 0 0;
}
#buttonRed {
top:0;
right:0;
background-color:red;
border-radius:0 100% 0 0 ;
}
#buttonYel {
bottom:0;
left:0;
background-color:yellow;
border-radius:0 0 0 100%;
}
#buttonBlu {
bottom:0;
right:0;
background-color:blue;
border-radius:0 0 100% 0 ;
}
#center {
position:absolute;
background-color:white;
border: 20px solid grey;
width:200px;
height:200px;
top:100px;
left:100px;
border-radius:50%;
}
.activated {
opacity: .5;
}
#labl{
margin-left: 50px;
margin-top:40px;
font-family: Arial;
font-size:200%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gameContainer ">
<div id="buttonGre" class="fourButton"></div>
<div id="buttonRed" class="fourButton"></div>
<div id="buttonYel" class="fourButton"></div>
<div id="buttonBlu" class="fourButton"></div>
<div id="center">
<div id="labl"><strong>SIMON</strong></div>
<center>
</br>
<button id="count">--</button>
<button id="start" onclick="buildAction()">start</button>
<button id="strict">strict</button></br>
</br>
<button id="restart">Restart</button></center>
</div>
</div>