网站左侧添加FPS实时刷新,访问站点时直观显示FPS

经验教程 · 2022-10-25 · 31 人浏览

在这里将本站点的左侧上方悬浮的FPS实时显示JS代码分享给大家,直接复制到浏览器底部就可以直接用了很方便,本功能可以实时显示用户通过浏览器访问你的站点是用户的刷新帧数,提高网站的个性。

请输入图片描述

截图示例:

JS代码:

{hide}

<!-- 显示FPS开始 -->
<script>
if ((!navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i))) {//只有电脑访问才会显示,手机不显示,如果想要手机也显示,把这个if删除就行
    $('body').before('<div id="fps" style="color:red;z-index:99999;position:fixed;top:0px;left:10px;font-weight:bold;"></div>');
    var showFPS = (function() {
        var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
            window.setTimeout(callback, 1000 / 60);
        }
        ;
        var e, pe, pid, fps, last, offset, step, appendFps;
        fps = 0;
        last = Date.now();
        step = function() {
            offset = Date.now() - last;
            fps += 1;
            if (offset >= 1000) {
                last += offset;
                appendFps(fps);
                fps = 0;
            }
            requestAnimationFrame(step);
        };
        appendFps = function(fps) {
            $('#fps').html(fps + ' FPS ');
        };
        step();
    }
    )();
}//if要删除别忘了这个if结束符号也要删除,不然前端报错
</script>
<!-- 显示FPS结束 -->

{/hide}

【免责声明】 本网站大部分软件和资源收集于网络,只做自己私下学习备份使用。所有资源和软件均来自互联网的优秀作者们,版权归原作者或企业所有。