Question

我想通过单击“ 1”键更改一个div的颜色。我有一堆视频在播放，当您单击“ 1”时，某个视频开始播放。我想创建一个看起来像控制面板的东西，这样，当您单击“ 1”时，视频将打开（我已经使用javascript中的按键操作了），但是当我按时也会更改div的颜色“ 1”

HTML

</head>
<body>

<div class="intro">Press The Number Keys and Q W E To Activate Video
</div>

<div id="one">1</div>

JAVASCIPT JQUERY

$(document).ready(function() {
  $(document).keypress(function(event) {
    if (event.which === 49) {
      $("#one").css('background-color'),("#00ffff");
    }
  });
 });


document.onkeypress = function(e) {
  console.log(e)
  if (e.key === "1" ) {
   var vid = document.getElementById('vid');
   vid.paused ? vid.play() : vid.pause();
   var vid = document.getElementById('vid').style.opacity = '1';

  } else if (e.key === "2" ) {
   var cami = document.getElementById('cami');
   cami.paused ? cami.play() : cami.pause(); 
   var cami = document.getElementById('cami').style.opacity = '1';

  }

Answer 1

只需将其添加到您的 if 语句中：vid.style.backgroundColor =“ yourcolor”;

Answer 2

类似的东西应该可以带您到那里。只需沙盒化背景颜色更改逻辑即可。

<div class="intro">Press The Number Keys and Q W E To Activate Video
</div>


<div id="changeExample">This is a test</div>

document.onkeypress = function(e) {
  console.log(e)
  if (e.key === "1" ) {
        if( $("#changeExample").hasClass("red")  ){

            $("#changeExample").removeClass("red").addClass("pink").css("background-color", "pink");

        }
        else if( $("#changeExample").hasClass("pink") ){
            $("#changeExample").removeClass("pink").addClass("red").css("background-color", "red");
        }
        else{
            $("#changeExample").addClass("red").css("background-color", "red");
        }

  }
}

用按键jQuery / JavaScript更改一个div的颜色

2 个答案: