网站左侧添加FPS实时刷新,访问站点时直观显示FPS
在这里将本站点的左侧上方悬浮的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}
版权申明
本文系作者 @季春二九 原创发布在季春二九 - Keith 的Blog站点。未经许可,禁止转载。
全部评论 1
joke
Google Chrome Windows 10