Question

我有一个div列表，我希望每个点击的div都会：播放声音＆amp; 改变它的颜色3秒。

我的代码
的声音：

<?php  
$x = 1;
while($x <= 24) {
  echo "<audio id='$x' src='samples/s$x.wav'></audio>";
  $x++;
} 
?>

Div的：

<?php  
$x = 1;
echo "<tr>";
while($x <= 24) {
  echo "<div id='lupad' onclick='style.backgroundColor = "#FF0000"; setTimeout(function(){style.backgroundColor = '#000000';}, 320); document.getElementById('$x').play()'>$x</div>";
  $x++;
} 
?>

该功能适用于html但不适用于php 的由于

Answer 1

您的语法错误。你的双引号里面有双引号。您可以在背景颜色的双引号之前添加反斜杠，以使其正常工作。

<?php  
$x = 1;
echo "<tr>";
while($x <= 24) {
  echo "<div id='lupad' onclick='style.backgroundColor = \"#FF0000\"; setTimeout(function(){style.backgroundColor = \"#000000\";}, 320); document.getElementById(\"$x\").play()'>$x</div>";
  $x++;
} 
?>

בהצלחה

Answer 2

请检查此代码

<?php  
 $x = 1;
 while($x <= 24) {
  echo "<div id='lupad' onclick='style.backgroundColor = 
  ".'"'."#FF0000".'"'.";setTimeout(function(){style.backgroundColor = 
  ".'"'."#000000".'"'.";}, 320); 
  document.getElementById(".$x.").play()'>".$x."
 </div>";
 $x++; 
}  
?>

Answer 3

这是脚本函数show，调用所以问题解决了。

  <!DOCTYPE html>
  <html>
  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

   <title></title>

   <script type="text/javascript">


      function show(x){

        //alert(x);
        var colors = ['red','blue','green']; 
        //alert(colors[Math.floor(Math.random() * colors.length)]);

        $('#lupad_'+x).css('background-color', colors[Math.floor(Math.random() * colors.length)]);

        setTimeout(function(){
            $('#lupad_'+x).css('background-color','blue');
        }, 320); 
        document.getElementById(x).play();
      }
  </script>
 </head>
 <body>


 <?php  
 $x = 1;
 while($x <= 24) {
  echo "<audio id='$x' src='samples/s$x.wav'></audio><br/>";
 $x++;
} 
?>

    <?php  
   $x = 1;
   while($x <= 24) {
   echo "<div id='lupad_".$x."' onclick='show(\"".$x."\")'>".$x."
  </div>";

  $x++;
 } 
 ?>
 </body>
  </html>

PHP＆amp; JS | div onclick播放声音并改变背景

3 个答案: