js+css实现旋转的风车带“开始”和“暂停”按钮实现开始和暂停

本文链接：https://blog.csdn.net/linrui12345/article/details/79039431

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xuanzhuang</title>
<style type="text/css">
img{
width: 400px;
height: 500px;
transform: rotate(0deg);
}
</style>
</head>
<body>
<img src="./风车.jpg" >
<input type="button" value="开始" name="kaishi" οnclick="kaishi();">
<input type="button" value="暂停" name="zanting" οnclick="zanting();">
</body>
<script type="text/javascript">
var num = 0;
var zt = 0;
var flagzt = 0;
var flagks = 0;
var img = document.getElementsByTagName('img')[0];
function change(){
if (num>=5) {
img.style.transform = "rotate("+num+"deg)";
num = num + 5;
}
}
function kaishi(){
if(flagks == 0){//从别的状态（页面开始或者暂停）而来
if (num == 0 && flagzt == 0) {//flagzt等于0是从页面载入状态进入旋转
num = 5;
}else{
num = zt;//把当前暂停时角度给num从num在开始旋转
flagzt=0;//证明当前不是暂停状态了
}
flagks=num;
}
//console.log(zt);
}
function zanting(){
if(flagzt!=0){//flagzt不等于0证明当前是暂停状态，再点击暂停还是设置当前状态
img.style.transform = "rotate("+zt+"deg)";
}else{
zt = num;
flagzt = num;
num = 0;
img.style.transform = "rotate("+zt+"deg)";
}
flagks=0;
}
setInterval('change()',100);
</script>
</html>