круг внутри круга, но разделенный не в том же самом Div (как игра в дартс) - PullRequest
Новая
       2

круг внутри круга, но разделенный не в том же самом Div (как игра в дартс)

0 голосов
/ 02 сентября 2018

Я делаю это:

Мне нужно отделить круг, я хочу нарисовать что-то похожее на игру в дартс, и мне нужно вычислить время, когда мышь все еще находится внутри круга.

Если вы можете помочь мне сделать это?

А как сделать это отзывчивым с мобильного?

А кто-нибудь может так построить с андроидом или реагировать?

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';
    }

1 Ответ

0 голосов
/ 03 сентября 2018

Вы можете использовать Date.now () два раза (при наведении курсора и наведении мыши) и вычислять разницу.

Получите разницу во времени между двумя датами в секундах

Edit: Вот код Он отзывчив и имеет идеально центрированные круги. css transform CSS единиц (длина)

Наслаждайтесь вашим кодом! 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...