动态元素布局-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44376338/article/details/111132154
实现效果：
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        div{width: 800px;height: 400px;margin:100px auto 0;background-color: aqua;text-align: center;cursor: pointer;position: relative;display: flex;flex-wrap: wrap;justify-content: space-evenly;}
        span{display: block;width: 100px;height: 50px;background-color: blanchedalmond;margin:50px auto 0;color: coral;text-align: center;cursor: pointer;}
        span p{
            line-height: 50px;
            border-radius: 5%;
        }
        div p{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: red;
            margin: 10px auto 0;
            line-height: 30px;
            transition: all 1s;
        
            
        
        }
       .trans{
           transform: translateY(200px);
       }
        div p:nth-child(7){
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: blue;
            margin: 10px auto 0;
            line-height: 30px;
        }
        div p:nth-child(10){
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: blue;
            margin: 10px auto 0;
            line-height: 30px;
        }
        div p:nth-child(20){
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: blue;
            margin: 10px auto 0;
            line-height: 30px;
        }
           div p:nth-child(19){
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: blue;
            margin: 10px auto 0;
            line-height: 30px;
        }
        .f2{
            float: left;
        }
    </style>
</head>
<body>
    
    <div>
   

    </div>
    <span>
       <p>点击</p>
    </span>


    <script>
        for(j=0;j<50;j++){
              var p=document.createElement("p");
              p.innerHTML=j; 
              var div=document.getElementsByTagName("div")[0];
              div.appendChild(p)
        }
       
        var span=document.getElementsByTagName("span")[0];
        j=0;
        span.onclick=function(){
            j++;
            if(j%2){
                timer=setInterval(function(){
                var p=document.getElementsByTagName("p");
                for(i=0;i<p.length-1;i++){
                p[i].style.position="absolute"
                var pos=parseInt(Math.random()*770)
                var pos2=parseInt(Math.random()*350)
                p[i].style.left=pos+"px";
                p[i].style.bottom=pos2+"px"; 
               
            }
            },300)
            }else{
                clearInterval(timer)
                var arr=[];
                while(arr.length<7){
                        var nub=parseInt(Math.random()*33+1);
                    if(arr.indexOf(nub)==-1){
                        arr.push(nub)
                    }
                }
                var p=document.getElementsByTagName("p");
                for(i=0;i<7;i++){
                    var arr2=["265","305","345","385","425","465","505"]
                    p[i].style.bottom="450px"
                    p[i].style.left=arr2[i]+"px"

                }
             
                for(i=0;i<6;i++){
                    p[i].innerHTML=arr[i]
                }
                var p=document.getElementsByTagName("p")[6];
                p.innerHTML=parseInt(Math.random()*16+1)

            }

        }
       

    </script>
</body>
</html>
js随机位置的双色球
