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

博主：小屁
发布时间：2021 年 09 月 28 日
2690 次浏览
4 条评论
1040字数
分类： Typecho

本文思路来源于：[故梦](https://blog.gmit.vip/76.html)
</div>

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

```JavaScript
$('body').before('');
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){
console.log(fps+'FPS');
$('#fps').html(fps+'FPS');
};
step();
})();
```

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

但是，我们会出现这样的情况：
![console.log不断输出](https://ss.im5i.com/2021/09/28/l5cIW.png)

console.log不断输出，我们用如下代码解决（同JavaScript）：

```JavaScript
var console={};
    console.log=function(){};
```

最后修改：2021 年 09 月 28 日

如果觉得我的文章对你有用，请随意赞赏噢~

🥰猜你想看🥰 为handsome博客添加侧边栏倒计时为网站左上角加入js实现FPS帧率显示

4 条评论

躲闪的人士 Google Chrome 100.0.4896.88 Windows 10
May 13th, 2022 at 07:48 pm

看不到图啊OωO

回复
1. 小屁 Google Chrome 100.0.4896.60 Windows 10
  May 14th, 2022 at 06:31 pm
  
  @躲闪的人士
  
  图没掉了
  
  回复
神码人 Edge 94.0.992.31 Windows 10
September 28th, 2021 at 04:52 pm

写的太好了，我要给你生一堆作业|´・ω・)ノ

回复
1. 小屁 Google Chrome 94.0.4606.54 Windows 10
  September 28th, 2021 at 04:53 pm
  
  @神码人
  
  可别，我偷偷用网课时间编辑的
  
  回复