download:图灵JAVA互联网架构师五期 棍子已经完成,下一步我们来添加两个按钮,绑定click事件,控制风车的转动速度 按钮采用flex布局,分布在分车棍子的两边 先看html
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
作者:转行成功就改名 链接:https://juejin.cn/post/7101216895419809799 来源:稀土掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。