javascript - 使用css更改交通灯通过添加javascript来控制计时器

Question

**我在网上找到了这段代码，它在css中控制了计时器。我如何用javascript控制它。我尝试了新的方法，但失败了。任何人都可以帮助我。我真正尝试的是通过单击按钮来控制javascript函数，一旦按钮被点击，它应该调用函数来根据计时器运行灯，我在早期使用 settimeout 和 setinterval 尝试过，但我可以做到。例如红色 5 秒，橙色 3 秒和绿色 10 秒，点击这个函数应该运行。

html {
  background: linear-gradient(#08f, #fff);
  padding: 40px;
  width: 170px;
  height: 100%;
  margin: 0 auto;
}

.protector {
  background: transparent;
  width: 180px;
  height: 0;
  position: absolute;
  top: 20px;
  left: -35px;
  border-right: solid 30px transparent;
  border-left: solid 30px transparent;
  border-top: solid 90px #111;
  border-radius: 10px;
  z-index: -1;
}

.protector:nth-child(2) {
  top: 140px;
}

.protector:nth-child(3) {
  top: 260px;
}

.trafficlight {
  background: #222;
  background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
  width: 170px;
  height: 400px;
  border-radius: 10px;
  position: relative;
  border: solid 5px #333;
}

.trafficlight:before {
  background: #222;
  background-image: radial-gradient(#444, #000);
  content: "";
  width: 170px;
  height: 150px;
  margin: 0 auto;
  position: absolute;
  top: -30px;
  margin-left: 0px;
  border-radius: 50%;
  z-index: -1;
}

.trafficlight:after {
  background: #222;
  background-image: linear-gradient(-0deg, #444, #ccc 30%, #000);
  content: "";
  width: 75px;
  height: 800px;
  margin-left: 50px;
  position: absolute;
  top: 150px;
  z-index: -1;
}

.red {
  background: red;
  background-image: radial-gradient(brown, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 35px;
  animation: 15s red infinite;
  box-shadow: 0 0 20px #111 inset, 0 0 10px red;
}

.yellow {
  background: yellow;
  background-image: radial-gradient(orange, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 145px;
  left: 35px;
  animation: 13s yellow infinite;
  box-shadow: 0 0 20px #111 inset, 0 0 10px yellow;
}

.green {
  background: green;
  background-image: radial-gradient(lime, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 270px;
  left: 35px;
  box-shadow: 0 0 20px #111 inset, 0 0 10px lime;
  animation: 13s green infinite;
}

@keyframes red {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: .1;
  }
  80% {
    opacity: .1;
  }
  100% {
    opacity: .1;
  }
}

@keyframes yellow {
  0% {
    opacity: .1;
  }
  20% {
    opacity: .1;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: .1;
  }
  60% {
    opacity: .1;
  }
  80% {
    opacity: .1;
  }
  100% {
    opacity: .1;
  }
}

@keyframes green {
  0% {
    opacity: .1;
  }
  20% {
    opacity: .1;
  }
  40% {
    opacity: .1;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  85% {
    opacity: .1;
  }
  90% {
    opacity: 1;
  }
  95% {
    opacity: .1;
  }
  100% {
    opacity: 1;
  }
}

<div class="trafficlight">
  <div class="protector"></div>
  <div class="protector"></div>
  <div class="protector"></div>
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
</div>

**

标签： javascripthtmlcss

Answer 1

$(".trafficlight").click(function(){
                         $(this).toggleClass("start")
                         })

html {
  background: linear-gradient(#08f, #fff);
  padding: 40px;
  width: 170px;
  height: 100%;
  margin: 0 auto;
}

.protector {
  background: transparent;
  width: 180px;
  height: 0;
  position: absolute;
  top: 20px;
  left: -35px;
  border-right: solid 30px transparent;
  border-left: solid 30px transparent;
  border-top: solid 90px #111;
  border-radius: 10px;
  z-index: -1;
}

.protector:nth-child(2) {
  top: 140px;
}

.protector:nth-child(3) {
  top: 260px;
}

.trafficlight {
  background: #222;
  background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
  width: 170px;
  height: 400px;
  border-radius: 10px;
  position: relative;
  border: solid 5px #333;
}

.trafficlight:before {
  background: #222;
  background-image: radial-gradient(#444, #000);
  content: "";
  width: 170px;
  height: 150px;
  margin: 0 auto;
  position: absolute;
  top: -30px;
  margin-left: 0px;
  border-radius: 50%;
  z-index: -1;
}

.trafficlight:after {
  background: #222;
  background-image: linear-gradient(-0deg, #444, #ccc 30%, #000);
  content: "";
  width: 75px;
  height: 800px;
  margin-left: 50px;
  position: absolute;
  top: 150px;
  z-index: -1;
}

.red {
  background: red;
  background-image: radial-gradient(brown, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity:0;
  position: absolute;
  top: 20px;
  left: 35px;

  box-shadow: 0 0 20px #111 inset, 0 0 10px red;
}
.start .red{
    animation: 15s red infinite;
}
.start .yellow {
    animation: 13s yellow infinite;
}
.start .green{
    animation: 13s green infinite;
}

.yellow {
  background: yellow;
  background-image: radial-gradient(orange, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  opacity:0;
  top: 145px;
  left: 35px;

  box-shadow: 0 0 20px #111 inset, 0 0 10px yellow;
}

.green {
  background: green;
  background-image: radial-gradient(lime, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 270px;
  opacity:0;
  left: 35px;
  box-shadow: 0 0 20px #111 inset, 0 0 10px lime;
}

@keyframes red {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: .1;
  }
  80% {
    opacity: .1;
  }
  100% {
    opacity: .1;
  }
}

@keyframes yellow {
  0% {
    opacity: .1;
  }
  20% {
    opacity: .1;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: .1;
  }
  60% {
    opacity: .1;
  }
  80% {
    opacity: .1;
  }
  100% {
    opacity: .1;
  }
}

@keyframes green {
  0% {
    opacity: .1;
  }
  20% {
    opacity: .1;
  }
  40% {
    opacity: .1;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  85% {
    opacity: .1;
  }
  90% {
    opacity: 1;
  }
  95% {
    opacity: .1;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="trafficlight">
  <div class="protector"></div>
  <div class="protector"></div>
  <div class="protector"></div>
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
</div>

我设法让它在点击 jquery 时工作！