<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover">
  <title>event modules</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="lv1 x">
    <div class="lv2 x">
      <div class="lv3 x">
        <div class="lv4 x">
          <div class="lv5 x">
            <div class="lv6 x">
              <div class="lv7 x"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="main.js"></script>
</body>

</html>
* {
  box-sizing: border-box;
}


div[class^="lv"]:not([class=".lv7"]) {
  border: 1px solid;
  border-radius: 50%;
  display: inline-flex;
  padding: 10px;
}

.lv1 {
  background-color: purple;
}

.lv2 {
  background-color: blue;
}

.lv3 {
  background-color: cyan;
}

.lv4 {
  background-color: green;
}

.lv5 {
  background-color: yellow;
}

.lv6 {
  background-color: orange;
}

.lv7 {
  width: 50px;
  height: 50px;
  border: 1px solid;
  border-radius: 50%;
  background-color: red;
  display: inline-flex;
}

.x {
  background-color: transparent;
}
const $ = document.querySelector.bind(document)
let lvn = [lv1, lv2, lv3, lv4, lv5, lv6, lv7] = [$('.lv1'), $('.lv2'), $('.lv3'), $('.lv4'), $('.lv5'), $('.lv6'), $('.lv7')]

const removeX = (e) => {
  const tempEvent = e.currentTarget
  setTimeout(() => {
    tempEvent.classList.remove('x');
  }, n * 100)
  n += 1
}
const addX = (e) => {
  const tempEvent = e.currentTarget
  setTimeout(() => {
    tempEvent.classList.add('x');
  }, n * 150)
  n += 1
}

let n = 1
for (let i = 0; i < lvn.length; i++) {
  const lvnEle = lvn[i];
  lvnEle.addEventListener('click', removeX, true)
  lvnEle.addEventListener('click', addX, false)
  // console.log(n, i)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.