如何将点击事件添加到每个四分之一圈

Question

目标是在每个圆的四分之一处添加一个函数。

该圈子是通过以下方式生成的：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);
}

就像我在这里找到的：How to create circle with four quarters

我想在单击特定季度时执行函数QuarterClicked（）。

Answer 1

您可以像这样画圆：

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