zoukankan      html  css  js  c++  java
  • 前端根据服务器访问速度自动分配最优线路

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>自动分配最优线路</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <style type="text/css">
        #loadingwrapper .loading-mask{background:#080915;position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;}
        #loadingwrapper .loading-box-s{position:absolute;top:50%;left:50%;z-index:5000;text-align:center;width:100%;transform:translate(-50%, -50%);background:#080915;border-radius:5px; }
        #loadingwrapper .loader-cicle{position:relative;width:50px;height:50px;margin-top:15px;margin-bottom:15px;border-radius:50%;display:inline-block;vertical-align:middle;border:7px double #bd5837;-webkit-animation:ball-turn 1s linear infinite;animation:ball-turn 1s linear infinite;}
        #loadingwrapper .loading-text{color: #c3c3c3;}
        #loadingwrapper .loader-cicle::before{content: "";position:absolute;width:10px;height:10px;background:#bd5837;border-radius:50%;bottom:0;right:30px;}
        #loadingwrapper .loader-cicle::after{content: "";position:absolute;width:10px;height:10px;background:#bd5837;border-radius:50%;left:30px;top:0;}
        @keyframes ball-turn{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
        </style>
    </head>
    <body>
    <div id="loadingwrapper">
        <div class="loading-mask"></div>
        <div class="loading-box-s">
            <div class="loader-cicle"></div>
            <p class="loading-text">正在为您选择最佳线路,请稍后.....</p>
        </div>
    </div>
    <script type="text/javascript">
        let ips = [
            '192.168.12.1',
            '192.168.12.2',
            '192.168.12.3',
            '192.168.12.4',
            '192.168.12.5',
        ];//线路地址
        let source = 'http://b-ssl.duitang.com/uploads/item/201705/04/20170504162335_msfSV.jpeg';//静态请求资源
    
        let arr = [];
        for(let ip of ips){
            arr.push(
                new Promise(function(resolve, reject) {
                    let startTime, endTime, fileSize;
                    let xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = () => {
                        if(xhr.readyState === 2){
                            startTime = Date.now();
                        }
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            endTime = Date.now();
                            fileSize = xhr.responseText.length;
                            setTimeout(resolve, endTime-startTime, ip);
                        }
                    }
                    xhr.open("GET", source, true);
                    xhr.send();
                    
                })
            );
        }
    
        Promise.race(arr).then(function(value) {
          console.log(value);
          location.href= value;    //跳转最优线路
        });
        
    </script>
    </body>
    </html>
  • 相关阅读:
    golang fmt用法举例
    golang init函数
    golang 定时器
    golang 如何判断变量的类型
    题目:IO多路复用版FTP
    Python模块——gevent 在协程学习中遇到的模块
    python入门三十二天——协程 异步IO数据库队列缓存
    java——第一天 变量,java的基础类型
    操作PPT模块 python-pptx
    python入门三十一天---多进程
  • 原文地址:https://www.cnblogs.com/wrongcode/p/11138051.html
Copyright © 2011-2022 走看看