limit_area_cirle
时间:2022-05-06
本文章向大家介绍limit_area_cirle,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0px;}
.div1{
border-radius: 60px;
width:100px;
height: 100px;
position: absolute;
background: burlywood;
top:10px;
line-height: 100px;
text-align: center;
font-size: 50px;
}
#warp{
width: 700px;
height: 700px;
background: chocolate;
}
</style>
</head>
<body>
<div id="warp">
<div class="div1">1</div>
<div class="div1">2</div>
<div class="div1">3</div>
<div class="div1">4</div>
<div class="div1">5</div>
<div class="div1">6</div>
<div class="div1">7</div>
<div class="div1">8</div>
<div class="div1">9</div>
<div class="div1">10</div>
<div class="div1">11</div>
<div class="div1">12</div>
</div>
</body>
</html>
<script>window.onload = function() {
var div1 = document.getElementsByClassName("div1")
//获取随机方向
start_position = function() {
var arr = [];
var x = Math.floor(Math.random() * 600);
var y = Math.floor(Math.random() * 600);
arr[0] = x;
arr[1] = y;
return arr;
}
//获取随机方向
start_direction = function() {
var arr = [];
var x = Math.floor(Math.random() * 600);
var y = Math.floor(Math.random() * 600);
var i, m;
if (x > 300) {
i = 1;
} else if (x <= 300) {
i = -1
}
if (y > 300) {
m = 1;
} else if (y <= 300) {
m = -1
}
arr[0] = i;
arr[1] = m;
return arr;
}
var run = function(obj, iX, iY, directX, directY) {
var iX = start_position()[0]
var iY = start_position()[1]
var directX = start_direction()[0];
var directY = start_direction()[1];
setInterval(function() {
iX = iX + directX;
iY = iY + directY;
obj.style.top = iY + "px";
obj.style.left = iX + "px";
if ((iX > 0 && iX < 600) && (iY < 0)) {
directY = 1
}
if ((iX > 0 && iX < 600) && (iY > 600)) {
directY = -1
}
if ((iY > 0 && iY < 600) && (iX > 600)) {
directX = -1
}
if ((iY > 0 && iY < 600) && (iX < 0)) {
directX = 1
}
var oneX = div1[0].offsetLeft + 50;
var oneY = div1[0].offsetTop + 50;
var twoX = div1[1].offsetLeft + 50;
var twoY = div1[1].offsetTop + 50;
var S = Math.floor(Math.sqrt(Math.pow((oneX - twoX), 2) + Math.pow((oneY - twoY), 2)));
}, 10)
}
run(div1[0]);
run(div1[1]);
run(div1[2]);
run(div1[3]);
run(div1[4]);
run(div1[5]);
// run(div1[6]);
// run(div1[7]);
// run(div1[8]);
// run(div1[9]);
// run(div1[10]);
// run(div1[11]);
}</script>
- 深度学习开源框架PaddlePaddle发布新版API,简化深度学习编程
- HTML5游戏引擎深度测评
- 使用NumPy介绍期望值,方差和协方差
- Cleaver快速制作网页PPT
- 【学术】马尔可夫链的详细介绍及其工作原理
- 想把自拍背景改成马尔代夫?手把手教你用深度学习分分钟做到
- 还记得谷歌之前发现的两颗行星吗?今天谷歌对此披露了重要技术细节
- Golang调用动态库so
- 30多条mysql数据库优化方法,千万级数据库记录查询轻松解决
- 【学术】谷歌AI课程附带的机器学习术语整理(超详细!)
- 真疯了!Java 9 还没会用,Java 10 就要来了!
- 关于 Go 中 Map 类型和 Slice 类型的传递
- Go语言与面向对象编程
- 【Golang语言社区】四川麻将随机初始化牌型结构
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- TypeScript里的.d.ts语法
- 宋宝华:当Linux内核遭遇鲨鱼—kernelshark
- 基于Pytorch的动态卷积复现
- SAP Spartacus的StorefrontConfig对象
- Linux内核虚拟内存管理之匿名映射缺页异常分析
- Elasticsearch:如何把 Elasticsearch 中的数据导出为 CSV 格式的文件
- Nginx 负载均衡配置(实战教程)
- 教懂你什么是 “ 流量劫持 ”
- SAP Spartacus中使用到的Angular ModuleWithProviders类型
- 架构设计 | 基于消息中间件,图解柔性事务一致性
- 结构与算法(02):队列和栈结构
- 用Gaussian寻找圆锥交叉点
- kubernetes用户安全管理模型简析
- Unity3D网络通讯(一)--Asp.Net Core WebApi创建发布注意事项
- Unity3D网络通讯(二)--UnityWebRequest及JsonUtility请求Http Restful