Home>

jquery wants to return to the original color even if it changes for a moment

We are creating a typing game.
I almost completed it, but when I made a typo, I would like to implement a white background for a moment and return it immediately, but it doesn't work.
jquery is used in web application.
If the typed type matches and does not match, it is separated by if. If not,

$('body'). css ('background-color', 'white');
$('body'). delay (100) .queue (function () {
   $(this) .css ('background-color', 'rgb (206, 198, 198)');
});


It is said.
Then, the first time will be as expected, but if you make a typo more than once for some reason, it will remain white.
Thank you.

<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<link rel = "stylesheet" type = "text/css" href = "./ reset.css">
<link rel = "stylesheet" type = "text/css" href = "./ main.css">
<!-<link rel = "stylesheet" type = "text/js" href = "js/index.js">->
<!-<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src = "./ main.js"></script>
<title>Let's Typing!</title>
</head>
<body>


<ul>
­­­­­­­­<li>1</li>
Li<li>2</li>
­­­­­­­­<li>3</li>
Li<li>4</li>
­­­­­­­­<li>5</li>
Li<li>6</li>
­­­­­­­­<li>7</li>
­­­­­­­­<li>8</li>
Li<li>9</li>
­­­­­­­­<li>0</li>
­­­­­­­­<li>-</li>
­­­­­­­­<li>^</li>
­­­­­­­­<li>\</li>
<li>Back<br>space</li>
</ul>­­­­­­­
<ul>
­­­­­­­­<li>Tab</li>
­­­­­­­­<li>Q</li>
<li>W</li>
­­­­­­­­<li>E</li>
­­­­­­­­<li>R</li>
Li<li>T</li>
­­­­­­­­<li>Y</li>
­­­­­­­­<li>U</li>
­­­­­­­­<li>I</li>
­­­­­­­­<li>O</li>
­­­­­­­­<li>P</li>
­­­­­­­­<li>@</li>
­­­­­­­­<li>[</li>
<li>Enter</li>
</ul>­­­­­­­
<ul>
­­­­­­­­<li>Control</li>
­­­­­­­­<li>A</li>
­­­­­­­­<li>S</li>
<li>D</li>
­­­­­­­­<li>F</li>
Li<li>G</li>
­­­­­­­­<li>H</li>
­­­­­­­­<li>J</li>
­­­­­­­­<li>K</li>
­­­­­­­­<li>L</li>
­­­­­­­­<li>;</li>
­­­­­­­­<li>:</li>
­­­­­­­­<li>]</li>
</ul>­­­­­­­
<ul>
<li>Shift</li>
­­­­­­­­<li>Z</li>
­­­­­­­­<li>X</li>
Li<li>C</li>
Li<li>V</li>
<li>B</li>
­­­­­­­­<li>N</li>
­­­­­­­­<li>M</li>
­­­­­­­­<li>,</li>
­­­­­­­­<li>.</Li>
­­­­­­­­<li>/</li>
­­­­­­­­<li>_</li>
<li>Shift</li>­­­­­­­­</ul>­­­­­­­
<ul>
<li>Capslock</li>
­­­­­­­­<li>option</li>
­­­­­­­­<li>command</li>
<li>alphanumeric</li>
­­­­­­­­<li>Space</li>
Li<li>Kana</li>
­­­­­­­­<li>command</li>
­­­­­­­­<li>fn</li>
<li>◀ ︎</li>
­­­­­­­­<li>▲   ▼</li>
­­­­­­­­<li>▶ ︎</li>
</ul>­­­­­­­


