简单的CSS动画加JS实现转盘

最新推荐文章于 2024-07-29 10:24:39 发布

hkhv

最新推荐文章于 2024-07-29 10:24:39 发布

阅读量981

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/hkh746392783/article/details/75670543

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	.circle {
		background:#ccc;
		position: relative;
		height: 350px;
		width: 	350px;
		display:inline-block;
		border-radius: 350px;
		text-align: center;
	}
	.play {
		animation: mymove 3s forwards ease-in-out;			//3s动画
	}
	#btn {
		display:inline-block;
		margin-top: 125px;
		margin-left: -225px;
		position: absolute;
		height: 100px;
		width:100px;
		border-radius:50px;
		background-color:gray;
		line-height: 100px;
		text-align:center;
	}
	#btn img {
		display:inline-block;
		position: absolute;
		height: 80px;
		top:-40px;
		left: 43px;
	}
</style>
<style id="animation">
	/*动态添加动画*/
</style>   
<body>
	<div class="circle">
		演示文字，转动
	</div>
	<div id="btn">
		<img src="arrow.png" alt="">
		开始
	</div>
	<script>

		var start = document.getElementById('btn');			//开始按钮
		var circle = document.getElementsByClassName('circle')[0];			//转盘
		var flag = 0;			//判断有没有点击过按钮
		var animation = document.getElementById('animation');
		var sta = 0;   //开始的角度
		start.addEventListener("click",function() {
			if(flag == 1) {
				return ;
			}
			circle.className = "play circle";
			flag = 1;
			var rand = Math.floor(Math.random() * 1000 ); 		//1000随机数
			var res = 0;								//最后停留的角度，
			
			if(rand >=0 && rand < 5) {					//把圆分成了七分，自己看情况算角度
				res = 25;
			}
			if(rand >= 5 && rand < 10) {
				res = 75;
			}
			if(rand >= 10 && rand < 20) {
				res = 125;
			}
			if(rand >= 20 && rand < 70) {
				res = 175;
			}
			if(rand >= 70 && rand < 150) {
				res = 225;
			}
			if(rand >= 150 && rand < 300) {
				res = 275;
			}
			if(rand >= 300 && rand < 1000) {
				res = 325;
			}
			console.log(res);
			res += 1800;		//转5圈
			animation.innerHTML = "@keyframes mymove{0% {transform:rotate("+sta+"deg)} 100%{transform:rotate(" + res + "deg)}}";
			sta = res - 1800;
			setTimeout(function() {
				flag = 0;
				circle.className = "circle";
				circle.style.transform = "rotate("+sta+"deg)";			//停留在最后的位置
			},3000);			//初始化，，根据自己的动画时间，设置
			
		})
	</script>
</body>
</html>