前端小风车 HTML，CSS，Javascript

最新推荐文章于 2024-04-02 22:52:40 发布

三里清风33

最新推荐文章于 2024-04-02 22:52:40 发布

阅读量723

点赞数 2

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/qq_47443354/article/details/121879089

版权

#小风车代码

<!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>

在这里插入图片描述

点击进入操作小风车界面

三里清风33

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端小风车 HTML，CSS，Javascript

#小风车代码<!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;
复制链接

扫一扫