我这段脚本中有一点拖拽的。你LOOK一下。
<html xmlns:v = "urn:schemas-microsoft-com:vml">
<head>
<script language="JavaScript">
var FromHeight=200;
var FromWidth=FromHeight;
var OpenMill=true; //cut a second to 10
var ChangeMolde=false;//if change
var BeginDrag=false;
var rectHour;
var rectSecond;
var rectMinter;
var ClockTime;//
var HourfillColor;//object of hour point.
var MinfillColor;//object of minuter point.
var DragObject="none";//changed object.
var OldPointMin=0;//take old Minuters Have point to see back or forward
var MondifyHour=0;//When changed,the time is.
nUnit="px";//input the unit.
function MoldeChanged()
{
if (!ChangeMolde)
{
var Now = new Date();
ChangeMolde=true;
document.ondragstart=new Function ("return false");
document.onselectstart=new Function ("return false");
rectHour.onmouseover=OverPoint;
rectHour.onmouseout=OutPoint;
rectHour.onmousedown=Function ("DownPoint('rectHour')");
rectMinter.onmouseover=OverPoint;
rectMinter.onmouseout=OutPoint;
rectMinter.onmousedown=Function ("DownPoint('rectMinter')");
}
else
{
ChangeMolde=false;
rectHour.onmouseover=new Function ("return false");
rectHour.onmouseout=new Function ("return false");
rectHour.onmousedown=new Function ("return false");
rectMinter.onmouseover=new Function ("return false");
rectMinter.onmouseout=new Function ("return false");
rectMinter.onmousedown=new Function ("return false");
document.onclick=new Function ("return false");
document.ondragstart=new Function ("return false");
document.onselectstart=new Function ("return false");
ClockSpan.onmousemove=new Function ("return false");
SetTime(0);
}
}
function SetTime(SetEvent)
{
var Now = new Date();
var Seconds = Now.getSeconds();
var Minutes = Now.getMinutes();
var Hours = Now.getHours();
var minSeconds=Now.getUTCMilliseconds();
ClockTime.value=Hours+":"+Minutes+","+Seconds;
if (!OpenMill)
minSeconds=0;
rectSecond.rotation=Seconds*6+minSeconds*0.006;
rectMinter.rotation=Minutes*6+Seconds/60;
if (Hours>=12)
Hours=Hours-12;
rectHour.rotation=Hours*30+Minutes/2;
HourfillColor.angle=Hours*30+Minutes/2;
MinfillColor.angle=Minutes*6+Seconds/60;
if (!ChangeMolde)
{
window.clearTimeout(ColokInterval);
var ColokInterval=window.setTimeout("SetTime(0)",100);
}}function MovePoint()
{
var ModifyMinuter;
if (DragObject!="none")
{
if(DragObject=="rectHour")
{
if (((window.event.y-0.5*FromHeight)<0) && ((window.event.clientX-0.5*FromHeight)>=0))
{
HourfillColor.angle=Math.atan2((window.event.clientX-0.5*FromHeight),(0.5*FromHeight-window.event.y))*(180/Math.PI);
rectHour.rotation=Math.atan2((window.event.clientX-0.5*FromHeight),(0.5*FromHeight-window.event.y))*(180/Math.PI);
}
else if(((window.event.y-0.5*FromHeight)>=0) && ((window.event.clientX-0.5*FromHeight)>0))
{
HourfillColor.angle=90+Math.atan2((window.event.y-0.5*FromHeight),(window.event.clientX-0.5*FromHeight))*(180/Math.PI);
rectHour.rotation=90+Math.atan2((window.event.y-0.5*FromHeight),(window.event.clientX-0.5*FromHeight))*(180/Math.PI);
}
else if(((window.event.y-0.5*FromHeight)>0) && ((window.event.clientX-0.5*FromHeight)<=0))
{
HourfillColor.angle=180+Math.atan2((0.5*FromHeight-window.event.clientX),(window.event.y-0.5*FromHeight))*(180/Math.PI);
rectHour.rotation=180+Math.atan2((0.5*FromHeight-window.event.clientX),(window.event.y-0.5*FromHeight))*(180/Math.PI);
}
else if(((window.event.y-0.5*FromHeight)<=0) && ((window.event.clientX-0.5*FromHeight)<0))
{
HourfillColor.angle=360-Math.atan2((0.5*FromHeight-window.event.clientX),(0.5*FromHeight-window.event.y))*(180/Math.PI);
rectHour.rotation=360-Math.atan2((0.5*FromHeight-window.event.clientX),(0.5*FromHeight-window.event.y))*(180/Math.PI);
}
MondifyMinuter=Math.floor((rectHour.rotation-Math.floor(rectHour.rotation/30)*30)*2);
OldPointMin=MondifyMinuter;
}
else if(DragObject=="rectMinter")
{
var NowPointMin=0;
if (((window.event.y-0.5*FromHeight)<0) && ((window.event.clientX-0.5*FromHeight)>=0))
{
if (OldPointMin>45)
{
rectHour.rotation=Math.floor(rectHour.rotation/30)*30+30;
}
else
{
MinfillColor.angle=Math.atan2((window.event.clientX-0.5*FromHeight),(0.5*FromHeight-window.event.y))*(180/Math.PI);
rectMinter.rotation=Math.atan2((window.event.clientX-0.5*FromHeight),(0.5*FromHeight-window.event.y))*(180/Math.PI);
NowPointMin=Math.atan2((window.event.clientX-0.5*FromHeight),(0.5*FromHeight-window.event.y))*(180/Math.PI);
rectHour.rotation=Math.floor(rectHour.rotation/30)*30+NowPointMin/12;
}
OldPointMin=NowPointMin/6;
}
else if(((window.event.y-0.5*FromHeight)>=0) && ((window.event.clientX-0.5*FromHeight)>0))
{
MinfillColor.angle=90+Math.atan2((window.event.y-0.5*FromHeight),(window.event.clientX-0.5*FromHeight))*(180/Math.PI);
rectMinter.rotation=90+Math.atan2((window.event.y-0.5*FromHeight),(window.event.clientX-0.5*FromHeight))*(180/Math.PI);
NowPointMin=90+Math.atan2((window.event.y-0.5*FromHeight),(window.event.clientX-0.5*FromHeight))*(180/Math.PI);
rectHour.rotation=Math.floor(rectHour.rotation/30)*30+NowPointMin/12;
OldPointMin=NowPointMin/6;
}
else if(((window.event.y-0.5*FromHeight)>0) && ((window.event.clientX-0.5*FromHeight)<=0))
{
MinfillColor.angle=180+Math.atan2((0.5*FromHeight-window.event.clientX),(window.event.y-0.5*FromHeight))*(180/Math.PI);
rectMinter.rotation=180+Math.atan2((0.5*FromHeight-window.event.clientX),(window.event.y-0.5*FromHeight))*(180/Math.PI);
NowPointMin=180+Math.atan2((0.5*FromHeight-window.event.clientX),(window.event.y-0.5*FromHeight))*(180/Math.PI);
rectHour.rotation=Math.floor(rectHour.rotation/30)*30+NowPointMin/12;
OldPointMin=NowPointMin/6;
}
else if(((window.event.y-0.5*FromHeight)<=0) && ((window.event.clientX-0.5*FromHeight)<0))
{
if (OldPointMin<15)
{
rectHour.rotation=Math.floor(rectHour.rotation/30)*30-30;
}
MinfillColor.angle=360-Math.atan2((0.5*FromHeight-window.event.clientX),(0.5*FromHeight-window.event.y))*(180/Math.PI);
rectMinter.rotation=360-Math.atan2((0.5*FromHeight-window.event.clientX),(0.5*FromHeight-window.event.y))*(180/Math.PI);
NowPointMin=360-Math.atan2((0.5*FromHeight-window.event.clientX),(0.5*FromHeight-window.event.y))*(180/Math.PI);
rectHour.rotation=Math.floor(rectHour.rotation/30)*30+NowPointMin/12;
OldPointMin=NowPointMin/6;
}
MondifyMinuter=Math.floor((rectHour.rotation-Math.floor(rectHour.rotation/30)*30)*2);
} MondifyHour=Math.floor(rectHour.rotation/30);
if (MondifyHour<0)
{
MondifyHour=12-Math.abs(MondifyHour-Math.ceil(MondifyHour/12)*12);
}
document.all("MondifyTime").value=Math.floor(rectHour.rotation/30)+","+MondifyHour+":"+MondifyMinuter;
}
}
<html xmlns:v = "urn:schemas-microsoft-com:vml">
<head>
<script language="JavaScript">
var FromHeight=200;
var FromWidth=FromHeight;
var OpenMill=true; //cut a second to 10
var ChangeMolde=false;//if change
var BeginDrag=false;
var rectHour;
var rectSecond;
var rectMinter;
var ClockTime;//
var HourfillColor;//object of hour point.
var MinfillColor;//object of minuter point.
var DragObject="none";//changed object.
var OldPointMin=0;//take old Minuters Have point to see back or forward
var MondifyHour=0;//When changed,the time is.
nUnit="px";//input the unit.
function MoldeChanged()
{
if (!ChangeMolde)
{
var Now = new Date();
ChangeMolde=true;
document.ondragstart=new Function ("return false");
document.onselectstart=new Function ("return false");
rectHour.onmouseover=OverPoint;
rectHour.onmouseout=OutPoint;
rectHour.onmousedown=Function ("DownPoint('rectHour')");
rectMinter.onmouseover=OverPoint;
rectMinter.onmouseout=OutPoint;
rectMinter.onmousedown=Function ("DownPoint('rectMinter')");
}
else
{
ChangeMolde=false;
rectHour.onmouseover=new Function ("return false");
rectHour.onmouseout=new Function ("return false");
rectHour.onmousedown=new Function ("return false");
rectMinter.onmouseover=new Function ("return false");
rectMinter.onmouseout=new Function ("return false");
rectMinter.onmousedown=new Function ("return false");
document.onclick=new Function ("return false");
document.ondragstart=new Function ("return false");
document.onselectstart=new Function ("return false");
ClockSpan.onmousemove=new Function ("return false");
SetTime(0);
}
}
function SetTime(SetEvent)
{
var Now = new Date();
var Seconds = Now.getSeconds();
var Minutes = Now.getMinutes();
var Hours = Now.getHours();
var minSeconds=Now.getUTCMilliseconds();
ClockTime.value=Hours+":"+Minutes+","+Seconds;
if (!OpenMill)
minSeconds=0;
rectSecond.rotation=Seconds*6+minSeconds*0.006;
rectMinter.rotation=Minutes*6+Seconds/60;
if (Hours>=12)
Hours=Hours-12;
rectHour.rotation=Hours*30+Minutes/2;
HourfillColor.angle=Hours*30+Minutes/2;
MinfillColor.angle=Minutes*6+Seconds/60;
if (!ChangeMolde)
{
window.clearTimeout(ColokInterval);
var ColokInterval=window.setTimeout("SetTime(0)",100);
}}function MovePoint()
{
var ModifyMinuter;
if (DragObject!="none")
{
if(DragObject=="rectHour")
{
if (((window.event.y-0.5*FromHeight)<0) && ((window.event.clientX-0.5*FromHeight)>=0))
{
HourfillColor.angle=Math.atan2((window.event.clientX-0.5*FromHeight),(0.5*FromHeight-window.event.y))*(180/Math.PI);
rectHour.rotation=Math.atan2((window.event.clientX-0.5*FromHeight),(0.5*FromHeight-window.event.y))*(180/Math.PI);
}
else if(((window.event.y-0.5*FromHeight)>=0) && ((window.event.clientX-0.5*FromHeight)>0))
{
HourfillColor.angle=90+Math.atan2((window.event.y-0.5*FromHeight),(window.event.clientX-0.5*FromHeight))*(180/Math.PI);
rectHour.rotation=90+Math.atan2((window.event.y-0.5*FromHeight),(window.event.clientX-0.5*FromHeight))*(180/Math.PI);
}
else if(((window.event.y-0.5*FromHeight)>0) && ((window.event.clientX-0.5*FromHeight)<=0))
{
HourfillColor.angle=180+Math.atan2((0.5*FromHeight-window.event.clientX),(window.event.y-0.5*FromHeight))*(180/Math.PI);
rectHour.rotation=180+Math.atan2((0.5*FromHeight-window.event.clientX),(window.event.y-0.5*FromHeight))*(180/Math.PI);
}
else if(((window.event.y-0.5*FromHeight)<=0) && ((window.event.clientX-0.5*FromHeight)<0))
{
HourfillColor.angle=360-Math.atan2((0.5*FromHeight-window.event.clientX),(0.5*FromHeight-window.event.y))*(180/Math.PI);
rectHour.rotation=360-Math.atan2((0.5*FromHeight-window.event.clientX),(0.5*FromHeight-window.event.y))*(180/Math.PI);
}
MondifyMinuter=Math.floor((rectHour.rotation-Math.floor(rectHour.rotation/30)*30)*2);
OldPointMin=MondifyMinuter;
}
else if(DragObject=="rectMinter")
{
var NowPointMin=0;
if (((window.event.y-0.5*FromHeight)<0) && ((window.event.clientX-0.5*FromHeight)>=0))
{
if (OldPointMin>45)
{
rectHour.rotation=Math.floor(rectHour.rotation/30)*30+30;
}
else
{
MinfillColor.angle=Math.atan2((window.event.clientX-0.5*FromHeight),(0.5*FromHeight-window.event.y))*(180/Math.PI);
rectMinter.rotation=Math.atan2((window.event.clientX-0.5*FromHeight),(0.5*FromHeight-window.event.y))*(180/Math.PI);
NowPointMin=Math.atan2((window.event.clientX-0.5*FromHeight),(0.5*FromHeight-window.event.y))*(180/Math.PI);
rectHour.rotation=Math.floor(rectHour.rotation/30)*30+NowPointMin/12;
}
OldPointMin=NowPointMin/6;
}
else if(((window.event.y-0.5*FromHeight)>=0) && ((window.event.clientX-0.5*FromHeight)>0))
{
MinfillColor.angle=90+Math.atan2((window.event.y-0.5*FromHeight),(window.event.clientX-0.5*FromHeight))*(180/Math.PI);
rectMinter.rotation=90+Math.atan2((window.event.y-0.5*FromHeight),(window.event.clientX-0.5*FromHeight))*(180/Math.PI);
NowPointMin=90+Math.atan2((window.event.y-0.5*FromHeight),(window.event.clientX-0.5*FromHeight))*(180/Math.PI);
rectHour.rotation=Math.floor(rectHour.rotation/30)*30+NowPointMin/12;
OldPointMin=NowPointMin/6;
}
else if(((window.event.y-0.5*FromHeight)>0) && ((window.event.clientX-0.5*FromHeight)<=0))
{
MinfillColor.angle=180+Math.atan2((0.5*FromHeight-window.event.clientX),(window.event.y-0.5*FromHeight))*(180/Math.PI);
rectMinter.rotation=180+Math.atan2((0.5*FromHeight-window.event.clientX),(window.event.y-0.5*FromHeight))*(180/Math.PI);
NowPointMin=180+Math.atan2((0.5*FromHeight-window.event.clientX),(window.event.y-0.5*FromHeight))*(180/Math.PI);
rectHour.rotation=Math.floor(rectHour.rotation/30)*30+NowPointMin/12;
OldPointMin=NowPointMin/6;
}
else if(((window.event.y-0.5*FromHeight)<=0) && ((window.event.clientX-0.5*FromHeight)<0))
{
if (OldPointMin<15)
{
rectHour.rotation=Math.floor(rectHour.rotation/30)*30-30;
}
MinfillColor.angle=360-Math.atan2((0.5*FromHeight-window.event.clientX),(0.5*FromHeight-window.event.y))*(180/Math.PI);
rectMinter.rotation=360-Math.atan2((0.5*FromHeight-window.event.clientX),(0.5*FromHeight-window.event.y))*(180/Math.PI);
NowPointMin=360-Math.atan2((0.5*FromHeight-window.event.clientX),(0.5*FromHeight-window.event.y))*(180/Math.PI);
rectHour.rotation=Math.floor(rectHour.rotation/30)*30+NowPointMin/12;
OldPointMin=NowPointMin/6;
}
MondifyMinuter=Math.floor((rectHour.rotation-Math.floor(rectHour.rotation/30)*30)*2);
} MondifyHour=Math.floor(rectHour.rotation/30);
if (MondifyHour<0)
{
MondifyHour=12-Math.abs(MondifyHour-Math.ceil(MondifyHour/12)*12);
}
document.all("MondifyTime").value=Math.floor(rectHour.rotation/30)+","+MondifyHour+":"+MondifyMinuter;
}
}
function OutPoint()
{
if(!BeginDrag)
document.body.style.cursor="default";
}
function OverPoint()
{
document.body.style.cursor="hand";
}
function DownPoint(nstr)
{
BeginDrag=true;
DragObject=nstr;
document.body.onmousemove=MovePoint;
document.body.onmouseup=DragStop;
}
function DragStop()
{
BeginDrag=false;
OutPoint();
if (DragObject=="rectHour")
{
rectMinter.rotation=(rectHour.rotation-Math.floor(rectHour.rotation/30)*30)*12;
}
OldPointMin=0;
DragObject="none";
document.body.onmouseup="";
document.body.onmousemove="";
}
function InitFrom()
{
var imgbg=document.createElement("img");
imgbg.src="image/Watchbg.gif";
imgbg.style.width=FromHeight+nUnit;
imgbg.style.height=FromWidth+nUnit;
ClockSpan.appendChild(imgbg);
//center
var ClockCenter=document.createElement("v:oval");
ClockCenter.style.position="absolute";
ClockCenter.style.top=0.47*FromHeight+nUnit;
ClockCenter.style.left=0.47*FromWidth+nUnit;
ClockCenter.style.width=0.06*FromHeight+nUnit;
ClockCenter.style.height=0.06*FromHeight+nUnit;
ClockCenter.style.zIndex="4";
ClockCenter.strokecolor= '#9591EE';
var fileColor=document.createElement("v:fill");
fileColor.type='gradient';
fileColor.color2 = 'green';
fileColor.angle = '1200';
ClockCenter.appendChild(fileColor);
ClockSpan.appendChild(ClockCenter);
//hourspoint
rectHour=document.createElement("v:shape");
rectHour.coordorigin="0 0";
rectHour.coordsize="1000 1000";
rectHour.style.position="absolute";
rectHour.style.width=FromHeight+nUnit;
rectHour.style.height=FromWidth+nUnit;
rectHour.style.top="0"+nUnit;
rectHour.style.left="0"+nUnit;
rectHour.fillcolor = '#000000';
rectHour.strokecolor= '#9591EE';
rectHour.style.zIndex="2";
rectHour.path = 'm 490,300 l 510,300, 520,560, 480,560 xe';
var RectShaw=document.createElement("v:shadow");
RectShaw.on='t';
RectShaw.type='single';
RectShaw.offset=0.015*FromHeight+nUnit+','+0.015*FromHeight+nUnit;
rectHour.appendChild(RectShaw);
HourfillColor=document.createElement("v:fill");
HourfillColor.type='gradient';
HourfillColor.color2 = '#8380FF';
HourfillColor.angle = '180';
rectHour.appendChild(HourfillColor);
ClockSpan.appendChild(rectHour);
//minterpoint
rectMinter=document.createElement("v:shape");
rectMinter.coordorigin="0 0";
rectMinter.coordsize="1000 1000";
rectMinter.style.position="absolute";
rectMinter.style.width=FromHeight+nUnit;
rectMinter.style.height=FromWidth+nUnit;
rectMinter.style.top="0"+nUnit;
rectMinter.style.left="0"+nUnit;
rectMinter.fillcolor = '#000000';
rectMinter.strokecolor= '#9591EE';
rectMinter.style.zIndex="2";
rectMinter.path = 'm 490,200 l 510,200, 520,600, 480,600 xe';
RectShaw=document.createElement("v:shadow");
RectShaw.on='t';
RectShaw.type='single';
RectShaw.offset=0.015*FromHeight+nUnit+','+0.015*FromHeight+nUnit;
rectMinter.appendChild(RectShaw);
MinfillColor=document.createElement("v:fill");
MinfillColor.type='gradient';
MinfillColor.color2 = '#8380FF';
MinfillColor.angle = '180';
rectMinter.appendChild(MinfillColor);
ClockSpan.appendChild(rectMinter);
//secondpoint
rectSecond=document.createElement("v:shape");
rectSecond.coordorigin="0 0";
rectSecond.coordsize="1000 1000";
rectSecond.style.position="absolute";
rectSecond.style.width=FromHeight+nUnit;
rectSecond.style.height=FromWidth+nUnit;
rectSecond.style.top="0"+nUnit;
rectSecond.style.left="0"+nUnit;
rectSecond.fillcolor = '#000000';
rectSecond.strokecolor= '#000000';
rectSecond.StrokeWidth="0"+nUnit;
rectSecond.style.zIndex="2";
rectSecond.path = 'm 495,150 l 505,150, 505,600, 495,600 xe';
RectShaw=document.createElement("v:shadow");
RectShaw.on='t';
RectShaw.type='single';
RectShaw.offset=0.015*FromHeight+nUnit+','+0.015*FromHeight+nUnit;
rectSecond.appendChild(RectShaw);
ClockSpan.appendChild(rectSecond);
//set first time
ClockTime=document.createElement("input");
ClockTime.type="text";
ClockTime.style.top=FromHeight;
ClockTime.style.left=FromWidth;
ClockSpan.appendChild(ClockTime);
if (!ChangeMolde)
{
document.ondragstart=new Function ("return false");
document.onselectstart=new Function ("return false");
SetTime(0);
}
}</script>
<style>
v\:* { behavior: url(#default#VML); }</style>
</head>
<body bgcolor=Gainsboro onload="InitFrom()">
<span id=ClockSpan name=ClockSpan style="position:absolute;width:100;height:100;top:0pt;left:0pt"></span><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR>
<INPUT type="button" onclick="MoldeChanged()" value="Button" id=button1 name=button1>
<INPUT type="text" id=MondifyTime name=MondifyTime>
</body>
</html>
致敬,我其实想实现这样一种功能,用户执行某个命令在页面上动态生成一个图片(其实就是根据坐标生成一个shape形状<矩形,圆形等等>,并在上面加个标题),各个shape之间可以有连线,并且拖动shape的时候,连线可以动态跟踪shape移动,并实现把shape的基本信息(id,名称,其连线等等附加属性)存回数据库里,下次可以调用,并继续编辑
不过原理应该差不多,我会再研究一下老兄的代码,实现自己的功能的. 再次致敬,给分,如果老兄对我的需求有何指点,不胜感激.