javascript礼品抽奖

怼烎@ 2022-01-28 00:35 167阅读 0赞

## 抽奖 ##

#box {
                position: relative;
                width: 300px;
                height: 300px;
                margin: 50px auto;
            }
    
            #box div {
                position: absolute;
                width: 100px;
                height: 100px;
                border: 1px solid black;
                text-align: center;
                line-height: 100px;
                font-size: 20px;
                background-color: aquamarine;
                box-sizing: border-box;
            }
    
            .p1 {
                top: 0;
                left: 0;
            }
    
            .p2 {
                top: 0;
                left: 100px;
            }
    
            .p3 {
                top: 0;
                left: 200px;
            }
    
            .p4 {
                top: 100px;
                left: 200px;
            }
    
            .p5 {
                top: 200px;
                left: 200px;
            }
    
            .p6 {
                top: 200px;
                left: 100px;
            }
    
            .p7 {
                top: 200px;
                left: 0px;
            }
    
            .p8 {
                top: 100px;
                left: 0px;
            }
    
            #box #btn {
                top: 100px;
                left: 100px;
                background-color: red;
                color: yellow;
            }
            #result{
                height: 100px;
                background-color: red;
                color: yellow;
                font-size: 40px;
                text-align: center;
                line-height: 100px;
                display: none;
            }

<div id="box">
            <div class="p1">iphoneX</div>
            <div class="p2">华为p30</div>
            <div class="p3">小米9</div>
            <div class="p4">vivo x27</div>
            <div class="p5">三星s10</div>
            <div class="p6">oppo FX</div>
            <div class="p7">黑鲨</div>
            <div class="p8">谢谢参与！</div>
            <div id="btn">开始抽奖</div>
        </div>
        <div id="result"></div>

<script>
            var box = document.getElementById('box');
            var divs = box.getElementsByTagName('div');
            var btn = document.getElementById('btn');
            var result = document.getElementById('result');
            //var btn =   divs[divs.length-1];
            var timer = null;
            btn.onclick = function () {
                var i = 0;
                var count = 0; //记录转圈数
                //点击开始，第一个div立刻切换样式
                divs[i].style.border = "2px solid yellow";
    
                timer = setInterval(function(){
                    i++;
                    //当切换到最后一个时继续从第一个开始
                    if(i == 8){
                        i = 0;
                        count++;
                    }
                    if(i == 0){
                        //如果当前变色的是第一个，要让最后一个恢复样式
                        divs[7].style.border = "1px solid black";
                    }else{
                        //当前变颜色的上一个div恢复黑色边框
                        divs[i-1].style.border = "1px solid black";
                    }
                    // 每隔100毫秒让下一个div显示黄色边框   
                    divs[i].style.border = "2px solid yellow";
                    //当转够两圈并且 i 等于 中奖号就停止
                    if(count == 2&&i == n){
                        clearInterval(timer);
                        console.log(n);
                       result.innerHTML = "恭喜获得"+divs[n].innerHTML;
                       result.style.display = 'block';
                    }
    
                }, 100);
                
                // 随机出奖项的索引 0-7  
                var n = Math.round(Math.random()*99);  // 0-99   
                if(n>=0&&n<=49){  //50%
                    n = 7;
                }else if(n>=50&&n<=69){//  10%
                    n = 2;
                }else if(n>=70&&n<=74){  // 5%
                    n = 1;
                }else if(n>=75&&n<=79){  // 5%
                    n = 0;
                }else if(n>=80&&n<=89){  //10%
                    n = 3;
                }else if(n>=90&&n<=94){ 
                    n = 4;
                }else if(n>=95&&n<=97){
                    n = 5;
                }else{
                    n = 6;
                }
                
                
           }
    
    
    
    
        </script>

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220128/a42ed62ae501494fa81df1d8fe84393c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关取出礼品盒中的礼品 0代表礼品，（）代表包装盒，至少拆几次可以拿到礼品

出礼品盒中的礼品 0代表礼品，（）代表包装盒，至少拆几次可以拿到礼品 (((0)))，3次 (((())(0)()))， 3次 **思路** 去除中间没...

末蓝、/ 2024年04月18日 20:51/ 0 赞/ 14 阅读

相关 vue 转盘抽奖功能，可控制抽奖概率

实现逻辑：思路：首先需要一个转盘，然后需要一个抽奖按钮定位在中间，图片提前设计或者用背景颜色代替（这里用的是图片，然后计算概率），使用css完成转动效果，每次转动完成之后情

刺骨的言语ヽ痛彻心扉/ 2024年03月24日 20:10/ 0 赞/ 26 阅读

相关 JavaScript 实现抽奖程序

function draw (first = 1, second = 3, third = 5) { let firstPrize = ['1A', '1

快来打我*/ 2022年12月05日 15:15/ 0 赞/ 122 阅读

相关年会抽奖小游戏java_抽奖小游戏

抽奖 /\ 1、要有随机数 2、创建一个数组 3、点击按钮控制 4、先抽一等奖，再抽二等奖，最后是三等奖 5、一点击停止就会把名字从数组中删除掉，并且把名字放到该

缺乏、安全感/ 2022年11月09日 14:14/ 0 赞/ 183 阅读

相关多线程练习：抽奖箱抽奖

package homeworkday11; import java.util.ArrayList; /\第四题：分析以下需求，并用代码实现有一个抽奖池,该抽奖池中存

小咪咪/ 2022年05月31日 01:17/ 0 赞/ 181 阅读

相关 javascript实现水果抽奖机

起因：公司每个月都要做推广活动，很多推广活动都需要抽奖，但是以前的抽奖的特效太简单，于是美工看到京东的年会抽奖机，我就不得不走向逆向仿制的道路上，经过三天的攻克，终于实

柔光的暖阳◎/ 2022年05月27日 05:50/ 0 赞/ 196 阅读

相关模拟抽奖

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

柔光的暖阳◎/ 2022年05月23日 12:18/ 0 赞/ 165 阅读

相关 java——抽奖（根据随机值进行抽奖，根据执行范围进行抽奖）

如题下面上货。需求是这样的，根据不同的概率抽出不同的奖金。例如： 2%的概率为8 3%的概率为5 5%的概率为3 90%的概率为2 package

柔光的暖阳◎/ 2022年05月14日 04:42/ 0 赞/ 179 阅读

相关 DCloud社区回馈抽奖活动来了！礼品多，速来！

[uni-app][]是个好东西，但很多人还不知道它。社交平台分享推荐[uni-app][]，让更多人知道这个开发利器，还能参与活动抽大奖！既然是抽奖活动，咱们先说奖

ゝ一纸荒年。/ 2022年04月17日 02:56/ 0 赞/ 237 阅读

相关 javascript礼品抽奖

抽奖 box { position: relative; width: 300px;

怼烎@/ 2022年01月28日 00:35/ 0 赞/ 168 阅读