今天来写个抽奖 怎么抽奖不让老板亏

因为我只是初学者简单的css样式就不再解释

css部分

<style>

        #wrap{

            width: 600px;

            height: 600px;

            position: relative;

        }

        #wrap div{

            width: 198px;

            height: 198px;

            background-color: gray;

            position: absolute;

            border: 1px solid orange;

            text-align: center;

            line-height: 200px;

        }

        #wrap .active{

            background-color: orangered;

            color: white;

        }

    </style>

HTML部分

直接来思路

  1.布局

          2.点击开始抽奖,跑马灯效果，加速切换（计时器的时间）

          3.达到一定速度之后，匀速切换  (不在修改 计时器时间)

          4.点击停止,跑马灯开始减速切换  (计时器增大，拉大调用间隔)

          5.在慢匀速过程中，发生切换，验证选择节点内容是否是指定内容

我写的样式是

来js部分

//这是显示的奖品

var goodList =["苹果","iphone 12","ipad mini","华为p40","谢谢参与","5元话费","10元话费","桃木手链"];

//这为实际抽奖的奖品

  var list =["谢谢参与","谢谢参与","谢谢参与","谢谢参与","谢谢参与","谢谢参与","谢谢参与","桃木手链"];

//先将我们看到的奖品插入到HTML页面中

for(let i=0;i<goodList.length;i++){

            wrap.innerHTML +="<div>"+goodList[i]+"</div>"

        } 

//给这些小div添加样式

let items =wrap.children;

        items[1].style.left ="200px";

        items[2].style.left ="400px";

        items[3].style.left ="400px";

        items[3].style.top ="200px";

        items[4].style.left ="400px";

        items[4].style.top ="400px";

        items[5].style.left ="200px";

        items[5].style.top ="400px";

        items[6].style.top ="400px";

        items[7].style.top ="200px";

//生成随机商品

var randomGood；

//随机生成商品的方法

function random(a,b){

           return Math.floor(Math.random()*(b-a+1)+a);

        }

//设置选中的商品

var x =0;

        items[x].className ="active";

        var flag =true;

   // 设置初始的切换时间

  var time=200；

//绑定开始抽奖

start.onclick =function(){

           if (flag) {

               t =200;

            //    获取抽奖商品

            randomGood =list[random(0,list.length -1)];

            console.log(randomGood);

            // 开始调用动起来的方法

            f();

           }

        }

//运动的动画

 function f(){

            // 需要先把active样式清空

            items[x].className ="";

            x++;

            // 越界

            if (x >7) {

                x =0

            }

            // 缩短切换时间

            if (flag) {

                t -=10;

                if (t<=80) {

                    t =80;

                }

            }

            else{

                // 增加切换时间

                t+=20;

                // 到一定的范围匀速

                if (t>=500) {

                    t =500;

                    // 在慢匀速的过程中，判断是否和产生的抽奖结果一致

                    if (items[x].innerHTML ==randomGood) {

                        console.log("恭喜你获得:"+randomGood);

                        flag =true;

                        return;

                    } 

                }

            }

   items[x].className ="active";

 // 延迟定时器(隔t事件之后调用f)

 setTimeout(f, t);

//停止的方法

end.onclick =function(){

            flag =false;

        }

这样就写完了，你的老板会爱死你哟