Как добавить событие клика в каждую четверть круга - PullRequest
Новая
       6

Как добавить событие клика в каждую четверть круга

0 голосов
/ 29 марта 2020

Цель состоит в том, чтобы добавить функцию к каждой четверти круга.

Круг был сгенерирован следующим образом: HTML: 

<div class="circle">

CSS: 

.circle {
    margin: 1em auto;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border-width: 20px;
    border-style: solid;
    border-color: red green blue yellow;
    transform: rotate(45deg);
}

как я нашел здесь: Как создать круг с четырьмя четвертями

Я хочу выполнить функцию quarClicked () при нажатии на указанную c четверть.

1 Ответ

1 голос
/ 29 марта 2020

Вы можете нарисовать свой круг как: 

<div class="circle">
  <div id="blue" class="quarter" onclick="quarterClicked()"></div>
  <div id="green" class="quarter" onclick="q2()"></div>
  <div id="red" class="quarter" onclick="q3()"></div>
  <div id="black" class="quarter" onclick="q4()"></div>
</div>

css: 

.circle {
  display: block;
  padding: 0;
  width: 200px;
  height: 200px;
  border: 1px;
  border-radius: 50%;
  overflow: hidden;
}
.quarter {
  display: inline-block;
  float: left;
  margin: 0;
  padding: 0;
  width: 100px;
  height: 100px;
}

#blue {
  background-color: blue;
}

#green {
  background-color: green;
}

#red {
  background-color: red;
}

#black {
  background-color: black;
}

javaScript: 

quarterClicked(){
    //your code
}
...