简易抽奖效果

最新推荐文章于 2025-04-01 14:40:57 发布

HAI6545

最新推荐文章于 2025-04-01 14:40:57 发布

阅读量302

点赞数 1

分类专栏： JavaScript案例文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/HAI6545/article/details/122546339

版权

JavaScript案例专栏收录该内容

105 篇文章

订阅专栏

本文介绍如何利用CSS3的transform和transition属性创建一个简单的抽奖转盘效果，通过旋转和停止来模拟抽奖过程，同时探讨HTML布局和样式控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #j {
            width: 340px;
            height: 40px;
            border: 1px solid #000;
            position: absolute;
            top: 50px;
            left: 50%;
            line-height: 40px;
            transform: translateX(-50%);
            color: red
        }

        div {
            width: 340px;
            height: 340px;
            position: absolute;
            top: 110px;
            left: 50%;
            transform: translateX(-50%)
        }

        div>span {
            display: block;
            width: 100px;
            height: 100px;
            border: 1px solid #222;
            border-radius: 2px;
            background: #ccc;
            text-align: center;
            line-height: 100px;
        }

        div>span:nth-child(1) {
            position: absolute;
            left: 0;
            top: 0;
        }

        div>span:nth-child(2) {
            position: absolute;
            left: 120px;
            top: 0;
        }

        div>span:nth-child(3) {
            position: absolute;
            left: 240px;
            top: 0;
        }

        div>span:nth-child(4) {
            position: absolute;
            left: 240px;
            top: 120px;
        }

        div>span:nth-child(5) {
            position: absolute;
            left: 240px;
            top: 240px;
        }

        div>span:nth-child(6) {
            position: absolute;
            left: 120px;
            top: 240px;
        }

        div>span:nth-child(7) {
            position: absolute;
            left: 0;
            top: 240px;
        }

        div>span:nth-child(8) {
            position: absolute;
            left: 0;
            top: 120px;
        }
        div>span:nth-child(9) {
            position: absolute;
            left: 120px;
            top: 120px;
            background: orange;
            cursor: pointer;
        }

        div .active {
            background: rgb(0, 255, 149)
        }
    </style>
</head>

<body>
    <p id="j"></p>
    <div>
        <span>手机</span>
        <span>平板</span>
        <span>电磁炉</span>
        <span>洗衣机</span>
        <span>吹风机</span>
        <span>电脑</span>
        <span>冰箱</span>
        <span>电视</span>
        <span>开始</span>
    </div>
    <script>
        function Chou() {
            //添加属性
            this.p = document.querySelector('#j')
            this.spans = document.querySelectorAll('div>span')
            this.start()
            this.timer = null
            this.k = true
        }
        //点击开始的方法
        Chou.prototype.start = function () {
            //给开始绑定点击事件
            this.spans[8].onclick = () => {
                //清除上一次结果      
                for (let i = 0; i < this.spans.length; i++) {
                    //清除盒子选中状态           
                    this.spans[0].classList.add('active')
                    this.spans[i].classList.remove('active')
                }
                //清除中奖内容
                this.p.textContent = ''
                //点击让鼠标变成十字
                this.spans[8].style.cursor = 'crosshair'
                // 判断开关的状态
                if (!this.k) {
                    return false
                }
                //点击让开关关闭
                this.k = false
                //奖品序号
                let num = -1
                //抽奖转动的次数
                let times = this.random(20, 45)
                //当前转动次数
                let time = 0
                //设置定时器
              this.timer = setInterval(() => {
                    this.spans[8].onclick = null //事件解绑
                    num++
                    time++
                    //限制奖品序号  添加移出类名
                    if (num > 7) {
                        num = 0
                        this.spans[0].classList.add('active')
                        this.spans[7].classList.remove('active')
                    } else if (num == 0) {
                        this.spans[num].classList.add('active')
                        this.spans[7].classList.remove('active')
                    } else {       
                        this.spans[num].classList.add('active')
                        this.spans[num - 1].classList.remove('active')
                    }
                    //判断抽奖停止转动的次数
                    if (time > times) {
                        //清除定时器
                        clearInterval(this.timer)
                        //把开关打开
                        this.k = true
                        //设置中奖内容
                        this.p.textContent = `恭喜你抽中了${this.spans[num].textContent}！！！`
                        //把鼠标变回手性
                        this.spans[8].style.cursor='pointer'   
                    }    
                }, 100)
            }
        }             
        //随机数的方法
        Chou.prototype.random = function (a, b) {
            let max = Math.max(a, b)
            let min = Math.min(a, b)
            return parseInt(Math.random() * (max - min + 1) + min)
        }
        var chou = new Chou()
    </script>
</body>

</html>