当先锋百科网

首页 1 2 3 4 5 6 7

#小风车代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				margin:0 0 0 0; 
				background-image: url(img/caodi.png);
			}	
			img{
				width: 400px;
			}
			#i1{
				position: absolute;
				top: 250px;
				left: 380px;
			}
			#i2{
				position: absolute;
				top: 500px;
				left: 830px;
			}
			#i3{
				position: absolute;
				top: 420px;
				left: 1205px;
			}
			
		</style>
		
	</head>
	<body>
		<button type="button" onclick="start(80)">一档</button><button type="button" onclick="start(40)">二档</button>
		<button type="button" onclick="start(10)">三档</button><button type="button" onclick="stop()">暂停</button>
		<img src="./img/fengche.png" alt="" id="i1"/>
		<img src="./img/fengche.png" alt="" id="i2"/>
		<img src="./img/fengche.png" alt="" id="i3"/>
	<script type="text/javascript">
		var interval=null;
		function start(i){
			stop();
			interval=setInterval(method,i);
		}
		var k=0;
		function method(){
			 k+=10;
			 if(k>360){
				 k=0;
			 }
			var img=document.getElementsByTagName("img");
			for(var j=0;j<img.length;j++){
				img[j].style.transform=('rotate('+k+'deg)');
			}
		}
		function stop(){
			if(interval!=null){
			clearInterval(interval);
			}
		}
	</script>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
点击进入操作小风车界面