××校招：前端线上笔试题--页面中的一个元素（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码'),('大号','中号') ...
随机推荐
- linux_shell_获取日期相关
shell里直接调用系统变量 获取当天日期`date +%Y%m%d` 获取昨天日期`date -d yesterday +%Y%m%d` 获取前天日期`date -d -2day +%Y%m%d` ...
- linux_coom _ Linux文件比较，文本文件的交集、差集与求差
交集和差集操作在集合论相关的数学课上经常用到,不过,在Linux下 对文本进行类似的操作在某些情况下也很有用. comm命令 comm命令可以用于两个文件之间的 比较,它有一些选项可以用来调整输出,以 ...
- 小程序大智慧，sqlserver 注释提取工具
原文:小程序大智慧,sqlserver 注释提取工具 开篇背景 我习惯在写表的创建脚本时将注释直接写在脚本里,比如 /*账套*/ CREATE TABLE [dbo].[AccountingBook] ...
- 朴素UNIX之-打开历史
它可以毫不夸张地说,,UNIX模型是现代操作系统的原型.无论是真实的UNIX让我们大系列AIX,Solaris,HP-UX,FreeBSD,NetBSD,...或类别UNIX实例Linux...或基于 ...
- BIZTALK项目中WEB引用WEBSERVICES服务时候报错
近期工作中须要完毕通过BIZTALK完毕调用WEBLOGIC公布的WebServices服务,环境搭建好后,打开VS开发工具新建一个BIZTALK项目,加入WEB引用将对方公布的地址拷贝上去,能够正常 ...
- 【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）
原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...
- 突破IP限制动态替换代理ip。
须要导入的两个jar包 实现的javabean <span style="font-size:18px;">package com.jx.po; public clas ...
- SSAS系列——【07】多维数据（查询Cube）
原文:SSAS系列——[07]多维数据(查询Cube) 1.什么是MDX? MDX叫做"多维表达式",是一种查询语言,是一种和SQL类似的查询语言,它基于 XML for Anal ...
- （转）迎接 Entity Framework 7
对实体框架的下一版本的开发正在顺利进行中.我在 2014 年度北美 TechEd 上第一次了解 EF 团队的工作内容,当时项目经理 Rowan Miller 讨论了 Entity Framework ...
- POJ 2724 Purifying Machine（最大独立集）
POJ 2724 Purifying Machine 题目链接 题意:这题题意有点没看懂.看了别人的题解, 给出m串长度为n的01串. 有些串中可能包括,这种串能够表示两个串,为1 和为0. 反复的算 ...