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


Posted in Javascript onJune 20, 2016

本文实例讲述了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 相关文章推荐
js打印纸函数代码(递归)
Jun 18 Javascript
基于jquery的滚动新闻列表
Jun 19 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
js中键盘事件实例简析
Jan 10 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 #Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 #Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 #Javascript
jQuery插件 Jqplot图表实例
Jun 18 #Javascript
jqPlot jQuery绘图插件的使用
Jun 18 #Javascript
jQuery获取radio选中项的值实例
Jun 18 #Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 #Javascript
You might like
一个简单的域名注册情况查询程序
2006/10/09 PHP
如何使用脚本模仿登陆过程
2006/11/22 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
JS的反射问题
2010/04/07 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
js获取域名的方法
2015/01/27 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python使用socket远程连接错误处理方法
2015/04/29 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
Python csv模块使用方法代码实例
2019/08/29 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
如何用Python绘制3D柱形图
2020/09/16 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
八月一日观后感
2015/06/10 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis