JS-使用空格键更改元素的颜色
[英]JS - changing the colours of elements with spacebar presses
问题描述
I have a program that is supposed to this: If I press the spacebar, it is supposed to change the colour of an element to red, then, if it is still pressed after 700 milliseconds, it is supposed to change the background of another element to green. 
我有一个程序应该执行以下操作：如果按空格键，应将某个元素的颜色更改为红色，然后，如果在700毫秒后仍按该键，则应更改另一个元素的背景绿色。 If I stop pressing the spacebar before 700 milliseconds, it should become black. 如果我在700毫秒之前停止按空格键，它将变成黑色。 Then, after one element becomes green, it should start a timer, and also "blink" the elements (quickly alternate between black and red/green every 200 milliseconds). 然后，当一个元素变为绿色后，它应该启动一个计时器，并“闪烁”这些元素（每200毫秒在黑色和红色/绿色之间快速交替）。 However, it is not working properly. 但是，它不能正常工作。 Here is my code: 这是我的代码：
//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>
1 个解决方案
解决方案1
0 已采纳 2017-09-09 16:04:04
Since you are interested in knowing when the spacebar has been released, you should use onkeyup and onkeydown events. 由于您想知道何时释放空格键，因此应该使用onkeyup和onkeydown事件。 Your event handlers can then start and stop timers accordingly. 然后，事件处理程序可以相应地启动和停止计时器。 Here's a "quick and dirty" solution that you can refine further. 这是一个“快速而肮脏的”解决方案，您可以进一步完善。
var stage = 0; // 0 = reset, 1 = red, 2 = blinking var red = document.getElementById('red'); var green = document.getElementById('green'); var timerId1 = null; var timerId2 = null; function doBlink() { stage = 2; timerId2 = setInterval(function() { if (red.className === "") { red.className = "hidden"; green.className = ""; } else { red.className = ""; green.className = "hidden"; } }, 200); } function setupGreen() { timerId1 = setTimeout(function() { if (stage === 1) { green.className = ""; doBlink(); } }, 700); } function reset() { stage = 0; green.className = "hidden"; red.className = "hidden"; if (timerId1) { clearTimeout(timerId1); timerId1 = null; } if (timerId2) { clearTimeout(timerId2); timerId2 = null; } } document.body.onkeydown = function(e) { if (e.keyCode == 32) { if (stage === 0) { stage = 1; red.className = ""; setupGreen(); } } } document.body.onkeyup = function(e) { if (e.keyCode == 32) { if (stage === 1) { reset(); } } }
.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; background: red; } #green { float: right; background: green; } .hidden { background: black !important; }
<html> <head> <title>My website</title> </head> <body> <header> <h1>My website</h1> </header> <div class="timer"> <div id="red" class="hidden"></div> <div id="green" class="hidden"></div> <button onclick="reset()">reset</button> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.