××校招：前端线上笔试题--页面中的一个元素（10px*10px）围绕坐标(200, 300) 做圆周运动
<html>
<head>
<style type="text/css">
.item{
width:20px;
height:20px;
border-radius:10px;
background: blue;
position: absolute;
}/*border-radius圆角半径*/
#point{
left:95px;
top:295px;
}
#centre{
left:195px;
top:295px;
}
.circle{
width:200px;
height:200px;
border:1px red solid;
border-radius:100px;
position: absolute;
top:200px;
left:100px;
}
</style>
</head> <body>
<div id="point" class="item"><big>   RUN!Lamborghini</big></div>
<div id="centre" class="item"></div>
<div class="circle"></div>
</body> <script type="text/javascript">
var r = 100; //半径
var a = 0; //角度
var obj = document.getElementById('point');//js必须写在<body>后面，否则obj=null；
// 基点坐标为200,300
setInterval(function(){
obj.style.left = (190 - Math.cos(a) * r) + 'px';/*style 很重要*/
obj.style.top = (290 - Math.sin(a) * r) + 'px';
a += 0.1; //角度随时增大，产生绕圈的效果
}, 50);//every 50/1000s run function() one time;
</script> </html>
效果如下：
××校招：前端线上笔试题--页面中的一个元素（10px*10px）围绕坐标(200, 300) 做圆周运动的更多相关文章
- 请让页面中的一个元素（10px*10px）围绕坐标(200, 300) 做圆周运动
<!DOCTYPE html> <html> <head> <title>Making things move</title> <me ...
- 获取页面中任意一个元素距离body的偏移量
//offSet:等同于jQuery中的offSet方法,获取页面中任意一个元素距离body的偏移量function offSet(curEle) { var totalLeft = null; va ...
- js在页面中添加一个元素 —— 添加弹幕
参考地址 [往下拉 —— 使用HTML DOM appendChild() 方法实现元素的添加 ] 一.创建 HTML <div class="right_liuyan"&g ...
- (一)在HTML页面中实现一个简单的Tab
在HTML页面中实现一个简单的Tab 为了充分利用有限的HTML页面空间,经常会采用类似与TabControl的效果通过切换来显示更多的内容.本文将采用一种最为简单的方法来实现类似如Tab页切换的效果 ...
- 分别应用include指令和include动作标识在一个jsp页面中包含一个文件。
分别应用include指令和include动作标识在一个jsp页面中包含一个文件. hello.jsp <%@ page language="java" import=&qu ...
- 在某网站的登录页面登录时如果选择“记住用户名”,登录成功后会跳转到一个中间层（页面代码将登录的用户名和密码存在cookie）,中间页面中存在一个超链接，单击超链接可以链接到第三个页面查看信息。若选择“
Response实现登录并记录用户名和密码信息 在某网站的登录页面登录时如果选择"记住用户名",登录成功后会跳转到一个中间层(页面代码将登录的用户名和密码存在cookie),中间页 ...
- jquery[siblings]取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合,用于筛选同辈元素的表达式 $("#pageList").click(function(){ $(this).pa ...
- jquery中修改一个元素的值或内容
jquery中修改一个元素的值或内容,比如数值增加可以使用这个方法取得原值并+1 $this.text(function(i,ot){return Number(ot)+1;});
- PHP的排列组合问题 分别从每一个集合中取出一个元素进行组合，问有多少种组合？
首先说明这是一个数学的排列组合问题C(m,n) = m!/(n!*(m-n)!) 比如:有集合('粉色','红色','蓝色','黑色'),('38码','39码','40码'),('大号','中号') ...
随机推荐
- nodejs爬虫系统
其中express是服务端框架 request相当于前端的ajax请求 cheerio相当于jq 开始 首先我们先新建一个 crawler目录 执行 npm install express -g 命令 ...
- crawler_UE使用技巧
UE使用技巧 Tip 1: 如何去掉所编辑文本中包含特定字符串的行? 这则技巧是在UltraEdit的帮助文件里提到．CTRL+R 调出来替换(Replace)窗口,选中"使用正则表达式&q ...
- Objective-C马路成魔【14-关键C语言功能】
郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠,支持郝萌主.捐赠数额任意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 这里介绍一 ...
- linux_apt-get 使用详解
安装应用从互联网上下载查询时 用到,今天安装个 mysql 简化流程如下: apt-cache search mysql-server sudo apt-get install mysql-serve ...
- 手游开发者大会交流OGEngine新版本发布
由OGEngine第二个手游开发者交流会举办的圆桌会议在深圳市高新技术园区举行.发布会不仅吸引了手游开发商,供应商也纷纷在国外支付,在国内手游和国外出版商参加. 围绕三个主题会议讨论和交流.每个主题: ...
- CSharp设计模式读书笔记（17）：迭代器模式(学习难度：★★★☆☆，使用频率：★★★★★)
迭代器模式(Iterator Pattern):提供一种方法来访问聚合对象,而不用暴露这个对象的内部表示,其别名为游标(Cursor). 模式角色与结构: 实现代码: using System; us ...
- [VirtualBox] - Install Oracle Linux 7 on Oracle VirtualBox
I'll start coding with JEE soon. Product environment adopts Oracle + WebLogic in Linux, technology a ...
- linux下一个Oracle11g RAC建立（八）
linux下一个Oracle11g RAC建立(八) 七.安装oracle软件 直接在图形界面里安装oracle.在node1操作 在虚拟机界面中,直接切换到oracle用户下: [grid@no ...
- openfire修改服务器名称方法
1.登陆openfire管理页面,在主页面下方选择编辑属性,修改服务器名称为当前主机名称,点击保存属性,按页面提示重启服务器. 2.重启后,主页的服务器属性下的服务器名称出现一个叹号,鼠标放上去显示F ...
- 谈论quick-cocos2d-x和cocos2d-x lua了解差异
之前说,我把这个两个词区别.经过太长时间.当然,反击的麻烦.quick-cocos2d-x它提到quick,cocos2d-x lua姑且称为本地lua对. 我认为,首先与这两个小的朋友接触会跟着或多 ...