大转盘抽奖

最新推荐文章于 2024-08-09 07:51:54 发布

hy3528

最新推荐文章于 2024-08-09 07:51:54 发布

阅读量123

点赞数

分类专栏： html CSS

本文链接：https://blog.csdn.net/hy3528/article/details/108961560

版权

html 同时被 2 个专栏收录

73 篇文章 1 订阅

订阅专栏

CSS

11 篇文章 0 订阅

订阅专栏

这是一个使用Vue.js编写的不依赖插件的大转盘抽奖模板，包含HTML、CSS和JavaScript代码。用户点击开始按钮后，转盘将进行随机旋转并最终停在一个奖品上，3秒后显示中奖提示。模板中转盘的旋转效果通过CSS3的transform属性实现，并使用了随机数来决定停止位置。

摘要由CSDN通过智能技术生成

vue 大转盘模板

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        position: relative;
        width: 400px;
        height: 400px;
    }

    .main {
        position: absolute;
        width: 13%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

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

    .start {
        transition: all 3s ease-in-out;
    }

    .reset {
        transition: none;
        transform: none;
    }
</style>

<body>
    <div class="box">
        <img :class="isSpin ? 'reset' : 'start'" :style="{transform: !isSpin ? `rotate(-${rotate}deg)` :'none'}"
            src="http://sucai.suoluomei.cn/sucai_zs/images/20190926090636-1.png" alt="" />
        <div class="main" @click="startDraw()">
            <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190924162756-kaishiaa.png" alt="" />
        </div>
    </div>
</body>
<script src="https://lib.baomitu.com/vue/2.6.9/vue.js"></script>
<script>
    new Vue({
        el: '.box',
        data() {
            return {
                isSpin: true,
                rotate: 0
            }
        },
        methods: {
            startDraw() {
                if (this.isSpin) {
                    this.isSpin = false
                    this.spinPrize()
                } else {
                    alert("正在抽奖，请勿重复点击")
                }
            },

            spinPrize() {
                var math = Math.floor(Math.random() * 10);
                var active = math //选中的奖品地址是需要后台传给你
                var total = 14  //奖品的总个数
                var lottery = (360 / total) * active - (360 / total) / 2 //计算定位到指定商品在商品的中间
                var rotate = lottery + 1800 //总旋转度数
                this.rotate = rotate
                setTimeout(() => {
                    alert("中奖")
                    this.isSpin = true
                }, 3000)
            }
        }
    })
</script>

</html>

<!DOCTYPE html>
<html lang="en">
<!-- 不依赖插件的大转盘抽奖 -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        position: relative;
        width: 400px;
        height: 400px;
    }

    .main {
        position: absolute;
        width: 13%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

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

    .start {
        transition: all 3s ease-in-out;
    }

    .reset {
        transition: none;
        transform: none;
    }
</style>

<body>
    <div class="box">
        <img :class="isSpin ? 'reset' : 'start'" :style="{transform: !isSpin ? `rotate(-${rotate}deg)` :'none'}"
            src="http://sucai.suoluomei.cn/sucai_zs/images/20190926090636-1.png" alt="" />
        <div class="main" @click="startDraw()">
            <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190924162756-kaishiaa.png" alt="" />
        </div>
    </div>
</body>
<script src="https://lib.baomitu.com/vue/2.6.9/vue.js"></script>
<script>
    new Vue({
        el: '.box',
        data() {
            return {
                isSpin: true,
                rotate: 0
            }
        },
        methods: {
            startDraw() {
                if (this.isSpin) {
                    this.isSpin = false
                    this.spinPrize()
                } else {
                    alert("正在抽奖，请勿重复点击")
                }
            },

            spinPrize() {
                var math = Math.floor(Math.random() * 10);
                var active = math //选中的奖品地址是需要后台传给你
                var total = 14  //奖品的总个数
                var lottery = (360 / total) * active - (360 / total) / 2 //计算定位到指定商品在商品的中间
                var rotate = lottery + 1800 //总旋转度数
                this.rotate = rotate
                setTimeout(() => {
                    alert("中奖")
                    this.isSpin = true
                }, 3000)
            }
        }
    })
</script>

</html>