<%@ 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>
请帮我更正一下,效果能开始移动,能停止,要保持连续性,并且移动中不要加速!!!
<!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>
请帮我更正一下,效果能开始移动,能停止,要保持连续性,并且移动中不要加速!!!
<!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>
[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]
<!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"/>
<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>怎样让它不加速移动?????