博客网站添加FPS显示教程,本文摘要由ChatGPT智能生成。
介绍自己 🙈
生成本文简介 👋
推荐相关文章 📖
前往主页 🏠
前往爱发电购买
It has been 640 days since the last update, the content of the article may be outdated.
创建自定义文件JS,CSS 在hexo博客根目录新建 source/custom/fps/fps.js
和source/custom/fps/fps.css
文件内容分别如下
fps.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 if (window .localStorage .getItem ("fpson" ) == undefined || window .localStorage .getItem ("fpson" ) == "1" ) { var rAF = function ( ) { return ( window .requestAnimationFrame || window .webkitRequestAnimationFrame || function (callback ) { window .setTimeout (callback, 1000 / 60 ); } ); }(); var frame = 0 ; var allFrameCount = 0 ; var lastTime = Date .now (); var lastFameTime = Date .now (); var loop = function ( ) { var now = Date .now (); var fs = (now - lastFameTime); var fps = Math .round (1000 / fs); lastFameTime = now; allFrameCount++; frame++; if (now > 1000 + lastTime) { var fps = Math .round ((frame * 1000 ) / (now - lastTime)); if (fps <= 5 ) { var kd = `<span style="color:#bd0000">卡成ppt🤢</span>` } else if (fps <= 15 ) { var kd = `<span style="color:red">电竞级帧率😖</span>` } else if (fps <= 25 ) { var kd = `<span style="color:orange">有点难受😨</span>` } else if (fps < 35 ) { var kd = `<span style="color:#9338e6">不太流畅🙄</span>` } else if (fps <= 45 ) { var kd = `<span style="color:#08b7e4">还不错哦😁</span>` } else { var kd = `<span style="color:#39c5bb">十分流畅🤣</span>` } document .getElementById ("fps" ).innerHTML = `FPS:${fps} ${kd} ` ; frame = 0 ; lastTime = now; }; rAF (loop); } loop (); } else { document .getElementById ("fps" ).style = "display:none!important" }
fps.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 #fps { position : fixed; left : 10px ; bottom : 88px ; z-index : 1919810 ; } [data-theme="light" ] #fps { background-color : rgba (255 , 255 , 255 , 0.85 ); backdrop-filter : var (--backdrop-filter); padding : 4px ; border-radius : 4px ; } [data-theme="dark" ] #fps { background-color : rgba (0 , 0 , 0 , 0.72 ); backdrop-filter : var (--backdrop-filter); padding : 4px ; border-radius : 4px ; }
引入自定义资源文件 在hexo
主题的配置文件中引入上面新建的fps.js
和fps.css
文件即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 inject: head: bottom: - <span id="fps"></span> - <link rel="stylesheet" href="/custom/fps/fps.css" media="defer" onload="this.media='all'"> - <script src="/custom/fps/fps.js"></script>
编译运行预览效果 1 hexo cl | hexo g | hexo s
本文参考:https://www.fomal.cc/posts/d739261b.html