1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5. 	<title>Document</title>
  6. 	<script type="text/javascript" src="./libs/stats.js"></script>
  7. </head>
  8. <body>
  9. 	<div id="Stats-output">
  10. 	</div>
  11. 	<script type="text/javascript">
  12. 		var stats = initStats();
  13. 		function initStats() {
  14. 	            var stats = new Stats();
  15. 	            stats.setMode(0); // 0: fps, 1: ms
  16. 	            // Align top-left
  17. 	            stats.domElement.style.position = 'absolute';
  18. 	            stats.domElement.style.left = '0px';
  19. 	            stats.domElement.style.top = '0px';
  20.  
  21. 	            document.getElementById("Stats-output").appendChild(stats.domElement);
  22.  
  23. 	            return stats;
  24. 	        }
  25. 	        setInterval(function(){
  26. 	        	stats.update();
  27. 	        },500);
  28. 	</script>
  29. </body>
  30. </html>

　源码：

  1. /**
  2.  * @author mrdoob / http://mrdoob.com/
  3.  */
  4.  
  5. var Stats = function () {
  6.  
  7.     var startTime = Date.now(), prevTime = startTime;
  8.     var ms = , msMin = Infinity, msMax = ;
  9.     var fps = , fpsMin = Infinity, fpsMax = ;
  10.     var frames = , mode = ;
  11.  
  12.     var container = document.createElement( 'div' );
  13.     container.id = 'stats';
  14.     container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode %  ) }, false );
  15.     container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
  16.  
  17.     var fpsDiv = document.createElement( 'div' );
  18.     fpsDiv.id = 'fps';
  19.     fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002';
  20.     container.appendChild( fpsDiv );
  21.  
  22.     var fpsText = document.createElement( 'div' );
  23.     fpsText.id = 'fpsText';
  24.     fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
  25.     fpsText.innerHTML = 'FPS';
  26.     fpsDiv.appendChild( fpsText );
  27.  
  28.     var fpsGraph = document.createElement( 'div' );
  29.     fpsGraph.id = 'fpsGraph';
  30.     fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
  31.     fpsDiv.appendChild( fpsGraph );
  32.  
  33.     while ( fpsGraph.children.length <  ) {
  34.  
  35.         var bar = document.createElement( 'span' );
  36.         bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
  37.         fpsGraph.appendChild( bar );
  38.  
  39.     }
  40.  
  41.     var msDiv = document.createElement( 'div' );
  42.     msDiv.id = 'ms';
  43.     msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none';
  44.     container.appendChild( msDiv );
  45.  
  46.     var msText = document.createElement( 'div' );
  47.     msText.id = 'msText';
  48.     msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
  49.     msText.innerHTML = 'MS';
  50.     msDiv.appendChild( msText );
  51.  
  52.     var msGraph = document.createElement( 'div' );
  53.     msGraph.id = 'msGraph';
  54.     msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
  55.     msDiv.appendChild( msGraph );
  56.  
  57.     while ( msGraph.children.length <  ) {
  58.  
  59.         var bar = document.createElement( 'span' );
  60.         bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
  61.         msGraph.appendChild( bar );
  62.  
  63.     }
  64.  
  65.     var setMode = function ( value ) {
  66.  
  67.         mode = value;
  68.  
  69.         switch ( mode ) {
  70.  
  71.             case :
  72.                 fpsDiv.style.display = 'block';
  73.                 msDiv.style.display = 'none';
  74.                 break;
  75.             case :
  76.                 fpsDiv.style.display = 'none';
  77.                 msDiv.style.display = 'block';
  78.                 break;
  79.         }
  80.  
  81.     }
  82.  
  83.     var updateGraph = function ( dom, value ) {
  84.  
  85.         var child = dom.appendChild( dom.firstChild );
  86.         child.style.height = value + 'px';
  87.  
  88.     }
  89.  
  90.     return {
  91.  
  92.         REVISION: ,
  93.  
  94.         domElement: container,
  95.  
  96.         setMode: setMode,
  97.  
  98.         begin: function () {
  99.  
  100.             startTime = Date.now();
  101.  
  102.         },
  103.  
  104.         end: function () {
  105.  
  106.             var time = Date.now();
  107.  
  108.             ms = time - startTime;
  109.             msMin = Math.min( msMin, ms );
  110.             msMax = Math.max( msMax, ms );
  111.  
  112.             msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';
  113.             updateGraph( msGraph, Math.min( ,  - ( ms /  ) *  ) );
  114.  
  115.             frames ++;
  116.  
  117.             if ( time > prevTime +  ) {
  118.  
  119.                 fps = Math.round( ( frames *  ) / ( time - prevTime ) );
  120.                 fpsMin = Math.min( fpsMin, fps );
  121.                 fpsMax = Math.max( fpsMax, fps );
  122.  
  123.                 fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';
  124.                 updateGraph( fpsGraph, Math.min( ,  - ( fps /  ) *  ) );
  125.  
  126.                 prevTime = time;
  127.                 frames = ;
  128.  
  129.             }
  130.  
  131.             return time;
  132.  
  133.         },
  134.  
  135.         update: function () {
  136.  
  137.             startTime = this.end();
  138.  
  139.         }
  140.  
  141.     }
  142.  
  143. };

