画个会加速的小风车

画个会加速的小风车

前言

我们之前曾经完成了一个小风车，但是呢，过于单调了，我打算给它加一个棍子，再加一个能够控制转动速度的按钮，就很圆满了

思绪

棍子能够运用一个div元素，经过定位把他定位到风车中间，然后把两头变圆，这样一个风车棍子就完成了
控制速度实质上是控制animation的duration属性，动画完成时间越短，速度越快

完成

如今dom中添加一个棍子的div
rod就代表我们风车的棍子 首先把棍子定位到风车中间，然后把头部变圆

rod {
    position: absolute;
    width: 10px;
    height: 200px;
    background-color: #a3f93b;
    left: 50%;
    top: 100px;
    transform: translate(-5px);
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
}

复制代码
此时的棍子曾经在风车中间了

棍子曾经完成，下一步我们来添加两个按钮，绑定click事情，控制风车的转动速度 按钮采用flex规划，散布在分车棍子的两边
css中

.btn {
    display: flex;
    justify-content: space-around;
    margin-top: 150px;
}
button {
    width: 50px;
    border: none;
    background-color: aqua;
    border-radius: 15px;
}

复制代码
给btn添加事情

定义一个timer来控制动画完成的时间 经过操作dom的style的animationDuration属性，来控制

const btns = document.querySelectorAll("button")
const car = document.querySelector("ul")
let timer = 3
btns[0].addEventListener("click", () => {
    car.style.animationDuration = (timer - 0.5) + "s"
    timer -= 0.5
})
btns[1].addEventListener("click", () => {
    car.style.animationDuration = (timer + 0.5) + "s"
    timer += 0.5
})

复制代码
此时我们曾经能够自在控制风车的速度了，而且没美观了很多，但是当timer = 0时会中止，我们能够判别一下能否为0，假如是，那么就让他变成0.1好了

btns[0].addEventListener("click", () => {
    timer -= 0.5
    if (timer === 0) {
        timer = 0.1
    }
    car.style.animationDuration = (timer) + "s"
})

复制代码
这样当timer为0，就会是0.1

结束