<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640,user-scalable=no,target-densitydpi = device-dpi " />
<style>
div{
text-align: center;
}
.cj{
z-index: 2;
-webkit-transform:translate3d(0,327px,0);
cursor: pointer;
position: relative;
}
</style>
</head>
<body>
<div class="cj">
<img src="https://img-blog.csdnimg.cn/2022010709590978871.png" alt="" />
</div>
<div class="jp">
<img src="https://img-blog.csdnimg.cn/2022010709590952422.png" alt="" />
</div>
</body>
<script>
var cj=document.querySelector(".cj"),
imgs=document.querySelector(".jp").getElementsByTagName("img")[0],
size=0,
Bstop=true,
timer=null;
function startMove(deg,txt){
clearInterval(timer);
timer=setInterval(function(){
Bstop=false;
if(size<9){
num+=20;
imgs.style.webkitTransform='rotate('+num+'deg)';
if(num>=360){
num=0;
size++;
}
}else if(size==9){
var speed=(deg-num)/20;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
num+=speed;
imgs.style.webkitTransform='rotate('+num+'deg)';
if(num==deg){
clearInterval(timer);
alert(txt);
Bstop=true;
}
}
},30)
}
cj.addEventListener("click",function(){
if(Bstop){
num=size=0;
imgs.style.webkitTransform='rotate(0deg)';
var reg=Math.ceil(Math.random()*7);
switch(reg){
case 1:
startMove(30,"靠,你居然可以免单4999!");
break;
case 2:
startMove(85,"免单50!");
break;
case 3:
startMove(135,"免单10!");
break;
case 4:
startMove(185,"免单5!");
break;
case 5:
startMove(235,"免服务费!");
break;
case 6:
startMove(285,"提高额度");
break;
case 7:
startMove(337,"不好意思.背时");
break;
}
}
})
</script>
</html>转载于:https://www.cnblogs.com/junxi/p/5228471.html