doufeiqiong3515
doufeiqiong3515
2016-10-06 20:25

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

How do I implode the output of below code into divs instead of echo "On" or "Off"?

I also want the divs to have background color of green if node is ON, and background of red if node is 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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • duandao1931 duandao1931 5年前

    here is something that I did, hope it helps you:

    back-end, 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);
    ?>
    

    front-end, 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>
    

    so basically, this is what you should do, don't be shy and tell me if this works for you. :)

    点赞 评论 复制链接分享

相关推荐