利用回调函数书写一个双色球抽奖效果

这段代码展示了如何利用JavaScript的Promise实现一个双色球抽奖的交互效果。当用户点击按钮时,清除原有列表,然后依次随机生成并添加六个数字到列表中,最后将最后一个数字设为蓝色背景,整个过程通过setTimeout模拟延迟,呈现出动画效果。
摘要由CSDN通过智能技术生成
<div id="box">
        <h2>双色球抽奖</h2>
        <ul>
        </ul>
        <button id="btn">点击开始随机抽取</button>
    </div>

 js代码

let box = document.getElementById('box')
    let ul = document.getElementsByTagName('ul')[0]
    let btn = document.getElementById('btn')
    let uli;
    var timer;
    
    let p1 = new Promise(function (resolve) {
        setTimeout(function () {
            resolve();//p1成功的回调
        }, 2000)
    })


    btn.onclick = function () {
        ul.innerHTML = ''
        clearTimeout(timer);
        p1
            .then(function () {
                uli = document.createElement('li')
                uli.innerHTML = rand(1, 34)
                ul.appendChild(uli)
                return new Promise(function (resolve) {
                    timer = setTimeout(function () {
                        resolve()//p2成功的回调
                    }, 2000)
                })
            })
            .then(function () {
                uli = document.createElement('li')
                uli.innerHTML = rand(1, 34)
                ul.appendChild(uli)
                return new Promise(function (resolve) {
                    timer = setTimeout(function () {
                        resolve()//p2成功的回调
                    }, 2000)
                })
            })
            .then(function () {
                uli = document.createElement('li')
                uli.innerHTML = rand(1, 34)
                ul.appendChild(uli)
                return new Promise(function (resolve) {
                    timer = setTimeout(function () {
                        resolve()//p2成功的回调
                    }, 2000)
                })
            })
            .then(function () {
                uli = document.createElement('li')
                uli.innerHTML = rand(1, 34)
                ul.appendChild(uli)
                return new Promise(function (resolve) {
                    timer = setTimeout(function () {
                        resolve()//p2成功的回调
                    }, 2000)
                })
            })
            .then(function () {
                uli = document.createElement('li')
                uli.innerHTML = rand(1, 34)
                ul.appendChild(uli)
                return new Promise(function (resolve) {
                    timer = setTimeout(function () {
                        resolve()//p2成功的回调
                    }, 2000)
                })
            })
            .then(function () {
                uli = document.createElement('li')
                uli.innerHTML = rand(1, 34)
                ul.appendChild(uli)
                return new Promise(function (resolve) {
                    timer = setTimeout(function () {
                        resolve()//p2成功的回调
                    }, 2000)
                })
            })
            .then(function () {
                uli = document.createElement('li')
                uli.innerHTML = rand(1, 34)
                ul.appendChild(uli)
                let ulis = document.querySelectorAll('li')
                if (ulis.length - 1 == 6) {
                    ulis[ulis.length - 1].style.background = 'blue'
                }
                return new Promise(function (resolve) {
                    timer = setTimeout(function () {
                        resolve()//p2成功的回调
                    }, 2000)
                })
            })
            
        }
        
    // 随机数封装函数
    function rand(min, max) {
        return min + Math.floor(Math.random() * (max - min + 1));
    }

css代码

* {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 500px;
            height: 200px;
            border: 1px solid red;
            margin: 100px auto;
            text-align: center;
            position: relative;
        }

        #box h2 {
            color: #ccc;
            position: absolute;
            top: -50px;
            left: 180px;
        }

        ul {
            list-style: none;
            display: flex;
            justify-content: space-evenly;
            margin-top: 75px;
        }

        li {
            width: 50px;
            height: 50px;
            text-align: center;
            background: red;
            border-radius: 50%;
            line-height: 50px;
        }

        #btn {
            width: 300px;
            height: 50px;
            position: absolute;
            left: 100px;
            bottom: -80px;
            cursor: pointer;
        }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
离线抽奖程序可以使用C语言实现。首先,我们需要定义一个结构体来存储参与抽奖的人员信息,包括姓名、电话号码等。然后,我们可以使用C语言的随机数生成函数来随机抽取幸运的中奖者。 首先,我们需要定义一个结构体来存储参与抽奖的人员信息,包括姓名、电话号码等: ```c #include <stdio.h> #include <stdlib.h> #include <time.h> typedef struct { char name[50]; char phone[20]; } Participant; ``` 然后,我们可以写一个函数来进行抽奖,从参与抽奖的人员中随机选取中奖者: ```c void drawWinner(Participant participants[], int numParticipants) { srand(time(NULL)); int winnerIndex = rand() % numParticipants; printf("恭喜 %s 获得抽奖大奖!\n", participants[winnerIndex].name); } ``` 最后,我们可以在main函数中实现用户输入参与抽奖的人员信息,并调用抽奖函数进行抽奖: ```c int main() { int numParticipants; printf("请输入参与抽奖的人员数量:"); scanf("%d", &numParticipants); Participant participants[numParticipants]; for (int i = 0; i < numParticipants; i++) { printf("请输入第%d位参与者的姓名和电话号码:", i+1); scanf("%s %s", participants[i].name, participants[i].phone); } drawWinner(participants, numParticipants); return 0; } ``` 通过以上代码,我们就可以实现一个基于C语言的离线抽奖程序,用户可以输入参与抽奖的人员信息,然后程序会随机抽取出中奖者。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值