转盘游戏简单原理设计

html页面（包含js）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
    <div class="page">
        <div class="content">
        </div>
        <button>抽奖</button>
    </div>
</body>
<script>
    var page=document.getElementsByClassName('page')[0];
    var content=document.getElementsByClassName('content')[0];
    var button=document.getElementsByTagName('button')[0];
    var currentdeg=0;  //初始化角度
    var willdeg=360+Math.random()*10*30;  //最终定格的角度
    button.onclick=function(){   //点击事件
        content.style.transform="rotate("+willdeg+"deg)";
        var enddeg=content.style.transform.slice(7);  //这里enddeg获取的旋转角度其实就是willdeg，使用slice是练习获取未知的旋转角度
        enddeg=parseFloat(enddeg);

        setTimeout(function(){   //旋转完成后跳出奖励
            if(enddeg%360>0&&enddeg%360<=60){
                alert('一等奖');  //点击确定后才会执行下面的函数，即重新加载
                window.location.reload();   //这里可以不用reload（），将.conten的rotate设置为0即可
            }
            if(enddeg%360>60&&enddeg%360<=120){
                alert('二等奖');
                window.location.reload();
            }
            if(enddeg%360>120&&enddeg%360<=180){
                alert('三等奖');
                window.location.reload();
            }
            if(enddeg%360>180&&enddeg%360<=240){
                alert('四等奖');
                window.location.reload();
            }
            if(enddeg%360>240&&enddeg%360<=300){
                alert('五等奖');
                window.location.reload();
            }
            if(enddeg%360>300&&enddeg%360<=360){
                alert('六等奖');
                window.location.reload();
            }
        },5000);

    }
</script>
</html>

css页面：

.page{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: yellow;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.content{
    width: 100px;
    height: 100px;
    background: red;
    transition:all 5s ease-out;
}
button{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99;
}

效果图如下，点击抽奖按钮正方形将会旋转，可以将.content的内容换成想要的样式即可（如使用多个三角形，旋转不同角度达到绕满一圈的视觉效果，或者使用背景图片）。

转盘游戏简单原理设计

猜你喜欢