Javascript 按下键时按顺序显示div

我是一名新的编码专家，有时在搜索某个词时很难找到正确的词。我已经走了很长一段路，但还是坚持了下来。希望有人能帮我找到合适的搜索词或函数

我已经创建了一个响应网格2x3全屏，现在当按下该键时，例如“a”。实时视频将显示（不透明度从0到1）在网格的左上角框中第二个盒子的“s”键与另一个现场视频，依此类推，所有六个盒子都是如此

但我想创建当按下一个键时，将在方框左上方播放一个视频（六个视频中的哪一个视频并不重要）。当同时按下第二个键时，它将显示在第二个框中。同时按下第三个键时，它将显示在第三个框中

因此，它显示的位置取决于按键的顺序。我试图在网上搜索，但找不到任何东西，有人能帮我吗？我用Javascript创建了这个。谢谢

 document.addEventListener("keyup", keyupFunction);
 document.addEventListener("keydown", keydownFunction);

function keydownFunction(e) {
if(e.which == 65){/* a */
    document.getElementById("video1").style.opacity = "1";
    myAudio.volume = 1.0;

 } else if (e.which == 83) {/* s */
    document.getElementById("video2").style.opacity = "1";
    myAudio2.volume = 1.0;

 } else if (e.which == 68) {/* d */
    document.getElementById("video3").style.opacity = "1";
    myAudio3.volume = 1.0;

 } else if (e.which == 70) {/* f */
    document.getElementById("video4").style.opacity = "1";
    myAudio4.volume = 1.0;

 } else if (e.which == 71) {/* g */
    document.getElementById("video5").style.opacity = "1";
    myAudio5.volume = 1.0;

 } else if (e.which == 72) {/* h */
    document.getElementById("video6").style.opacity = "1";
    myAudio6.volume = 1.0;

---

---

依此类推，直到video6。

好的，这段代码监听按键和释放。按下计数器；释放会使计数器递减。根据计数器的值

n

，

n

项可见

window.onload=function（）{
var键=[]；
对于（var i=0；i<256；i++）键，推送（false）；
var numDown=0；
var refocus=function（）{
var items=document.getElementsByClassName（'item'）；
//全无焦点
对于（变量i=0；i90 | | | keys[e.keyCode]）返回；
键[e.keyCode]=真；
numDown++；
重新聚焦（）；
};
items.onkeyup=功能（e）{
如果（e.keyCode<65 | | e.keyCode>90 | |！keys[e.keyCode]）返回；
密钥[e.keyCode]=假；
纽敦--；
重新聚焦（）；
};
items.focus（）；
};
.items{
位置：绝对位置；
宽度：100%；高度：100%；
左：0；上：0；
溢出：隐藏；
边距：0；填充：0；
字体大小：0；/*删除空格*/
背景色：#ffffff；
}
.项目{
框大小：边框框；
显示：内联块；
宽度：33.333%；高度：50%；
边框：1px实心#ff0000；
背景色：#A0；
过渡：背景色1000ms线性；
}
.item.active{
背景色：#7070f0；
}
.items.focused>.item{
边框：1px实心#ffffff；
}

请添加您的html+所有相关文件，以便我们为您提供帮助。如果按3个键，是否意味着同时播放3个视频？或者只有第三个视频在播放？是的，所有三个视频都在同时播放。太棒了，这正是我的意思！但由于JS代码不同，我尝试在当前代码中实现它。但是我不知道怎么。。我还添加了CSS和HTML。请注意HTML
items
元素上的
tabindex=“-1”
属性。没有它，浏览器将不允许您聚焦
项目
并接收按键输入事件！当我向div class=items添加一些东西（例如我的img标签）时，整个代码都无法工作。。。据我所见，当按下随机键时，框的状态会改变为不同的颜色。但是，也可以在该框中显示直播img标记吗？我认为您不应该将图像放在
[class=“items”]
中，而是放在
[class=“item”]
中，对吗？由于内联块布局，将其他元素放入
[class=“items”]
将导致所有块向下推。是的，当我在class=item类中放置某些内容时，整个网格不再工作。
    <div class="container-fluid items" id="items">
<div class="row menusrow">
    <div class="col-md-12">
        <div class="row">
            <div class="col-xs-4 video-container">
        <img id="video1" src="http://105.198.227.126:8080/cgi-
bin/camera?">
            </div>

            <div class="col-xs-4 video-container">
        <img id="video2" src="http://24.222.39.230:8082/mjpeg.cgi">
            </div>

            <div class="col-xs-4 video-container">
    <img id="video3" src="http://182.150.46.230:8000/oneshotimage1?
1511867998">
            </div>
        </div>

        <div class="row">
            <div class="col-xs-4 video-container">
    <img id="video4" src="http://77.20.35.33:80/mjpg/video.mjpg?
COUNTER">
            </div>

            <div class="col-xs-4 video-container">
    <img id="video5" src="http://122.166.104.28:89/SnapshotJPEG?
Resolution=640x480&amp;amp;Quality=Clarity&amp;amp;1511867938">
            </div>

            <div class="col-xs-4 video-container">
    <img id="video6" src="http://117.102.176.209:50000/cgi-bin/camera?resolution=640&amp;amp;quality=1&amp;amp;Language=0&amp;amp;1511873906">
            </div>
        </div>
    </div>
</div>

.video-container {
height: 100%;
position:relative;
padding-left: 0px;
padding-right: 0px;

#video1 {
opacity: 0;
height: 100%;
width: 100%;
}

#video2 {
opacity: 0;
height: 100%;
width: 100%;
}