关于多页面调用时钟显示功能的问题

ldwd 2011-12-27 04:37:58

请教各位玩家，我需要在多个页面都显示时钟功能，我自己写了个js通用脚本，这样每个页面在调用这个脚本的时候，只需要传入需要显示时钟元素的id即可，但是好像有问题，这个clock对象的定时器在第二次执行的时候，保存id的属性变成了空，请教一下，这段代码该如何写？

time.js脚本代码如下：



function Clock()

{

	this.showtip = null;   //保存页面传进来的元素id；

	this.timerID = null;

  	this.timerRunning = false;

  

// Make sure the clock is stopped

	

	this.show = function(showtip)    //定时循环的函数

	{ 

		this.showtip = showtip;   //将属性赋值。

		alert(typeof this.showtip);

		

		if(this.timerRunning)

			clearTimeout(this.timerID);

		

		this.timerRunning = false

		var now = new Date();

		var hours = now.getHours();

		var minutes = now.getMinutes();

		var seconds = now.getSeconds();

		var timeValue = "" + ((hours < 10) ? "0" : "") + hours;

		timeValue += ((minutes < 10) ? ":0" : ":") + minutes

		timeValue += ((seconds < 10) ? ":0" : ":") + seconds;

		

		if(showtip != null)

		{

			this.showtip.innerHTML = timeValue;

		}

			

		this.timerID = setTimeout("show(this.showtip)" ,1000);   

		this.timerRunning = true;

	}

	

}

页面代码如下：



<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script type="text/javascript" src="time.js"></script>

<script type="text/javascript">

document.onreadystatechange = function()

{

  if (document.readyState == "complete")

  {

  	var clock = new top.Clock();

	clock.show(oClock);

    // 文档状态为完成，开始执行相应处理

  }

}

</script>

</head>



<body>

<div style=" position: absolute; background-color:#3366cc; width:50%; height:50%;" id = "oDiv">

<span style="position: relative ; color:#FFF; font-family:黑体; font-weight:bold; font-size:15px; top:10%; left:80%;" ID="oClock"></span>

</div>

</body>

</html>

...全文

88 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

ldwd 2011-12-31

打赏
举报

我找到了解决方法，方法如下即可：



this.showtip = null;

	this.timerID = null;

  	this.timerRunning = false;

  	

// Make sure the clock is stopped

	

	this.show = function()

	{

		var obj = this;

		

		//alert(typeof obj.showtip);

		

		if(obj.timerRunning)

			clearTimeout(obj.timerID);

			

		obj.timerRunning = false;

	

		var now = new Date();

		var hours = now.getHours();

		var minutes = now.getMinutes();

		var seconds = now.getSeconds();

		var timeValue = "" + ((hours < 10) ? "0" : "") + hours;

			timeValue += ((minutes < 10) ? ":0" : ":") + minutes

			timeValue += ((seconds < 10) ? ":0" : ":") + seconds;

		

		if(obj.showtip != null)

			obj.showtip.innerHTML = timeValue;

			

		obj.timerID = setTimeout(function(){obj.show();},1000);

		obj.timerRunning = true;

	}

把四楼的var obj = this移到函数内，并将setTimeout第一个参数改为函数，即可完美解决。

hch126163 2011-12-28

打赏
举报

var obj = this;
this.show = function( ) //定时循环的函数
{

alert(typeof obj.showtip);

if(obj.timerRunning)
clearTimeout(obj.timerID);

obj.timerRunning = false
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var timeValue = "" + ((hours < 10) ? "0" : "") + hours;
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds;

if(showtip != null)
{
obj.showtip.innerHTML = timeValue;
}

obj.timerID = setTimeout("show()" ,1000);
obj.timerRunning = true;
}

ldwd 2011-12-28

打赏
举报

那要如何修改这段代码呢？是不是setTimeout函数没法在封装的类中使用？

ldwd 2011-12-28

打赏
举报

多谢楼上的，不过试过了，好像还是不行

zjleon2008 2011-12-27

打赏
举报

this.showtip = showtip; //将属性赋值。
这里的this.showtip只属于第一次进入的show函数空间,即使你后面把他传递给了setTimeout中的第二个show函数,但只是传了个变量的指针,等setTimeout执行第二个show函数的时候,第一个show函数的空间已经消失,它的this.showtip变量也消失,既然这个this.showtip指针没有指向任何东西,当然就变成null了

zjleon2008 2011-12-27