stats.js随时查看fps的更多相关文章

  1. 微信小程序tips集合:无法输入文字/随时查看页面/元素审查/点击事件/数据绑定

    1:编辑文档无法输入文字 出现这种情况一般是因为之前编辑的文档未保存,所有在其他文档输入的时候会自动输入到未保存的文档中,在文档暂时编辑完毕后要ctrl+s随手保存,不然会出现无法打字情况 2: 随时 ...

  2. dat.gui stats.js 通用参数配置及图像统计工具

    在网上看到了一个非常好的JS烟雾效果 https://paveldogreat.github.io/WebGL-Fluid-Simulation/看源码时发现了dat.gui很好用. dat.gui ...

  3. 谷歌浏览器插件-html页面js事件查看器

    谷歌浏览器插件-html页面js事件查看器 1.下载 下载地址:http://files.cnblogs.com/files/graceup/VisualEvent.zip 解压得到文件:Visual ...

  4. iOS小Tip之查看FPS

    可能大家有的时候会想要查看app在运行时的帧率能否达到60帧,如果达不到的话,你可能会想着去优化动画或者其它任何会影响显示性能的问题. 但是,你首先要观察到你的FPS,对吧? 我告诉大家一个简单的方法 ...

  5. 【jQuery小实例】js 插件 查看图片

    ---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...

  6. 使用PDF.JS在线查看PDF

    过程简单粗暴. 第一步:下载源码https://github.com/mozilla/pdf.js 第二步:将源码拷贝进项目中,可以新建一个PDFShow文件夹存放代码 第三步:修改viewer.js ...

  7. JS：指定FPS帧频，requestAnimationFrame播放动画

    Flash制作动画,最基础的概念就是帧,但在Flash中,帧频的控制比较简单,只需要编译前指定一下目标帧频就可以了. 实际运行时,不需要我们关心定时器的问题,flash player会定时触发Ente ...

  8. viewer.js图片查看器插件（可缩放/旋转/切换）

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. js通过查看屏幕大小，更改其他css属性

    首先,我们要知道如何得到屏幕的相关数据. <html><head><title>获取当前对象大小以及屏幕分辨率等</title><body> ...

随机推荐

  1. cocos代码研究（7）即时动作子类学习笔记

    理论部分 即时动作是会立即被执行的动作.他们没有持续时间动作(ActionInterval)的持续时间属性.继承自 FiniteTimeAction.被 CallFunc, FlipX, FlipY, ...

  2. #C++初学记录（算法3）

    C - 不要62 杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer). 杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来,就可以消除个别的士司 ...

  3. [转]Mac Appium环境安装

    原文:https://blog.csdn.net/dongqiushan/article/details/53326518 1.安装JDK; 2.安装Android SDK; 3.安装brew; 4. ...

  4. python 命令执行文件传递参数

    import os,sys for root,dirs,files in os.walk(sys.argv[1]): for name in files: print(os.path.join(roo ...

  5. 使用IDEA 搭建SpringMVC +Easyui 实现最简单的数据展示功能

    效果图如下: 步骤如下: 1.导入jquery-easyui-1.5.5.6 2.导入相关的SpringMVC 的jar 包 3.编写datagrid.jsp 页面 <%-- Created b ...

  6. 应用程序无法正常启动0xc000007b怎么解决

    解决方法两种: 1. 网上搜索中最常见的,缺少DirectX 9 ,去下载一个安上就OK了. 2.第二种情况比较操蛋,其实报的错误应该是:mfc100u.dll丢失 .我在两台电脑上装了相同系统后,台 ...

  7. iOS之第三方库以及XCode插件介绍

    前言 第三方库是现在的程序员离不开的东西 不光是APP开发 基本上所有的商业项目 都会或多或少的使用到第三方库 Github上Star>100的开源库数量如下 可以看到JS以绝对的优势排名第一 ...

  8. 泛型编程之特性（traits）

    特性(traits):对于某种可能会出错的返回值型别(Return Type),利用类模版进行部分特例化.其思想类似设计模式. 我们只能部分特例化类模板,而不能部分特例化函数模版.——<C++ ...

  9. # 20145106 《Java程序设计》第6周学习总结

    教材学习内容总结 来源和目的都不知道的情况下还是可以撰写程序的,有这类需求的时候,可以设计一个通用的dump()方法.dump方法接受inputstream与outputstream实例,分别代表读取 ...

  10. android 实践项目 总结 （修改）

    Android手机定位与地图实现 在一个不熟悉的环境中,获得自己的位置,选择合适的就餐地点,住宿和公交路线成为一项难题.本次的实践项目就是为了解决上述难题的,通过调用百度地图的接口实现定位.查询公交路 ...