网页计时功能实现

最新推荐文章于 2023-11-29 11:22:01 发布

fengdanibt

最新推荐文章于 2023-11-29 11:22:01 发布

阅读量2.7k

点赞数

分类专栏： html 文章标签： html js three.js

本文链接：https://blog.csdn.net/fengdanibt/article/details/8546321

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.three.js : clock http://www.c3dn.net/forum.php?mod=viewthread&tid=2490

该构造函数创建时钟（确切的说是秒表）对象

THREE.Clock = function ( autoStart ) {
    this.autoStart = ( autoStart !== undefined ) ? autoStart : true;
    this.startTime = 0;
    this.oldTime = 0;
    this.elapsedTime = 0;
    this.running = false;
};

函数start()和stop()用来开始计时或停止计时。

函数getDelta()返回调用该函数时距离上一次调用该函数时的时间长度，如果是第一次调用该函数，则返回此时距离开始计时时的时间长度。如果autoStart值为真，若在调用getDelta()函数时尚未调用start()函数或者已经调用过stop()函数，则自动开始计时并返回0。如果autoStart()值为假，则在调用start()之前或stop()之后，调用getDelta()返回0。
函数getElapsedTime()返回调用该函数时距离开始计时时的时间。

e.g.

  
  
   
   				function
  
  
  
  
   
   				 
   
   render
   
   () 
   
   {
  
  
  
  

  
  
  
  				
   
   var 
   
   delta 
   
   = 
   
   clock
   
   .
   
   getDelta
   
   (),
  
  
  
  					
   
   time 
   
   = 
   
   clock
   
   .
   
   getElapsedTime
   
   () 
   
   * 
   
   10
   
   ;
  
  
  
  

  
  
  
  				
   
   for 
   
   ( 
   
   var 
   
   i 
   
   = 
   
   0
   
   , 
   
   l 
   
   = 
   
   geometry
   
   .
   
   vertices
   
   .
   
   length
   
   ; 
   
   i 
   
   < 
   
   l
   
   ; 
   
   i 
   
   ++ 
   
   ) 
   
   {
  
  
  
  

  
  
  
  					
   
   geometry
   
   .
   
   vertices
   
   [ 
   
   i 
   
   ].
   
   y 
   
   = 
   
   35 
   
   * 
   
   Math
   
   .
   
   sin
   
   ( 
   
   i 
   
   / 
   
   5 
   
   + 
   
   ( 
   
   time 
   
   + 
   
   i 
   
   ) 
   
   / 
   
   7 
   
   );
  
  
  
  

  
  
  
  				
   
   }
  
  
  
  

  
  
  
  				
   
   //geometry.computeFaceNormals();
  
  
  
  				
   
   //geometry.computeVertexNormals();
  
  
  
  

  
  
  
  				
   
   mesh
   
   .
   
   geometry
   
   .
   
   verticesNeedUpdate 
   
   = 
   
   true
   
   ;
  
  
  
  				
   
   //mesh.geometry.normalsNeedUpdate = true;
  
  
  
  

  
  
  
  				
   
   controls
   
   .
   
   update
   
   ( 
   
   delta 
   
   );
  
  
  
  				
   
   renderer
   
   .
   
   render
   
   ( 
   
   scene
   
   , 
   
   camera 
   
   );
  
  
  
  

  
  
  
  			
   
   }

/**
 * @author alteredq / http://alteredqualia.com/
 */

THREE.Clock = function ( autoStart ) {

	this.autoStart = ( autoStart !== undefined ) ? autoStart : true;

	this.startTime = 0;
	this.oldTime = 0;
	this.elapsedTime = 0;

	this.running = false;

};

THREE.Clock.prototype.start = function () {

	this.startTime = Date.now();
	this.oldTime = this.startTime;

	this.running = true;

};

THREE.Clock.prototype.stop = function () {

	this.getElapsedTime();

	this.running = false;

};

THREE.Clock.prototype.getElapsedTime = function () {

	this.elapsedTime += this.getDelta();

	return this.elapsedTime;

};


THREE.Clock.prototype.getDelta = function () {

	var diff = 0;

	if ( this.autoStart && ! this.running ) {

		this.start();

	}

	if ( this.running ) {

		var newTime = Date.now();
		diff = 0.001 * ( newTime - this.oldTime );
		this.oldTime = newTime;

		this.elapsedTime += diff;

	}

	return diff;

};

2.js http://www.w3school.com.cn/js/js_timing.asp

JavaScript 计时事件

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setTimeout()

未来的某时执行代码

clearTimeout()

取消setTimeout()

setTimeout()

语法

var t=setTimeout("javascript语句",毫秒)

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数。

提示：1000 毫秒等于一秒。

实例

当下面这个例子中的按钮被点击时，一个提示框会在5秒中后弹出。

<html>
<head>
<script type="text/javascript">
function timedMsg()
 {
 var t=setTimeout("alert('5 seconds!')",5000)
 }
</script>
</head>

<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
</body>
</html>

实例 - 无穷循环

要创建一个运行于无穷循环中的计时器，我们需要编写一个函数来调用其自身。在下面的例子中，当按钮被点击后，输入域便从 0 开始计数。

<html>

<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
 {
 document.getElementById('txt').value=c
 c=c+1
 t=setTimeout("timedCount()",1000)
 }
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
</form>
</body>

</html>

clearTimeout()

语法

clearTimeout(setTimeout_variable)

实例

下面的例子和上面的无穷循环的例子相似。唯一的不同是，现在我们添加了一个 "Stop Count!" 按钮来停止这个计数器：

<html>

<head>
<script type="text/javascript">
var c=0
var t

function timedCount()
 {
 document.getElementById('txt').value=c
 c=c+1
 t=setTimeout("timedCount()",1000)
 }

function stopCount()
 {
 clearTimeout(t)
 }
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>

</html>

fengdanibt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页计时功能实现

1.three.js : clock http://www.c3dn.net/forum.php?mod=viewthread&tid=2490该构造函数创建时钟（确切的说是秒表）对象THREE.Clock = function ( autoStart ) { this.autoStart = ( autoStart !== undefined ) ? autoStar
复制链接

扫一扫