如何给每四分之一圈添加点击事件

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

就像我在这里发现的那样：

我想在单击特定季度时执行函数 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
}

如何给每四分之一圈添加点击事件

How to add click event to each quarter of circle

html

javascript

css

click