<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
</head>

<body >

<script language="javascript">
var nodecot=60
var check=0;
var num=30;
var ClockId;
var cotClo=1;
var direct=1;
var cloLen=200;

var Timer=document.createElement("<div id='timer'></div>");
    document.body.insertBefore(Timer);
    Timer.style.position="absolute";
 Timer.style.left=420;
 Timer.style.top=370;
   
var RadioC = document.createElement("<INPUT TYPE='radio' NAME='RadioCentre' VALUE='First Choice' checked='checked'>");
    document.body.insertBefore(RadioC);
    RadioC .style.position="absolute";
    RadioC .style.left=450;
    RadioC .style.top =350;

var buttonCentre= document.createElement("<INPUT TYPE='button' id='buttonCentre1' VALUE='Start Clock' onclick='return startClock()'>");
    document.body.insertBefore(buttonCentre);
    buttonCentre.style.position="absolute";
    buttonCentre.style.left=300;
    buttonCentre.style.top =600;

var buttonCentre= document.createElement("<INPUT TYPE='button' id='buttonCentre2' VALUE='Stop Clock' onclick='return stopClock()'>");
    document.body.insertBefore(buttonCentre);
    buttonCentre.style.position="absolute";
    buttonCentre.style.left=500;
    buttonCentre.style.top =600;
   
  for(var i=0;i<nodecot;i++)
{
 var newRadioButton = document.createElement("<INPUT TYPE='radio' NAME='RADIOTEST' VALUE='First Choice'>")
      document.body.insertBefore(newRadioButton);
      newRadioButton.style.position  ="absolute";
}

for(var i=0;i<nodecot;i++)
{
  var Radio = document.getElementsByName("RADIOTEST")
      Radio[i].style.left=cloLen*Math.sin((i*(360/nodecot)/180)*Math.PI)+450; 
      Radio[i].style.top =cloLen*Math.cos((i*(360/nodecot)/180)*Math.PI)+350;
}

 ClockId=window.setInterval(changeCheck,1000);

function changeCheck(){
 var dateTime=new Date();
 var sec =dateTime.getSeconds();
 var nowp;
 document.getElementById("timer").innerHTML=dateTime.getHours()+"时"+dateTime.getMinutes()+"分"+sec+"秒";
 if(sec>=0&&sec<=30)  nowp=30-sec;
 if(sec>30&&sec<60)   nowp=90-sec;
 document.getElementsByName("RADIOTEST")[nowp].checked='checked';
 document.getElementsByName("RADIOTEST")[nowp].style.backgroundColor='red';
 if(nowp>59)nowp=0
 document.getElementsByName("RADIOTEST")[nowp+1].style.backgroundColor='beige';
 
//document.getElementById("div").innerHTML=j+"&nbsp";

}

document.onmousedown=MouseDown;
document.onmouseup=MouseDown3;


function MouseDown(){
document.onmousemove=MouseDown2;
document.onmouseup=MouseDown3;
}

function MouseDown2(){

document.getElementById("div2").innerHTML="X:"+event.x+"&nbspY:"+event.y;
//document.getElementById("div3").innerHTML=Math.abs(parseInt(document.getElementById("RadioCentre").style.left)-event.x);
var widlen=Math.abs(parseInt(document.getElementById("RadioCentre").style.left)-event.x);
var heilen=Math.abs(parseInt(document.getElementById("RadioCentre").style.top)-event.y);
//document.getElementById("div3").innerHTML=Math.sqrt(widlen*widlen+heilen*heilen);
if(widlen<100&&heilen<100)
//if(Math.sqrt(widlen*widlen+heilen*heilen)<100)
{
document.getElementById("RadioCentre").style.left=event.x;
document.getElementById("RadioCentre").style.top=event.y;
for(var i=0;i<nodecot;i++)
{
  var Radio = document.getElementsByName("RADIOTEST")
      Radio[i].style.left=cloLen*Math.sin((i*(360/nodecot)/180)*Math.PI)+event.x; 
      Radio[i].style.top =cloLen*Math.cos((i*(360/nodecot)/180)*Math.PI)+event.y;
}
 document.getElementById("timer").style.left=event.x-30;
 document.getElementById("timer").style.top=event.y+20;


}

var widlenBu=Math.abs(parseInt(document.getElementById("buttonCentre1").style.left)-event.x);
var heilenBu=Math.abs(parseInt(document.getElementById("buttonCentre1").style.top)-event.y);
//document.getElementById("div3").innerHTML=Math.abs(parseInt(document.getElementById("buttonCentre1").style.left)-event.x)+"___"+Math.abs(parseInt(document.getElementById("buttonCentre1").style.top)-event.y);;

if(widlenBu<120&&heilenBu<30)
{
document.getElementById("buttonCentre1").style.left=event.x;
document.getElementById("buttonCentre1").style.top=event.y;
}


var widlenBu2=Math.abs(parseInt(document.getElementById("buttonCentre2").style.left)-event.x);
var heilenBu2=Math.abs(parseInt(document.getElementById("buttonCentre2").style.top)-event.y);
if(widlenBu2<120&&heilenBu2<30)
{
document.getElementById("buttonCentre2").style.left=event.x;
document.getElementById("buttonCentre2").style.top=event.y;
}
if(Math.abs(widlenBu-widlenBu2)<10&&Math.abs(heilenBu-heilenBu2)<10)
{
 document.getElementById("buttonCentre1").style.left=100;
 document.getElementById("buttonCentre1").style.top=600;
 document.getElementById("buttonCentre2").style.left=300;
 document.getElementById("buttonCentre2").style.top=600;
}

return false;
}

function MouseDown3(){
//document.getElementById("div2").innerHTML="";
document.onmousemove = null;
}

function stopClock(){
if(cotClo<0)return false;
else{ window.clearInterval(ClockId);cotClo--;}
}

function startClock(){
if(cotClo>0) return false;
else {
      ClockId=window.setInterval(changeCheck,1000);cotClo++;
    }
}


</script>

<div id="div"></div>
<div id="div2"></div>
<div id="div3"></div>

</body>


</html>