看一些站点底部显示的cdn回源节点很炫酷的样子

1571742055

几乎都是cf的，类似这样的



想问问怎么显示的，简单分析了下得出在这个目录
“套cf网址/cdn-cgi/trace”
想知道怎么在html里显示出来以这种图片形式展示出来
想问问有没有知道的

hasamol7468

本帖最后由 hasamol7468 于 2020-3-19 09:38 编辑



ajax​吧   
​​​​

稍等我找下放在哪里了
---
新改的没找到 找到了以前的备份
论硬盘坏了会丢掉多少宝贝代码
AMS HKG MFM是距离节点最近的机场缩写
所有节点查看：https://www.cloudflarestatus.com/
[ol]

$.get("/cdn-cgi/trace",

        function(data) {

                var sip = data.match(/(ip=?)(\S*)/)[2];

                var str = data.match(/(colo=?)(\S*)/)[2];

                var every = [

                                        ['AMS', 'CloudFlare荷兰阿姆斯特丹'],

                                        ['HKG', 'CloudFlare香港'],

                                        ['MFM', 'CloudFlare澳门'],

                                        ['BKK', 'CloudFlare曼谷'],

                                        ['TPE', 'CloudFlare台北'],

                                        ['NRT', 'CloudFlare东京'],

                                        ['KIX', 'CloudFlare大阪'],

                                        ['ICN', 'CloudFlare仁川'],

                                        ['LHR', 'CloudFlare伦敦'],

                                        ['SIN', 'CloudFlare新加坡'],

                                        ['CDG', 'CloudFlare巴黎'],

                                        ['FRA', 'CloudFlare法兰克福'],

                                        ['KUL', 'CloudFlare马来西亚'],

                                        ['LAX', 'CloudFlare洛杉矶'],

                                        ['SJC', 'CloudFlare圣何塞'],

                                        ['KBP', 'CloudFlare乌克兰'],

                                        ['PRG', 'CloudFlare布拉格'],

                                        ['DME', 'CloudFlare莫斯科'],

                                        ['TSN', '百度云天津滨海'],

                                        ['WUH', '百度云武汉天河'],

                                        ['NGB', '百度云宁波栎社'],

                                        ['SZV', '百度云苏州光福'],

                                        ['XIY', '百度云西安咸阳'],

                                ];

                                var know=false;

                for (var i = 0; i 复制代码[ol]

[/ol]复制代码
效果：当前CDN节点:[CloudFlare洛杉矶]
原理是/cdn-cgi/trace为cf的信息显示页面 通过ajax获取到信息后显示出来
----
玛德突然想起来cfp账户密码就在那文件夹里 还好向各位mjj学习了用密码管理软件，不然真就吃灰了

hongcha

盲猜这是笨 牛的

晴晴晴

本帖最后由 晴晴晴 于 2020-3-19 16:59 编辑

html
[ol]

[/ol]复制代码
[ol]

[/ol]复制代码

http://cdn.xx.com/footer.js

[ol]

document.getElementById("TimeShow").innerHTML = " 页面加载耗时" + (new Date().getTime() - t1) + "毫秒";

$(function() {

/*

    $.getJSON("count.php", function(data) {

        $("#outputdomain").empty();

        $.each(data, function(infoIndex, info) {})

        $("#outputdomain").html(strHtml);

    })

*/

    $.ajax({

        type: "get",

        dataType: "json",

        url: "ip.php",

        success: function(result) {

            var ipData = "";

            ipData += result.status + "回源节点：" + result.cdnip;

            $("#jsonTip").append(ipData);

            

            /*

            var cdnip = result.cdnip;

            $.ajax({

                type: "get",

                dataType: "json",

                url: "https://ip.xx.com/ip-query-qqwry.php?ip=" + cdnip,

                success: function(result) {

                    var ipData = "";

                    ipData += "(" + result.country + result.city + result.area + ")";

                    $("#jsonTip").append(ipData);

                }

            });

            */

            

        }

    });

    $.get("/cdn-cgi/trace", function(data) {

        var sip = data.match(/(ip=?)(\S*)/)[2];

        var str = data.match(/(colo=?)(\S*)/)[2];

        var every = [['HKG', '香港'], ['TPE', '台北'], ['MFM', '澳门'], ['NRT', '东京'], ['KIX', '大阪'], ['ICN', '仁川'], ['BKK', '曼谷'], ['LHR', '伦敦'], ['SIN', '新加坡'], ['CDG', '巴黎'], ['FRA', '法兰克福'], ['KUL', '马来西亚'], ['LAX', '洛杉矶'], ['SJC', '圣何塞'], ['KBP', '乌克兰'], ['PRG', '布拉格']];

        for (var i = 0; i 复制代码


补一个

ip.php
[ol]

[/ol]复制代码


ip-query-qqwry.php

不要归属地直接删掉
效果





PS 基本上都来自于笨牛CDN 在此声明

不启用CDN使用可能回输出些奇怪的东西 需要酌情修改JS..

suaxi

全球前端学习论坛

dtkevin

前排学习，坐等大佬。

1571742055

hongcha 发表于 2020-3-19 09:22

盲猜这是笨 牛的
是笨 牛的，其他我见的也有好几个站这样子的，只是css不一样。想知道这个怎么搞的，

1571742055

hasamol7468 发表于 2020-3-19 09:21

ajax​吧   ​​​​
稍等我找下放在哪里了
坐等大佬

1571742055

晴晴晴 发表于 2020-3-19 09:25

http://cdn.xx.com/footer.js
大佬，这个代码里的“https://ip.xx.com/ip-query-qqwry.php?ip=” 网址换成自己的吗

hasamol7468

1571742055 发表于 2020-3-19 09:35

大佬，这个代码里的“https://ip.xx.com/ip-query-qqwry.php?ip=” 网址换成自己的吗
​他​这​个​是​查​询ip​的​信​息​的​吧 ​看​链​接​看​的 ​可​以​换​成ip.sb​或​者​自​建​或​者​反​代ip.sb​的   
​​​​