none
请教，用JavaScript周期性地改变一个TD对象的背景色 RRS feed

 > 

  • 问题

  • Question
    登录进行投票
    0
    登录进行投票

    我想写一个类，能够闪烁一个指定对象的背景色。所谓的“闪烁”其实就是说，第一次将对象背景色改为红色，过半秒钟之后改回原来的颜色，然后重复这个操作若干次。

    我的写法：
    function FlashBG(obj)
    {
    //“obj”是用户希望要闪烁的对象
     this.x_obj=obj;
     this.c = 0;
    }

    FlashBG.prototype=
    {
     flash:function()
     {
      this.x_obj.style.backgroundColor = (this.x_obj.style.backgroundColor=="")?"red":"";
      this.c=this.c+1;
      if(this.c<5)
       setTimeout(this.flash,500);
     }
    }

    其中，“x_obj”是要闪烁的对象，而“c”就是记录已经闪烁了多少次
    现在让我困惑的是在   setTimeout(this.flash,500); 这句，这样写是错误的，运行期间会报“this.x_obj不是对象的错误”

    请问应该怎么写才对？

    da jia hao!
    2010年2月22日 8:36
    |

答案

  • Question
    登录进行投票
    0
    登录进行投票
    给你写了一段 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>无标题 1</title>
<script>
var FlashBG; if (!FlashBG) FlashBG= {};

FlashBG  = function()
{
	var obj;
	
	this.SetObject = function(obj)
	{
		this.obj = obj;
	}
	
	var Intellisense;
	var objBg ;
	var objNewBg;
	var timer;
	
	this.Tick = function()
	{
		if(this.obj.style.backgroundColor == this.objBg )
			this.obj.style.backgroundColor = this.objNewBg ;
		else
			this.obj.style.backgroundColor = this.objBg;

	}

	this.Start = function()
	{
		this.obj.innerHTML = "<b>闪烁 开始</b>";
		this.objBg  = this.obj.style.backgroundColor;
		this.objNewBg = "blue";
		this.timer = setInterval("FlashBG.Intellisense.Tick();",500);
	}
	
	this.Stop = function()
	{
		clearTimeout(this.timer);
		this.obj.innerHTML = "<b>闪烁 停止</b>";
		this.obj.style.backgroundColor = this.objBg;
	}

}

FlashBG.Intellisense = new FlashBG();
</script>
</head>

<body  onload="FlashBG.Intellisense.SetObject(document.getElementById('test'));">
<input name="Button1" type="button" value="开始"   onclick="FlashBG.Intellisense.Start()" />
<input name="Button2" type="button" value="停止"   onclick="FlashBG.Intellisense.Stop()" />
<div id="test" style="background-color:red;">测试</div>
</body>

</html>
    • 已标记为答案 liubin 2010年2月22日 9:55
    2010年2月22日 9:38
    |

全部回复

  • Question
    登录进行投票
    0
    登录进行投票
    setTimeout 是全局函数 。。。 没有 this ...
    2010年2月22日 8:48
    |
  • Question
    登录进行投票
    0
    登录进行投票
    setTimeout 是全局函数 。。。 没有 this ...

    谢谢回复。那么怎么写才对呢？要用到什么方法？
    da jia hao!
    2010年2月22日 8:49
    |
  • Question
    登录进行投票
    0
    登录进行投票
    给你写了一段 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>无标题 1</title>
<script>
var FlashBG; if (!FlashBG) FlashBG= {};

FlashBG  = function()
{
	var obj;
	
	this.SetObject = function(obj)
	{
		this.obj = obj;
	}
	
	var Intellisense;
	var objBg ;
	var objNewBg;
	var timer;
	
	this.Tick = function()
	{
		if(this.obj.style.backgroundColor == this.objBg )
			this.obj.style.backgroundColor = this.objNewBg ;
		else
			this.obj.style.backgroundColor = this.objBg;

	}

	this.Start = function()
	{
		this.obj.innerHTML = "<b>闪烁 开始</b>";
		this.objBg  = this.obj.style.backgroundColor;
		this.objNewBg = "blue";
		this.timer = setInterval("FlashBG.Intellisense.Tick();",500);
	}
	
	this.Stop = function()
	{
		clearTimeout(this.timer);
		this.obj.innerHTML = "<b>闪烁 停止</b>";
		this.obj.style.backgroundColor = this.objBg;
	}

}

FlashBG.Intellisense = new FlashBG();
</script>
</head>

<body  onload="FlashBG.Intellisense.SetObject(document.getElementById('test'));">
<input name="Button1" type="button" value="开始"   onclick="FlashBG.Intellisense.Start()" />
<input name="Button2" type="button" value="停止"   onclick="FlashBG.Intellisense.Stop()" />
<div id="test" style="background-color:red;">测试</div>
</body>

</html>
    • 已标记为答案 liubin 2010年2月22日 9:55
    2010年2月22日 9:38
    |
  • Question
    登录进行投票
    0
    登录进行投票

    谢谢！有效果了。但是我不明白：
    setInterval("FlashBG.Intellisense.Tick();",500);

    这句是什么意思。。。

    “    Intellisense”是类里面的一个变量，而Tick()是类里面的方法，为何可以这样调用呢：FlashBG.Intellisense.Tick();？

    da jia hao!
    2010年2月22日 9:44
    |
  • Question
    登录进行投票
    0
    登录进行投票
    Intellisense 是 FlashBG 的“静态”（js是动态语言，不存真正的静态变量。）成员变量，这个成员存储了 FlashBG 对象的实例("FlashBG.Intellisense = new FlashBG();" 这句new出来的)  .. 所以 FlashBG.Intellisense.Tick(); 放到脚本的任意位置都可以用  。。。。自然定时器里面也可以用 。。。
    2010年2月22日 9:53
    |