js实现大风车旋转
1. 点击开始风车开始旋转
2. 点击反转，风车进行逆时针旋转
3. 点击转一圈，则只会顺时针转一圈，输入转的圈数，则转指定圈数
4. 点击停止，风车停止转动
效果实现：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大风车呀转悠悠</title>
<style>
.fc{
animation:wm 1s infinite linear;
}
@keyframes wm {
from {
transform:rotate(0deg);
}
to {
transform:rotate(-360deg);
}
}
.reverse{
animation:rer 1s infinite linear;
}
@keyframes rer {
from {
transform:rotate(-360deg);
}
to {
transform:rotate(0deg);
}
}
</style>
</head>
<body>
<div>
<h3>大风车呀转悠悠</h3>
<img src="img/logo.png" class="a" alt="" id="img1">
<hr>
<input type="button" value="开始" onclick="start1()">
<input type="button" value="停止" onclick="stop1()">
<input type="button" value="反转" onclick="reverse()">
<input type="button" value="转1圈" onclick="circle(1)">
转<input type="text" size="1" value="" onblur="circle(this.value)">圈
</div>
</body>
<script>
//转起来
function start1() {
img1.className='fc'
}
//停下来
function stop1() {
img1.className=''
}
function reverse() {
img1.className='reverse'
}
function circle(n) {
let circle1 = document.getElementById("img1");
circle1.className='fc'
a=setTimeout(function (){
stop1()
},1000*n)
}
</script>
</html>
很好玩哟，你确定不来试试吗？