JS控制层作圆周运动的方法
本文实例讲述了JS控制层作圆周运动的方法。分享给大家供大家参考，具体如下：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>圆周运动</title>
<scripttype="text/javascript">
window.onload=function(){
varctrlBtn=$id("ctrl");
varisMove=true;
oM=null;
ctrlBtn.onclick=function(){
if(isMove){
moveByCircle();
}else{
clearInterval(oM);
}
isMove=!isMove;
}
}
functionmoveByCircle(){
varbacL=parseInt($id("clockBac").style.left);
varbacT=parseInt($id("clockBac").style.top);
varbacW=parseInt($id("clockBac").style.width);
varbacH=parseInt($id("clockBac").style.height);
varinitL=bacL+bacW/2;
varinitT=bacT+bacH/2;
varstep=0;
varr=65;
$id("tt").style.left=initL+"px";
$id("tt").style.top=initT+"px";
varl=parseInt($id("tt").style.left);
vart=parseInt($id("tt").style.top);
oM=window.setInterval(function(){
if(step==360){
step=1;
}
$id("tt").style.left=(l+r*Math.sin(step))+"px";
$id("tt").style.top=(t-r*Math.cos(step))+"px";
step+=3.14/30;
vard=newDate();
varhh=d.getHours();
varmm=d.getMinutes();
varss=d.getSeconds();
$id("ctrl").value=hh+":"+mm+":"+ss;
},1000);
}
function$id(id){
returndocument.getElementById(id);
}
</script>
</head>
<body>
<divid="tt"style="width:10px;height:10px;background:red;position:absolute;top:105px;left:130px;"></div>
<inputtype="button"id="ctrl"style="width:100px;position:absolute;"/>
<imgsrc="../img/clock.jpg"id="clockBac"style="width:200px;height:200px;top:100px;left:100px;position:absolute;z-index:-999"/>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。