一次点亮一个关键点

时间：2017-05-11 05:48:06

标签： javascript

我需要帮助才能完成此代码。我需要按键一次点亮一个按键，而不是按下按钮时转动颜色。因此，如果你有“＆＃39; table＆＃39;”这个词，那么这个关键词是＆＃39; t＆＃39;如果按下按钮，将开始亮起。所以，当＆＃39; t＆＃39;按钮已被按下灯光关闭，并且＆＃39; a＆＃39; keyletter ligths up ...等等。

//var recognition = new SpeechRecognition();
 var q = document.getElementById("q");
 var recogResult;
 var resultAsArray;

var recognition = new webkitSpeechRecognition();

recognition.onresult = function(event) {
    if (event.results.length > 0) {
        recogResult = event.results[0][0].transcript;
        q.innerHTML = recogResult;
    }
    resultAsArray = recogResult.split(''); 
    console.log (resultAsArray);

   var i=0;
   while (i<resultAsArray.length) 
    { // as long as there are more letters in resultAsArray 
    // light 'i' letter 
    changeDivColor(resultAsArray[i]);

//下面的树线是我需要帮助的

    // wait for the 'i' letter(key) to be pressed 
    // when 'i' has been pressed than shut that key light and light the next 'i' letter(key)
    // this should continue until all 'i' have been ligted and pressed.

            i++;
    }
}

document.addEventListener("keydown", function(event) {
  console.log(event.which);
}

function changeDivColor(key) {
   //var myKey=resultAsArray [0];

switch (key) {
    case 'b' :document.getElementById("66").style.background="#c98c8c";
    break;
    case 'a' : document.getElementById("65").style.background="#c98c8c";
    break;
    case 'c' :document.getElementById("67").style.background="#c98c8c";
    break;
    case 'd' : document.getElementById("68").style.background="#c98c8c";
    break;
    case 'e' :document.getElementById("69").style.background="#c98c8c";
    break;
    case 'f' : document.getElementById("67").style.background="#c98c8c";
    break;
    case 'g' :document.getElementById("71").style.background="#c98c8c";
    break;
    case 'h' : document.getElementById("72").style.background="#c98c8c";
    break;
    case 'i' : document.getElementById("73").style.background="#c98c8c";
    break;
    case 'j' :document.getElementById("74").style.background="#c98c8c";
    break;
    case 'k' : document.getElementById("75").style.background="#c98c8c";
    break;
    case 'l' :document.getElementById("76").style.background="#c98c8c";
    break;
    case 'm' : document.getElementById("77").style.background="#c98c8c";
    break;
    case 'n' :document.getElementById("78").style.background="#c98c8c";
    break;
    case 'o' : document.getElementById("79").style.background="#c98c8c";
    break;
    case 'p' : document.getElementById("80").style.background="#c98c8c";
    break;
    case 'q' :document.getElementById("81").style.background="#c98c8c";
    break;
    case 'r' : document.getElementById("82").style.background="#c98c8c";
    break;
    case 's' :document.getElementById("83").style.background="#c98c8c";
    break;
    case 't' : document.getElementById("84").style.background="#c98c8c";
    break;
    case 'u' : document.getElementById("85").style.background="#c98c8c";
    break;
    case 'v' :document.getElementById("86").style.background="#c98c8c";
    break;
    case 'w' : document.getElementById("87").style.background="#c98c8c";
    break;
    case 'x' :document.getElementById("88").style.background="#c98c8c";
    break;
    case 'y' : document.getElementById("89").style.background="#c98c8c";
    break;
    case 'z' : document.getElementById("90").style.background="#c98c8c";
   }
}

//这是我的html - 虚拟键盘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="simrec.js"></script>

     <link rel="stylesheet" type="text/css" href="simcss.css" />
</head>
<body>



<p id="q">say a word</p>




    <div id="container">
<textarea id="write" rows="6" cols="60"></textarea>
<ul id="keyboard">
<li class="symbol"><span class="off">`</span><span class="on">~</span></li>
<li class="symbol"><span class="off">1</span><span class="on">!</span></li>
<li class="symbol"><span class="off">2</span><span class="on">@</span></li>
<li class="symbol"><span class="off">3</span><span class="on">#</span></li>
<li class="symbol"><span class="off">4</span><span class="on">$</span></li>
<li class="symbol"><span class="off">5</span><span class="on">%</span></li>
<li class="symbol"><span class="off">6</span><span class="on">^</span></li>
<li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
<li class="symbol"><span class="off">8</span><span class="on">*</span></li>
<li class="symbol"><span class="off">9</span><span class="on">(</span></li>
<li class="symbol"><span class="off">0</span><span class="on">)</span></li>
<li class="symbol"><span class="off">-</span><span class="on">_</span></li>
<li class="symbol"><span class="off">=</span><span class="on">+</span></li>
<li class="delete lastitem">delete</li>
<li class="tab">tab</li>
<li class="letter" style id="81">q</li>
<li class="letter" style id="87">w</li>
<li class="letter" style id="69">e</li>
<li class="letter" style id="82">r</li>
<li class="letter" style id="84">t</li>
<li class="letter" style id="89">y</li>
<li class="letter" style id="85">u</li>
<li class="letter" style id="73">i</li>
<li class="letter" style id="79">o</li>
<li class="letter" style id="81">p</li>
<li class="symbol"><span class="off">[</span><span class="on">{</span></li>
<li class="symbol"><span class="off">]</span><span class="on">}</span></li>
<li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
<li class="capslock">caps lock</li>
<li class="letter" style id="65">a</li>
<li class="letter" style id="83">s</li>
<li class="letter" style id="68">d</li>
<li class="letter" style id="70">f</li>
<li class="letter" style id="71">g</li>
<li class="letter" style id="72">h</li>
<li class="letter" style id="74">j</li>
<li class="letter" style id="75">k</li>
<li class="letter" style id="76">l</li>
<li class="symbol"><span class="off">;</span><span class="on">:</span></li>
<li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
<li class="return lastitem">return</li>
<li class="left-shift">shift</li>
<li class="letter" style id="90">z</li>
<li class="letter" style id="88">x</li>
<li class="letter" style id="67">c</li>
<li class="letter" style id="86">v</li>
<li class="letter" style id="66">b</li>
<li class="letter" style id="78">n</li>
<li class="letter" style id="77">m</li>
<li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>
<li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
<li class="symbol"><span class="off">/</span><span class="on">?</span></li>
<li class="right-shift lastitem">shift</li>
<li class="space lastitem">&nbsp;</li>
</ul>
</div>




<script src = "simrec.js"></script>


<input type="button" value="Click to Speak" onclick="recognition.start()">
</body>
</html>

1 个答案:

答案 0 :(得分：0)

var chart = {
	't': 84,
	'a': 65,
	'b': 66,
	'l': 76,
	'e': 69
};
$(function() {
	$(window).on('keyup', function(e) {
		var key = e.keyCode || e.which;
		$('span').each(function() {
			var $t = $(this);
			var c = $t.text().trim().toLowerCase();
			if ( chart[c] == key ) {
				$t.addClass('light');
				setTimeout(function() {
					$t.removeClass('light');
				}, 1000);
			}
		});
	});
});
span {
	color: #333;
	font-family: Arial;
	font-size: 40px;
	font-weight: bold;
	transition: .2s ease;
}

.light {
	color: #ff9500;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>T</span>
<span>A</span>
<span>B</span>
<span>L</span>
<span>E</span>

相关问题
最新问题