js随机生成不同颜色块随机移动

最新推荐文章于 2023-08-10 21:59:13 发布

waterDjj

最新推荐文章于 2023-08-10 21:59:13 发布

阅读量5.2k

点赞数 2

本文链接：https://blog.csdn.net/waterdjj/article/details/52198153

版权

<style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            margin-left: 10px;
            float: left;
        }
    </style>
</head>

<body id="body1">
<button οnclick="btn()">创建div</button>
<script>
    function  btn(){
        var id;
        //动态创建元素
        var str=document.createElement("div");
        //元素的背景色随机的
        str.style.backgroundColor=getColorRandom();
        //将生成的div追加到body中
        document.getElementById("body1").appendChild(str);
        //随机生成的id设置为动态创建的div的id
        str.id="items"+parseInt(Math.random()*10000);
        // 获取动态生成的div的id
        var obj=document.getElementById(str.id);

        var disX=0;
        var disY=0;
        //鼠标点击落下事件
        obj.οnmοusedοwn=function (event){
            disX=event.clientX-obj.offsetLeft;
            disY=event.clientY-obj.offsetTop;
            //鼠标移开事件
            document.οnmοusemοve=function(ev){
                obj.style.left=ev.clientX-disX+"px";
                obj.style.top=ev.clientY-disY+"px";
            }
            //鼠标松开事件
            document.οnmοuseup= function () {
                document.οnmοusemοve=null;
                document.οnmοuseup=null;
            }
        }
        //生成随机颜色
        function getColorRandom(){
            var c="#";
            var cArray=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
            for(var i=0;i<6;i++){
              var  cIndex= Math.round(Math.random()*15);
                c+=cArray[cIndex];
            }
            return c;
        }

    }



</script>
</body>

waterDjj

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js随机生成不同颜色块随机移动

div{ width: 100px; height: 100px; background-color: red; position: absolute; margin-left: 10px; float: left; } 创
复制链接

扫一扫