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 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
JavaScript实现图片放大预览效果
Nov 02 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
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
深入浅析Python字符编码
2015/11/12 Python
python搭建微信公众平台
2016/02/09 Python
基于Python的接口测试框架实例
2016/11/04 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
python写一个md5解密器示例
2018/02/23 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
优秀经理获奖感言
2014/03/04 职场文书
2014小学植树节活动总结
2014/03/10 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
小学生植树节活动总结
2014/07/04 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers