随机数抽奖

最新推荐文章于 2024-11-18 12:11:58 发布

王懿诺

最新推荐文章于 2024-11-18 12:11:58 发布

阅读量134

点赞数

分类专栏： js demo 文章标签： javascript

本文链接：https://blog.csdn.net/TodayStartWJH/article/details/125447995

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

demo

1 篇文章 0 订阅

订阅专栏

首页:点击四组中的任意一组,把总人数随机自定义人数,在详情页显示出来.

//首页
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            width: 70%;
            margin: 0 auto;
            margin-top: 200px;
            display: flex;
            justify-content: space-between;
        }
        .wrap .box{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        .box:nth-child(1){
            background-color: red;
        }
        .box:nth-child(2){
            background-color: pink;
        }
        .box:nth-child(3){
            background-color: greenyellow;
        }
        .box:nth-child(4){
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box" id="eee">第1组</div>
        <div class="box">第2组</div>
        <div class="box">第3组</div>
        <div class="box">第4组</div>
    </div>

    <script >
        var data = ['昊然 ','明杰','立诚','立轩','立辉','峻熙','弘文','雨泽','晟睿','天佑','文昊','修洁','黎昕','远航','旭尧','鸿涛','伟祺','越泽'];
        var people;

        //从一个给定的数组arr中,随机返回num个不重复项
        function getArrayItems(arr, num) {
            //新建一个数组,将传入的数组复制过来,用于运算,而不要直接操作传入的数组;
            var temp_array = new Array();
            for (var index in arr) {
                temp_array.push(arr[index]);
            }
            //取出的数值项,保存在此数组
            var return_array = new Array();
            for (var i = 0; i<num; i++) {
                //判断如果数组还有可以取出的元素,以防下标越界
                if (temp_array.length>0) {
                    //在数组中产生一个随机索引
                    var arrIndex = Math.floor(Math.random()*temp_array.length);
                    //将此随机索引的对应的数组元素值复制出来
                    return_array[i] = temp_array[arrIndex];
                    //然后删掉此索引的数组元素,这时候temp_array变为新的数组
                    temp_array.splice(arrIndex, 1);
                } else {
                    //数组中数据项取完后,退出循环,比如数组本来只有10项,但要求取出20项.
                    break;
                }
            }
            return return_array;
        }
        console.log(getArrayItems(data, 8))
        window.onload = function() {
           var box = document.getElementsByClassName('box');  
            for(var i = 0; i < box.length; i++){
                 // JS监听
                box[i].addEventListener('click',function(){
                  people= getArrayItems(data, 8)
                  
                  localStorage.setItem('people',JSON.stringify(people))
                  window.location.href="./detail.html";
                },false);
            }
        }






        // var box = document.getElementsByClassName('box');  
        
        // // JS监听
        // box.addEventListener('click',function(){
        //     console.log(111111)
        // },false);
    </script>
</body>
</html>

//详情页
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrap{
            width: 70%;
            margin: 0 auto;
            margin-top: 200px;
            display: flex;
            justify-content: space-between;
        }
        #wrap .box{
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background: skyblue;
            color: white;
        }   
    </style>

    <div id="wrap"></div>
</head>
<body>
    

    <script>
        var people = JSON.parse(localStorage.getItem('people')) 
        var wrap = document.getElementById('wrap')
        console.log(people)
        
        for(var i = 0; i < people.length; i++){
            var pE = document.createElement('p'); //创建p标签
            var pClass= document.createAttribute('class'); //创建属性（id或者class）
            pClass.value = 'box'; //设置属性值 class = "box"
		    pE.setAttributeNode(pClass)//把这个属性添加到该p标签
		    wrap.appendChild(pE);//将p标签添加到wrap div中
            var pText = document.createTextNode(people[i]);//*创建一个文本
            pE.appendChild(pText);//将文本添加p标签中
        }
    </script>
</body>
</html>