概率随机抽奖，点击置顶功能，点击排序（反向排序）功能~

最近做了个小练习，三个按钮，分别实现三个不同的功能

第一个按钮点击抽奖，只有未中奖以及中奖两个选项　　ps：奖品是兰博基尼5元代金卷（里面循环了一些海景别墅，500万彩票，都是假的）

第二个按钮 选中下方的模块，然后点击可以让模块置顶

第三个按钮 对剩余按钮进行排序，点一下正序，再点一倒序

很简单的三个功能，还是花了我一点时间，哈哈哈哈哈哈哈哈哈

上代码

 

这里是有个排序的方法：

/*（正序倒序切换）排序方法*/
function sortArr(a,b){
    return a > b?b - a:a - b
}


/* 生成随机整数*/
function randomNumber(max,min){
    return parseInt(Math.random()*(max-min+1)+min);   
}

$(function(){
    $('.mask').height($(window).height())
    $('.closeMask').click(()=>{
        $('.mask').css("top",'-100%')
    })
 
})

 

 

这里是html

 <!-- 顶部置顶容器 -->
    <div class="topBox">

    </div>
    <!-- 三个按钮容器 -->
    <div class="btnBox">
        <button class="luckDraw">抽奖</button>
        <button class="roofPlacement">置顶</button>
        <button class="sort">排序</button>
        <a href="tel:13764567708"></a>
    </div>
    <div>
        <h1 class="luckly">点击上方抽奖按钮进行抽奖</h1>
    </div>
    <div>
        <!-- 排序容器 -->
        <ul class="sortBox">
           
        </ul>
    </div>
    <div class="mask">
            <canvas  id="canvas"></canvas>
        <div class="maskContent">
            <span class="closeMask">x</span>
            <p>幸运儿，赶快怒戳下方的连接购买把!</p>
            <a href="https://www.lamborghini.com/cn-en/">点击购买</a>
        </div>
    </div>
     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
     <script src="./function.js"></script>
     <script src="./canvas.js"></script>
    <script>

       let arr    = [1,2,3,4,5,6,7,8,9,10],
           topArr = [];
            prize = ['海景房一套','泡枸杞保温杯一个','劳斯莱斯幻影','再接再厉','500万彩票','兰博基尼5元代金卷']
           

        // 抽奖
        $(".luckDraw").click(()=>{
            let t = setInterval(function(){
                $(".luckly").text(prize[randomNumber(prize.length-1,0)])
               
            },100)
            setTimeout(() => {
                clearInterval(t)
                 var ran=Math.ceil(Math.random()*1000)
                if(ran<95){
                    $(".luckly").html("恭喜你中奖了,获得兰博基尼5元代金卷一张，赶快去购买吧")
                  
                   setTimeout(() => {
                        $('.mask').css("top",'0')
                   },1000)
                }else if(94<ran<1000){
                    $(".luckly").html("再接再厉")
                }
            }, 2000);
           
        })

        
        

        //置顶按键
        $('.roofPlacement').click(() => {
            // console.log(topArr)
            let len = arr.length - 1
            for(let i=len;i>=0;i--){   //反向循环，解决使用splice方法删除数组不完全的情况
                    if($('.sortBox>li')[i].className == "show"){
                        topArr.push($('.sortBox>li')[i].innerHTML)
                        arr.splice(i,1); //splice方法删除数组
                        // delete arr[i] //delete方法删除数组，不会改变原数组，删除后的值是undefine
                    }
                console.log(arr)
            }
           
            loadingSortBox()//重载排序盒子
            loadingLi()     //重载遍历排序盒子
            for(let i=0;i<topArr.length;i++){
                 $(".topBox").append(
                     `<li>${topArr[i]}</li>`
                 )
            }
            topArr = [];
        })
        
       

        // 排序
        $(".sort").click(()=>{
            arr.sort(sortArr)                // 调用function内的排序方法
            $('.sortBox').html('')           //清空排序容器
            for(let i=0;i<arr.length;i++){
                $(".sortBox").append(       
                    `
                    <li>${arr[i]}</li>
                
                    `
                )
            }
            loadingLi()     //重载排序盒子
        })
        



        function loadingSortBox(){
            $(".sortBox").html("")
            for(let i=0;i<arr.length;i++){
                    $(".sortBox").append(       
                        `
                        <li>${arr[i]}</li>
                    
                        `
                    )
                
            }
        }
        function loadingLi(){
            $(".sortBox>li").each(function(i){
                $(this).click(() =>{     //闭包
                    $(".sortBox>li")[i].classList.toggle("show")//切换选中效果
                });
            });
        }
       
        loadingLi() //选中每个li的效果
        loadingSortBox()//加载排序盒子
   
    </script>