Skip to content

Instantly share code, notes, and snippets.

@xiaozhu2007

xiaozhu2007/main.html

Created February 19, 2024 13:00
Show Gist options
  • Save xiaozhu2007/733454977808f28c14629406b1168dac to your computer and use it in GitHub Desktop.
Save xiaozhu2007/733454977808f28c14629406b1168dac to your computer and use it in GitHub Desktop.
Download ZIP
FPS 检测并输出提示语(嗯，偷的conquer1the2world3/bolo-blog)
Raw
main.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script>
if (
window.localStorage.getItem("fpson") == undefined ||
window.localStorage.getItem("fpson") == "1"
) {
var fpsT = (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;
}
fpsT(loop);
};
loop();
} else {
document.getElementById("fps").style = "display:none!important";
}
</script>
<style>
#fps {
position: fixed;
bottom: 10px;
left: 10px;
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;
}
</style>
<p id="fps"></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment