Question

我已经在文件index.php中创建了一个按钮

.button_round {
  border: none;
  padding: 7px;
  display: block;
  margin: 20px 2px;
  border-radius: 50%;
  background-Color: red;
}

<button class="button_round" id="link_button"> </button>

我想根据linkcheck.php文件中的条件更改按钮的颜色。

<?php
    include ("config.php");
    include ("index.php");

    //get max timestamp 

    $sql_query = "SELECT MAX(time) AS max_time FROM table_data";
    $execute_query = $conn->query($sql_query);
    $sett_row = $execute_query->fetch_assoc();
    $max_time =  $sett_row["max_time"];

    // today date timestamp
    $date = new DateTime();
    $time =  $date->getTimestamp();
    if((($time*1000) - $max_time) > 20000)
    {
?>
    <script type="text/javascript">
        document.getElementById("link_button").style.backgroundColor = "#FFFFFF"
    </script>
<?php       
    } else {
?>
    <script type="text/javascript" >
    document.getElementById("link_button").style.backgroundColor = "#7FFF00"
    </script>
<?php       
    }
?>

linkcheck.php也通过其他JavaScript文件名custom.js每秒钟执行一次

setInterval(function() {
    if(true) {
        $.ajax({
            type: "POST",
            url: "linkcheck.php",
            success: function(data){
            }
        });
    }  
},1000);

但是它不起作用。请有人可以提供解决方案吗？

Answer 1

我会更改您的php文件，使其仅基于if来显示颜色：

if((($time*1000) - $max_time) > 20000)
{
  echo "#FFFFFF";
}
else
{
  echo "#7FFF00";
}

然后在您的Ajax中，您可以在响应中使用data变量（假设php文件中没有输出其他任何内容）：

$.ajax({
  type: "POST",
  url: "linkcheck.php",
  success: function(data) {
      document.getElementById("link_button").style.backgroundColor = data;
  }
});

请注意每秒进行一次数据库调用不是很好

Answer 2

我认为您需要写<style>而不是<script>

if((($time*1000) - $max_time) > 20000)
{
?>
<style>
#link_button{
  background:#FFFFFF;
}
</style>
<?php       
}
else
{
?>
<style>
#link_button{
  background:#7FFF00;
}
</style>
<?php       
}
?>

更改JavaScript中按钮的背景颜色不起作用

2 个答案: