JS控制层作圆周运动的方法

本文实例讲述了JS控制层作圆周运动的方法。分享给大家供大家参考，具体如下：

<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>圆周运动</title><script type = "text/javascript"> window.onload = function（）{var ctrlBtn = $id（"ctrl"）;var isMove = true;oM = null;ctrlBtn.onclick = function（）{if（isMove）{moveByCircle（）;}else{clearInterval（oM）;}isMove = ！isMove;} } function moveByCircle（）{var bacL = parseInt（$id（"clockBac"）.style.left）;var bacT = parseInt（$id（"clockBac"）.style.top）;var bacW = parseInt（$id（"clockBac"）.style.width）;var bacH = parseInt（$id（"clockBac"）.style.height）;var initL = bacL+bacW/2;var initT = bacT+bacH/2;var step = 0;var r = 65;$id（"tt"）.style.left = initL+"px";$id（"tt"）.style.top = initT+"px";var l = parseInt（$id（"tt"）.style.left）;var t = 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;var d = new Date（）;var hh = d.getHours（）;var mm = d.getMinutes（）;var ss = d.getSeconds（）;$id（"ctrl"）.value = hh+":"+mm+":"+ss;}, 1000）; } function $id（id）{return document.getElementById（id）; }</script></head><body><div id = "tt" style ="width:10px;height:10px;background:red;position:absolute;top:105px;left:130px;"></div><input type = "button" id = "ctrl" style = "width:100px;position:absolute;"/><img src = "../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程序设计有所帮助。