circle inside circle , but separated not in same div (like dart game)

Question

I do this :

I need to separate the circle , I want to draw something like dart game, and I need to calculate the time that mouse still inside the circle.

If you can help me to do this ?

And how to make this responsive with mobile ?

And can any one build like this with android or react ?

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

And why don't you use SVG for that? Just create a dart board in Illustrator (or something else) save it as a SVG format and past the code of that right into your HTML code. It's responsive by default and you could use it like standard HTML-tags — H. Pauwelyn, Sep 02 '18 at 19:46

Burhan Keten · Answer 1 · 2018-09-03T22:06:34.227

You can use Date.now() at two times (mouseover & mouseout) and calculate difference.

Get time difference between two dates in seconds

Edit: Here's the code. It's responsive and it haves perfectly centered circles. css transform css units (length)

Enjoy your code!

<!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>

thank you i found solution for time ,, but i need solution for circle — Rashed M Omar, Sep 03 '18 at 07:18

circle inside circle , but separated not in same div (like dart game)

1 Answers1