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

  • 问题

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

    我的写法:
    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

答案

  • 给你写了一段
    <!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

全部回复

  • setTimeout 是全局函数 。。。 没有 this ...
    2010年2月22日 8:48
  • setTimeout 是全局函数 。。。 没有 this ...

    谢谢回复。那么怎么写才对呢?要用到什么方法?
    da jia hao!
    2010年2月22日 8:49
  • 给你写了一段
    <!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
  • 谢谢!有效果了。但是我不明白:
    setInterval("FlashBG.Intellisense.Tick();",500);

    这句是什么意思。。。

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


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