<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="utf-8" %>
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title><script>
var MoveByCircle={
center_x:100,
center_y:100,
dv:5,
radius:100,
angle:0,
stopMove:0,
currentAngle:0
};
MoveByCircle.move=function(){
var  degree=2*Math.PI/40/this.dv;
//if (!('angle' in MoveByCircle)) this.angle=this.currentAngle;
var obj=$('circle');
var dx=parseFloat(obj.style.left);
var dy=parseFloat(obj.style.top);
this.angle+=degree;
document.myform.pos.value="Left: "+dx.toString()+","+"Top: "+dy;
dx=this.center_x+Math.sin(this.angle)*this.radius;
dy=this.center_y-Math.cos(this.angle)*this.radius;

obj.style.left=dx+"px";
obj.style.top=dy+"px";
if(this.stopMove){
this.currentAngle=this.angle;
clearInterval(MoveByCircle.move());
}


}
function $(item){
return document.getElementById(item);
}

</script>
</head>
<body >
<form name="myform"><input type="button" onclick="MoveByCircle.stopMove=0;setInterval(function(){MoveByCircle.move();},10);" value="Start"/><br />
<input type="button" onclick="MoveByCircle.stopMove=1;" value="Stop"/><br />
<input type="text" name="pos"/>
<div id="circle" style="position:absolute;width:10px;height:10px;left:200px;top:100px;border:solid 1px red">
</div>
</form>
</html>
请帮我更正一下,效果能开始移动,能停止,要保持连续性,并且移动中不要加速!!!

解决方案 »

  1.   

    有个函数用错了<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="utf-8" %>
    <!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title><script>
       var TIMER;
        var MoveByCircle={
            center_x:100,
            center_y:100,
            dv:5,
            radius:100,
            angle:0,
            stopMove:0,
            currentAngle:0
        };
        MoveByCircle.move=function(){
            var  degree=2*Math.PI/40/this.dv;
            //if (!('angle' in MoveByCircle)) this.angle=this.currentAngle;
            var obj=$('circle');
            var dx=parseFloat(obj.style.left);
            var dy=parseFloat(obj.style.top);
            this.angle+=degree;
            document.myform.pos.value="Left: "+dx.toString()+","+"Top: "+dy;
            dx=this.center_x+Math.sin(this.angle)*this.radius;
            dy=this.center_y-Math.cos(this.angle)*this.radius;
            
            obj.style.left=dx+"px";
            obj.style.top=dy+"px";
            if(!!this.stopMove){
                this.currentAngle=this.angle;
                clearInterval(TIMER);  //注意这里
            }
            
            
        }
        function $(item){
            return document.getElementById(item);
        }
        
    </script>
    </head>
    <body >
    <form name="myform" ID="Form1"><input type="button" onclick="MoveByCircle.stopMove=0;TIMER=setInterval(function(){MoveByCircle.move();},10);" value="Start" ID="Button1" NAME="Button1"/><br />
    <input type="button" onclick="MoveByCircle.stopMove=1;" value="Stop" ID="Button2" NAME="Button2"/><br />
    <input type="text" name="pos" ID="Text1"/>
    <div id="circle" style="position:absolute;width:10px;height:10px;left:200px;top:100px;border:solid 1px red">
    </div>
    </form>
    </html>
      

  2.   

    不要加速,每次单击Stop按钮时,移动速度都加快了,不要加速该怎么办?????
      

  3.   

    3L的方法不错  不过有个问题 就是多次点击start以后 速度变快 而且不能停下。 不知道lz是不是要这种效果
      

  4.   

    这个
    [code]
    <%@ Page Language="C#" ContentType="text/html" ResponseEncoding="utf-8" %>
    <!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title><script>
       var TIMER;
        var MoveByCircle={
            center_x:100,
            center_y:100,
            dv:5,
            radius:100,
            angle:0,
            stopMove:0,
            currentAngle:0
        };
        MoveByCircle.move=function(){
            var  degree=2*Math.PI/40/this.dv;
            //if (!('angle' in MoveByCircle)) this.angle=this.currentAngle;
            var obj=$('circle');
            var dx=parseFloat(obj.style.left);
            var dy=parseFloat(obj.style.top);
            this.angle+=degree;
            document.myform.pos.value="Left: "+dx.toString()+","+"Top: "+dy;
            dx=this.center_x+Math.sin(this.angle)*this.radius;
            dy=this.center_y-Math.cos(this.angle)*this.radius;
            
            obj.style.left=dx+"px";
            obj.style.top=dy+"px";
            if(!!this.stopMove){
                this.currentAngle=this.angle;
                clearInterval(TIMER);
            }
            
            
        }
        function $(item){
            return document.getElementById(item);
        }
        
    </script>
    </head>
    <body >
    <form name="myform" ID="Form1"><input type="button" onclick="MoveByCircle.stopMove=0; clearInterval(TIMER);TIMER=setInterval(function(){MoveByCircle.move();},10);" value="Start" ID="Button1" NAME="Button1"/><br />
    <input type="button" onclick="MoveByCircle.stopMove=1;" value="Stop" ID="Button2" NAME="Button2"/><br />
    <input type="text" name="pos" ID="Text1"/>
    <div id="circle" style="position:absolute;width:10px;height:10px;left:200px;top:100px;border:solid 1px red">
    </div>
    </form>
    </html>
    [/code]
      

  5.   

    <%@ Page Language="C#" ContentType="text/html" ResponseEncoding="utf-8" %>
    <!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title><script>
    var TIMER;
    var MoveByCircle={
    center_x:400,
    center_y:250,
    dv:5,
    radius:200,
    angle:0,
    stopMove:true,
    currentAngle:0
    };

    var move=function(center_x,center_y,radius,dv,stopMove){
    var  degree=2*Math.PI/40/dv;

    var obj=$('circle');
    var dx=parseFloat(obj.style.left);
    var dy=parseFloat(obj.style.top);

    if(!MoveByCircle.stopMove){

    MoveByCircle.angle+=degree;
    document.myform.pos.value="Left: "+dx.toString()+","+"Top: "+dy;
    dx=center_x + Math.sin(MoveByCircle.angle)*radius;
    dy=center_y - Math.cos(MoveByCircle.angle)*radius;

    obj.style.left=dx+"px";
    obj.style.top=dy+"px";
    //clearInterval(TIMER);
    }else{
    //this.currentAngle=this.angle;
    clearInterval(TIMER);
    }


    }
    function $(item){
    return document.getElementById(item);
    }
    startMove=function(){
    MoveByCircle.stopMove=false;
    TIMER=setInterval(function(){move(400,250,200,5,false);},10);
    }



    </script>
    </head>
    <body >
    <form name="myform">
    <input type="button" onclick="startMove();" value="Start"/>&nbsp;&nbsp;
    <input type="button" onclick="MoveByCircle.stopMove=true;" value="Stop"/><br /><input type="text" name="pos"/>
    <div id="circle" style="position:absolute;width:10px;height:10px;left:400px;top:50px;border:solid 1px red">
    </div>
    </form>
    </html>怎样让它不加速移动?????