前端小练习：抽奖转盘

最新推荐文章于 2024-04-05 17:20:59 发布

illion-78

最新推荐文章于 2024-04-05 17:20:59 发布

阅读量627

点赞数

分类专栏：前端（demo）文章标签： javascript

本文链接：https://blog.csdn.net/weixin_39233022/article/details/105255210

版权

前端（demo）专栏收录该内容

10 篇文章 0 订阅

订阅专栏

抽奖小转盘

效果图：
在这里插入图片描述
HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lottery</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="wapper">
        <div class="pan"><img src="./img/pan.png" alt=""></div>
        <div class="btn"><img src="./img/btn.png" alt=""></div>
    </div>
    
    <script src="./js/index.js"></script>
</body>

</html>

css代码：

* {
    padding: 0;
    margin: 0;
}

.wapper {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 100px auto;
    border: 8px solid orange;
    border-radius: 50%;
}

.pan {
    width: 100%;
    height: 100%;
}

.pan img {
    width: 100%;
    height: 100%;
}

.btn {
    position: absolute;
    width: 130px;
    height: 130px;
    left: 50%;
    top: 50%;
    margin-left: -65px;
    margin-top: -65px;
}

.btn img {
    width: 100%;
    height: 100%;
    /* top: -50px; */
}

javascrip代码：



var btn = document.getElementsByClassName('btn')[0];
var bigWheel = document.getElementsByClassName('pan')[0];
var bool = true;
var num = 0;
// 按钮点击事件
btn.addEventListener('click', function() {
        if (bool) {
            var num = Math.floor(Math.random() * 360);
            tableRun(num);
            bool = false;
        }

    })
    // 重置
bigWheel.addEventListener('webkitTransitionEnd', function() {
        bool = true;
        bigWheel.style.transform = `rotate(${num}deg)`;
        bigWheel.style.transition = 'none';
        judgeFm(num);
    })
    // 转盘旋转的圈数
function tableRun(deg) {
    var mynum = deg + 8 * 360;
    bigWheel.style.transform = 'rotate(' + mynum + 'deg)';
    bigWheel.style.transition = 'all 4s'

}

function judgeFm(deg) {
    var str = '';

    if (deg > 0 && deg < 30 || deg > 180 && deg < 210) {
        // 六等奖
        str = "六等奖";

    } else if (deg > 30 && deg < 60 || deg > 210 && deg < 240) {
        // 五等奖
        str = "五等奖";

    } else if (deg > 60 && deg < 90 || deg > 240 && deg < 270) {
        // 四等奖
        str = "四等奖";

    } else if (deg > 90 && deg < 120 || deg > 270 && deg < 300) {
        // 三等奖
        str = "三等奖";
    } else if (deg > 120 && deg < 150 || deg > 300 && deg < 330) {
        // 二等奖
        str = "二等奖";
    } else if (deg > 150 && deg < 180 || deg > 330 && deg < 360) {
        // 一等奖
        str = "一等奖";
    }


    alert('恭喜你获得：' + str + '!');

    // alert('恭喜你获得：' + str + '!');
}

illion-78

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端小练习：抽奖转盘

抽奖小转盘效果图：HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...
复制链接

扫一扫