前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >利用JS给博客网站左上角显示FPS帧数

利用JS给博客网站左上角显示FPS帧数

作者头像
小屁的博客
发布2022-08-30 16:27:04
5530
发布2022-08-30 16:27:04
举报
文章被收录于专栏:小屁折腾日记

本文思路来源于:故梦 </div>

left:3 左边距离3 top:3 上边距离3 自己可以改方向

代码语言:javascript
复制
$(&apos;body&apos;).before(&apos;&apos;);
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 &gt;= 1000 ){
last += offset;
appendFps(fps);
fps = 0;
}
requestAnimationFrame( step );
};
appendFps = function(fps){
console.log(fps+&apos;FPS&apos;);
$(&apos;#fps&apos;).html(fps+&apos;FPS&apos;);
};
step();
})();

然后用script引用一下即可(handsome用户直接复制粘贴到JavaScript里)

但是,我们会出现这样的情况:

console.log不断输出
console.log不断输出

console.log不断输出,我们用如下代码解决(同JavaScript):

代码语言:javascript
复制
var console={};
    console.log=function(){};
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021 年 09 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档