Question

我正在使用Raspberry pi来自动化建筑物。我只是想在网页上显示开启/关闭。如果它从mysql数据库获得1“led显示零状态1”或0“led显示高状态0”。

这是我的代码。我想用Red led png文件替换Gray led png，我在JavaScript变量中存储了值。但我认为我的javascript函数或if-else语句有问题。

<?php
$db_host = 'localhost'; // Server Name
$db_user = 'root'; // Username
$db_pass = '******'; // Password
$db_name = '*******'; // Database Name

$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
    die ('Failed to connect to MySQL: ' . mysqli_connect_error());  
}

$sql = 'SELECT dev1 FROM `76Hlog` ORDER BY `Serial` DESC LIMIT 1';

$query = mysqli_query($conn, $sql);

if (!$query) {
    die ('SQL Error: ' . mysqli_error($conn));
}
?>


<html>
<body>

<?php


        while ($row = mysqli_fetch_array($query))
        {

            $s1 = $row['dev1'];
                        echo $s1;                  

        }?>


<img id="myImage" src="/image-folder/ioff.png" width="50" height="50">



<script>



var val = <?php echo $s1; ?>;



function changeImage() {
    var image = document.getElementById('myImage');
    if (val == "1") {
        image.src = "/image-folder/ioff.png";
    } else if (val == "0") {
        image.src = "/image-folder/ion.png";
    }
}
</script>


<h1>the value for number is:  
 <script>
        document.write(val)
      </script></h1>


</body>
</html>

Answer 1

看起来不错，虽然我不确定你为什么要这条线 while ($row = mysqli_fetch_array($query)) 为什么你需要在while循环中使用它？

另请注意，这将运行一次，如果您希望自动替换图像，则不会发生这种情况，因为如果没有页面刷新，您将需要创建一个AJAX请求。

Answer 2

您是否尝试在php返回的值中添加引号？

// gc is an instance of GraphServiceClient
var result = await gc.Me.Planner.Plans.Request().GetAsync();

Answer 3

确定只在身体负载上调用javascript函数。当它加载时，php将运行，当body完成加载时，它将设置所需的图像。

<body onload="changeImage()">

现在最后更改函数，以便php在调用changeImage（）时获取行并将其保存在变量中。

function changeImage() {

  //Php code for connecting to database and saving the result in $s1

    var val = <?php echo $s1; ?>;
    var image = document.getElementById('myImage');
    if (val == "1") {
        image.src = "/image-folder/ioff.png";
    } else if (val == "0") {
        image.src = "/image-folder/ion.png";
    }
}

如果您愿意，也可以在特定间隔后使用

调用此功能

setInterval(changeImage, time_in_milliseconds);

我想在我的网页上显示开启/关闭

3 个答案: