圈内圈，但不在同一div中分开（如飞镖游戏）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了圈内圈，但不在同一div中分开（如飞镖游戏）相关的知识，希望对你有一定的参考价值。
我这样做：
我需要分开圆圈，我想绘制像飞镖游戏一样的东西，我需要计算鼠标仍然在圆圈内的时间。
如果你能帮我这么做？
以及如何通过移动设备实现此响应？
任何人都可以使用android或者做出反应吗？
html：
<body>
<div id="outer-circle" onmouseover="stext()" onmouseout="rest1()">
<div id="inner-circle" onmouseover="htext()" onmouseout="stext()">
<div id="inner-circle1" onmouseover="htext()" onmouseout="stext()">
</div>
</div>
</div>
</body>
css：
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 500px;
width: 500px;
position: relative;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
#inner-circle {
position: absolute;
background: #a9aaab;
border-radius: 50%;
height: 300px;
width: 300px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -150px 0px 0px -150px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}
JS：
function stext() {
var x = document.getElementById("outer-circle");
x.style.background = 'blue';
}
function rest1() {
var x = document.getElementById("outer-circle");
x.style.background = '#385a94';
}
function htext() {
var x = document.getElementById("outer-circle");
var y = document.getElementById("inner-circle");
y.style.background = 'red';
x.style.background = 'blue';
}
答案
您可以两次使用Date.now()（鼠标悬停和鼠标移除）并计算差异。
Get time difference between two dates in seconds
编辑：这是代码。它具有响应性，并且具有完美居中的圆圈。 css transform css units (length)
享受你的代码！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>asd</title>
<style>
body {
margin: 0px;
}
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 100vmin;
width: 100vmin;
position: relative;
margin: auto;
}
#middle-circle {
position: absolute;
background: #a9aaab;
border-radius: 50%;
height: 60vmin; /*responsive */
width: 60vmin;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /*center the circle*/
}
#inner-circle {
position: absolute;
background: #f99;
border-radius: 50%;
height: 20vmin;
width: 20vmin;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="outer-circle" onmouseover="stext()" onmouseout="rest1()">
<div id="middle-circle" onmouseover="htext()" onmouseout="stext()"></div>
<div id="inner-circle" onmouseover="htext()" onmouseout="stext()"></div>
</div>
</body>
</html>
以上是关于圈内圈，但不在同一div中分开（如飞镖游戏）的主要内容，如果未能解决你的问题，请参考以下文章