hishere.github.io/ping.html at main · hishere/hishere.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Ping</title>
    <script src="https://unpkg.zhimg.com/vue/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="no.css">
    <style>
        input{
            width: 3rem;
        }
        .red{
            color: red;
        }
        .black{
            color: black;
        }
    </style>
</head>
<body>
<div id="app">
    <h2>Ping一下</h2>
    <input type="text" v-model="ipData.ip1"><strong>.</strong>
    <input type="text" v-model="ipData.ip2"><strong>.</strong>
    <input type="text" v-model="ipData.ip3"><strong>.</strong>
    <input type="text" v-model="ipData.ip4"><strong>~</strong>
    <input type="text" v-model="ipData.ip5">
    <input type="button" value="Ping" @click="ping()">
    <div v-html="ipData.res"></div>

</div>
<script>
    axios.default.timeout=50;
    const app = Vue.createApp({
        data() {
            return {
                ipData: {
                    ip1: 192,
                    ip2: 168,
                    ip3: 1,
                    ip4: 2,
                    ip5: 8,
                    res: 'mbh'
                }
            }
        },
        created(){


        },
        methods: {
            blackSpan(text){
                return "<span class='black'>"+text+"</span>"
            },
            redSpan(text){
                return "<span class='red'>"+text+"</span>"
            },
             head(url) {
                 const that=this;
                 const xhr = new XMLHttpRequest();
                 xhr.open('head',url);
                 xhr.timeout=500;
                 const sr=that.ipData.res;
                 that.ipData.res=sr+that.blackSpan(url)+"<br>";
                 xhr.onerror=function (){
                     if (xhr.status===0){
                     const sr=that.ipData.res;
                     // const ipArr=url.split(".");
                     // const begin=that.ipData.ip4;
                     // const end=ipArr[3];
                     // console.log(end-begin);
                     // sr.replace("black","red",)
                     that.ipData.res=sr.replaceAll("black'>" + url, "red'>" + url);

                     console.log(sr);}
                 }
                 xhr.send();

             },
            ping(){
                const that=this;
                let ip1=that.ipData.ip1;
                let ip2=that.ipData.ip2;
                let ip3=that.ipData.ip3;
                let ip4=that.ipData.ip4;
                let ip5=that.ipData.ip5;

                that.ipData.res="";
                for (let i=ip4;i<ip5;i++){
                    let url="http://"+ip1+"."+ip2+"."+ip3+"."+i;
                    this.head(url);
                }
            },
            beforeUnload() {
                localStorage.setItem("ipData", JSON.stringify(this.$data.ipData));
            }
        },
        beforeMount() {
            window.addEventListener('beforeunload', e => this.beforeUnload(e));
            const ipData = JSON.parse(localStorage.getItem("ipData"));
            if (ipData!==null)this.$data.ipData = JSON.parse(localStorage.getItem("ipData"));
        },
        destroyed() {
            window.removeEventListener('beforeunload', e => this.beforeUnload(e))
        }
    });
    const vm = app.mount("#app");
</script>
</body>
</html>