</body>
</html>
* {
box-sizing: border-box;
}
body {
background-color: rgb (206, 198, 198);
}
.question {
color: rgb (61, 43, 43);
text-align: center;
font-size: 75px;
font-weight: 600;
padding: 50px;
margin-bottom: 40px;
}
.question span: nth-child (1) {
color: red;
}
.keyboard ul {
list-style: none;
margin: 0 auto;
text-align: center;
height: 50px;
width: 900px;
}
.keyboard li, .keyboard .selectKey {
color: rgb (209, 144, 144);
font-size: 25px;
display: inline-block;
border-radius: 10% 10%;
min-width: 50px;/* * /
font-weight: 550;
height: 50px;/* * /
vertical-align: top;
line-height: 50px;/* * /
background-color: rgb (61, 43, 43);
}
.keyboard .backspace, .keyboard .tab, .keyboard .control, .keyboard .shift, .keyboard .capslock, .keyboard .option, .keyboard .command, .keyboard .space, .keyboard .enter {
letter-spacing: -2px;
font-size: 14px;/* * /
}
.keyboard .backspace {
line-height: 22.5px;/* * /
padding: 2px;/* * /
}
.keyboard .nonBorder {
height: 50px;/* * /
}
.selectKey {
line-height: 25px;/* * /
height: 25px;/* * /
display: block;
}
.keyboard .selectKey {
width: 60px;
font-size: 20px;
}
.keyboard .enter {
height: 116px;
width: 53px;
margin-left: 24px;
}
.line0 {
padding-left: 1px;
}
.line2 {
padding-right: 57px;
}
.line3 {
padding-left: 4px;
}
.line4 {padding-right: 3px;
}
.keyboard .key1 {
width: 76px;
}
.keyboard .control {
width: 76px;
}
.keyboard .shift {
width: 92px;
}
.keyboard .capslock, .keyboard .command {
width: 69px;
}
.keyboard .space {
width: 139px;
}
/ * Heart basic * /
.heart {
width: 50px;
height: 45px;
position: relative;
}
.heart :: before,
.heart :: after {
position: absolute;
content: "";
left: 25px;
top: 3px;
width: 28px;
height: 45px;
background: red;
border-radius: 50% 50% 0 0/31.3% 31.3% 0 0;
transform: rotate (-45deg);
transform-origin: 0 100%;
z-index: -10;
}
.heart :: after {
left: -3px;
background: red;
transform: rotate (45deg);
transform-origin: 100% 100%;
}
$(function () {
let questions = new Array ("hello", "goodbye", "yes", "no");
function selectQuestion () {
let question = '';
let randnum = Math.floor (Math.random () * 3);
questions [randnum] .split (''). forEach (function (c) {
question + = '<span>' + c + '</span>';
});
$('. question'). html (question);
return randnum;
};
function setKey () {
$(". keyboard." + questions [qNumber] [chrNumber-1]). html ('' + charactor + '');// Now put html on the problem character on the browser keyboard insert
$(". keyboard." + questions [qNumber] [chrNumber-1]). children (). css ({color: 'white', height: '50px', lineHeight: '46px'});// Color etc. Put on
$(". keyboard." + questions [qNumber] [chrNumber-1]). css ('background-color', 'transparent');// Delete the original color
};
let chrNumber = 1;// how many characters of the word in question
let qNumber = selectQuestion ();// How many words in the array (chosen at random)
let charactor = $(". keyboard." + questions [qNumber] [0]). text ();
setKey ();
$(window) .keydown (function (e) {
console.log (e.keyCode);
if ($('. question span: nth-child (' + chrNumber + ')'). text () == String.fromCharCode (e.keyCode) .toLowerCase ()) {
// return color
$('. question span: nth-child (' + chrNumber + ')'). css ('color', 'rgb (61, 43, 43)');
$(". keyboard." + String.fromCharCode (e.keyCode) .toLowerCase ()). html (String.fromCharCode (e.keyCode)). css ({color: 'rgb (209, 144, 144)', backgroundColor: 'rgb (61, 43, 43)'});
if (chrNumber<questions [qNumber] .length) {
chrNumber + = 1;
charactor = $(". keyboard." + questions [qNumber] [chrNumber-1]). text ();
// change the color
$('. question span: nth-child (' + chrNumber + ')'). css ('color', 'red');
setKey ();
} else {
chrNumber = 1;
qNumber = selectQuestion ();
charactor = $(". keyboard." + questions [qNumber] [0]). text ();
setKey ();
}
} else {
$('body'). css ('background-color', 'white');
$('body'). delay (100) .queue (function () {
$(this) .css ('background-color', 'rgb (206, 198, 198)');
});
}
})
})
jquery
  • Answer # 1

    .dequeue ()needs to be executed.

    $('html') .on ('click', function () {
    $('body') .css ('background-color', 'pink');
    $('body') .delay (100) .queue (function () {
        $(this) .css ('background-color', 'rgb (206, 198, 198)') .dequeue ();
    });
});

    Working sample:https://jsfiddle.net/szjrp9tx/

    【. queue () | jQuery API Documentation】
    https://api.jquery.com/queue/#queue-queueName-callback

    【. dequeue () | jQuery API Documentation】
    https://api.jquery.com/dequeue/

    [Use .queue () when you want to use .css () or .addClass () before and after animation in jQuery-Darthima Engineering]

      

    Note that it is necessary to do $(this) .dequeue () in the function specified as the argument of the queue method. Since dequeue signals that processing has ended, if not described, queue processing will stop there.

  • Answer # 2 

    $('body'). css ('background-color', 'white');
setTimeout (function () {
  $('body'). css ('background-color', 'rgb (206, 198, 198)');
}, 100);


    I made it for the time being.
    But I don't know why it's not good, so if you know why, please let me know. .

Related articles

Trends