1
J'ai un programme qui est censé ceci: Si j'appuie sur la barre d'espace, il est censé changer la couleur d'un élément en rouge, puis, s'il est encore pressé après 700 millisecondes, il est supposé changer le fond d'un autre élément en vert. Si j'arrête d'appuyer sur la barre d'espace avant 700 millisecondes, il devrait devenir noir. Ensuite, après qu'un élément devient vert, il doit démarrer une minuterie, et également "clignoter" les éléments (alterner rapidement entre le noir et le rouge/vert toutes les 200 millisecondes). Cependant, cela ne fonctionne pas correctement. Voici mon code:JS - changer les couleurs des éléments avec des presses de barre d'espace
//This is my main.js file
var toggleBtn = document.getElementById('toggle');
var redDiv = document.getElementById('red');
var greenDiv = document.getElementById('green');
var done = false;
var watchIsOn = false;//this is actually done in my timer.js
function blink() {
redDiv.style.background="red";
greenDiv.style.background="green";
}
function f1() {
if ((watchIsOn) && (!done)) {
//watch.stop(); This is a function in my timer.js
redDiv.style.background = "#111";
greenDiv.style.background = "#111";
toggleBtn.textContent = "start";
done = true;
}
else if ((!watchIsOn) && (!done)) {
//watch.start(); This is a function in my timer.js
toggleBtn.textContent = "stop";
setInterval(blink, 200);
redDiv.style.background = "#111";
greenDiv.style.background = "#111";
}
else if ((!watchIsOn) && (done)) {
//watch.reset(); This is a function in my timer.js
done = false;
f1();
}
}
function f2() {
//watch.reset(); This is a function in my timer.js
}
function green() {
window.onkeydown = function(Event) {
if ((Event.which == 32) && (!done)) {
greenDiv.style.background = "green";
}
}
}
window.onkeydown = function(Event) {
if ((Event.which == 32) && (!done)) {
redDiv.style.background = "red";
setTimeout(green, 700);
}
}
window.onkeyup = function(event) {
if (event.which == 32) {
f1();
}
else if ((watchIsOn) && (!done)) {
done = true;
//watch.stop(); This is a function in my timer.js
toggleBtn.textContent = "start";
}
}.timer {
background-color: #111;
color: aliceblue;
padding: 1%;
text-align: center;
}
#red, #green {
border-radius: 5px;
margin: 3%;
padding: 1px;
width: 41%;
height: 35px;
background-color: #111;
}
#red {
float: left;
}
#green {
float: right;
}<html>
<head>
<title>My website</title>
</head>
<body>
<header><h1>My website</h1></header>
<div class="timer">
<div id="red"></div> <div id="green"></div>
<h1 id="timer">0:00.000</h1><!-- I have a timer.js file that calculates the time and updates it over here. -->
<button id="toggle" onclick="f1();, watchisOn=true;">start</button>
<button onclick="f2()">reset</button>
<script src="timer.js"></script>
<script src="main.js"></script>
</div>
</body>
</html>
https://stacksnippets.net/js a un problème de syntaxe sur la ligne n ° 42 – Amit
Je ne sais pas pourquoi il dit que, parce que "window.onkeydown = function (Événement) {"est la ligne n ° 42! – Cubetastic
f1() code de la fonction génère ce numéro – Amit