javascript - 根据for循环的输出更改div颜色

标签 javascript php html css

如何将以下代码的输出内爆到 div 中而不是回显“On”或“Off”?

如果节点为 ON,我还希望 div 的背景色为 green,背景色为 red 如果节点 OFF:

<html>
<body>

<?php
for ($ipa=65; $ipa <= 72; $ipa++){
   $ip = "10.32.12.".$ipa;
   $ping_output=array();
   exec ("ping -n 1 -w 1 $ip 2>&1", $ping_output, $return_val);
   //echo $ip." -> ".$return_val."<br/>".implode('<br/>',$ping_output).'<br/>';

if(stripos($ping_output[2],"TTL")!==false) {
     echo $ip." is On <br/>";
   } else if(stripos($ping_output[2],"unreachable")!==false){
     echo $ip." is unreachable <br/>";
   } else if(stripos($ping_output[2],"request")!==false){
     echo $ip." is Off <br/>";
   }
}
?>
</body>
</html>

最佳答案

这是我做的,希望对你有帮助:

后端,q3.php

<?php
$result = array();
for ($ipa=65, $i = 1; $ipa <= 72; $ipa++, $i++){
   $ip = "10.32.12.".$ipa;
   $ping_output=array();

   exec ("ping -n 1 -w 1 $ip 2>&1", $ping_output, $return_val);
   //echo $ip." -> ".$return_val."<br/>".implode('<br/>',$ping_output).'<br/>';

if(stripos($ping_output[2],"TTL")!==false) {
//     echo $ip." is On <br/>";

     $result["enode".$i] = "on";
   } else if(stripos($ping_output[2],"unreachable")!==false){
//     echo $ip." is unreachable <br/>";
       $result["enode".$i] = "unreachable";
   } else if(stripos($ping_output[2],"request")!==false){
//     echo $ip." is Off <br/>";
       $result["enode".$i] = "off";
   }

}
echo json_encode($result);
?>

前端,q3h.html

<!DOCTYPE html>
<html>

    <head>
        <title>Node Status</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <style>
            #wrap {
                width: 100%;
                margin: auto;
            }

            div[id*="enode"] {
                display: inline-block;
                margin: 10px;
                width: 100px;
                height: 100px;
                background-color: green;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="enode1">Node1</div>
            <div id="enode2">Node2</div>
            <div id="enode3">Node3</div>
            <div id="enode4">Node4</div>
            <div id="enode5">Node5</div>
            <div id="enode6">Node6</div>
            <div id="enode7">Node7</div>
            <button>update nodes</button>
        </div>
        <script>
            $(document).ready(function () {


                $("button").click(function () {
                    $.ajax({
                        url: "q3.php",
                        dataType: 'json',
                        success: function (result) {
                            alert(result);
                            for (key in result) {
                                id = "#"+key;
                                if (result[key] == "on") {
                                    $(id).css("background-color", "green");
                                }

                                if (result[key] == "unreachable") {
                                    $(id).css("background-color", "yellow");
                                }

                                if (result[key] == "off") {
                                    $(id).css("background-color", "red");
                                }
                            }


                        }});
                });
            });



        </script>
    </body>
</html>

所以基本上,这是您应该做的,不要害羞,告诉我这是否适合您。 :)

关于javascript - 根据for循环的输出更改div颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39905056/

相关文章:

html - 调整 HTML5 Canvas 大小时闪烁

javascript - 带有多个标记的谷歌地图 javascript => 标签文本在循环中无处不在

javascript - JQuery 插件类不工作

javascript - 使用 php 从小费计算器打印表格

php - 联合字节 |示例_mysql_镜像 |同步相关问题

php - 读取制表符和换行符分隔(多维)平面文件数据库

javascript - 如何将类名添加到 Angular2 指令中

javascript - 使用 React.js 检查属性是否存在

html - 如何让所有的输入框排成一条直线?

html - 当 child 旋转时更改父 div 大小