Javascript 仅在桌面视图中每 3 秒切换一次绿色和红色的代码

Question

我正在尝试使用 JavaScript 使网页每三秒更改 2 个 div 红色和绿色标签。

Answer 1

这个问题可以通过两种方式解决：pure javascript或者JQuery

纯 Javasript

setInterval(function() {
  var div1 = document.getElementById("div1");
  var div2 = document.getElementById("div2");
  if(div1.className == 'green') {
    div1.className = '';
  } else {
    div1.className = 'green';
  }
  if(div2.className == 'red') {
    div2.className = '';
  } else {
    div2.className = 'red';
  } 
}, 3000);

#div1 {
  background: red;
 }

#div2 {
  background: green;
 }

.red {
  background:red !important;
 }

.green {
  background: green !important;
 }

<div id="div1" class="green">
  div1
</div>
<div id="div2" class="red">
  div2
</div>

对于JQuery

你可以使用 Javascript jquery 库并可以做这样的事情

 $(document).ready(function() {  
  setInterval(function() {
   $('#div1').toggleClass('green');
   $('#div2').toggleClass('red'); 
  }, 3000);
 });

#div1 {
  background: red;
 }

#div2 {
  background: green;
 }

.red {
  background:red !important;
 }

.green {
  background: green !important;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="green">
  div1
</div>
<div id="div2" class="red">
  div2
</div>

希望这对您有所帮助 (y)。

注意：如果我们考虑机器性能，这效率不高。

Javascript 仅在桌面视图中每 3 秒切换一次绿色和红色的代码

Javascript code to toggle the green and red color every 3 sec only on desktop view

javascript

toggle

纯 Javasript

对于JQuery