Fatal编程技术网
  • javascript/
  • Javascript 每次点亮一个按键，然后

Javascript 每次点亮一个按键，然后

javascript

Javascript 每次点亮一个按键，然后,javascript,Javascript,我需要帮助完成这段代码。我需要按键一次点亮一个，然后在按下按钮时改变颜色。因此，如果您有“table”一词，则按键字母“t”将开始亮起，直到按下按钮为止。因此，当按下“t”按钮时，灯熄灭，“a”键字母亮起。。。等等 //var recognition = new SpeechRecognition(); var q = document.getElementById("q"); var recogResult; var resultAsArray; var recognition = n

我需要帮助完成这段代码。我需要按键一次点亮一个，然后在按下按钮时改变颜色。因此，如果您有“table”一词，则按键字母“t”将开始亮起，直到按下按钮为止。因此，当按下“t”按钮时，灯熄灭，“a”键字母亮起。。。等等

//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]);
//这是我的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

  • 2@
    • 

  • 3#
    • 

  • 4$
    • 

  • 5%
    • 

  • 6^
    • 

  • 7&

  • 8*
    • 

  • 9(
    • 

  • 0）
    • 

  • -_
    • 

  • =+
    • 

  • 删除
    • 
选项卡

  • q
    • 

  • w
    • 

  • e
    • 

  • r
    • 

  • t
    • 

  • y
    • 

  • u
    • 

  • i
    • 

  • o
    • 

  • p
    • 

  • [{
    • 

  • ]}
    • 

  • \|
    • 
帽锁

  • a
    • 

  • s
    • 

  • d
    • 

  • f
    • 

  • g
    • 

  • h
    • 

  • j
    • 

  • k
    • 

  • l
    • 

  • ；：

  • ”
    • 

  • 退货
    • 

  • 换档
    • 

  • z
    • 

  • x
    • 

  • c
    • 

  • v
    • 

  • b
    • 

  • n
    • 

  • m
    • 

  • 

  • 

  • /
    • 

  • 班次
    • 

  • 



var图表={
‘t’：84，
“a”：65，
“b”：66，
“l”：76，
“e”：69
};
$（函数（）{
$（窗口）.on（'keyup'，函数（e）{
var key=e.keyCode | | e.which；
$（'span'）。每个（函数（）{
var$t=$（本）；
var c=$t.text（）.trim（）.toLowerCase（）；
if（图表[c]==键）{
$t.addClass（'light'）；
setTimeout（函数（）{
$t.removeClass（“轻”）；
}, 1000);
}
});
});
})；
span{
颜色：#333；
字体系列：Arial；
字体大小：40px；
字体大小：粗体；
过渡：放松；
}
.光{
颜色：#ff9500；
}

T
A.
B
L

E
那么您面临什么错误？或者您只是要求为您编写代码？您已经在收听一个
keydown
事件。只需将其与您的函数连接以调整颜色…@KarelG如果您有关于如何以最佳方式执行此操作的建议？@BryndisThorsteinsdottir在keydown事件处理程序中，添加
changeDivColor（event.which）；
在
console.log之后
。每次按键时都会调用该函数。如果不需要，请添加
If（allowCall）
在使用该功能之前。然后，当您想在每次按键时更改颜色或不更改颜色时，只需设置
allowCall=true
或
allowCall=false
。谢谢@KarelG，我会尝试：）另一件事是我需要结果光线一次显示一个，即一个按键一次亮。现在按键是lighting同时进行。var i=0；而（i 
<!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>