This article describes the method of JS control layer making circular motion. Share it for your reference, as follows:
<!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>Circular motion</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>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript traversal algorithms and techniques", and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.