用产生随机数的方法加上鼠标事件实现点击生成彩色积木

Posted 2020-08-07 需要学习的人

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用产生随机数的方法加上鼠标事件实现点击生成彩色积木相关的知识，希望对你有一定的参考价值。

这个小例子我是用纯Js实现的，这个例子主要用到了random()产生随机数的方法和onmouse等鼠标事件以及获取元素和视口坐标来实现了可以在网页上拖拽的积木效果，可以帮学习javascript的同学一些小小的启发，话不多说，先给大家看效果图：

这个html代码就很简单了，我们写一个按钮来实现点击事件即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body id="bg">
<input type="button" value="生成积木" id="drag"/>
</body>
</html>

然后我们来分析一个随机生成网页积木所需的步奏，首先我们要为页面上的这个按钮设置点击事件来让它可以生成随机的小方块:

 <script>
         document.getElementById("drag").onclick =function (){
         var ids = getRandom();
         var num1 = getRandom();
         var num2 = getRandom();
         var num3 = getRandom();
         var divs = "<div id=\'"+ids+"\' style=\'position: absolute;width: 100px;height: 100px;background: rgb("+num1+","+num2+","+num3+");float: left\'></div>"     //生成随机颜色的div
         document.getElementById("bg").insertAdjacentHTML("beforeEnd",divs);
         drag(ids);      //调用下面的拖拽函数方法
    }
    function  getRandom(){
        return parseInt(Math.random() * 255);
    }
</script>

点击事件就已经加上了，然后我们实现可以随意拖拽的积木效果，在这里使用了多个鼠标事件和获取页面以及元素坐标来实现，我在这里是封装了一个函数方法，代码如下：

    function drag(id){
        var obj = document.getElementById(id);
        var disX = 0;
        var disY = 0;
        obj.onmousedown = function (event){
            disX = event.clientX - obj.offsetLeft;    //offsetLeft元素相对于父元素的左边距
            disY = event.clientY - obj.offsetTop;
            document.onmousemove = function (event){
                obj.style.left = event.pageX - disX +\'px\';
                obj.style.top = event.pageY - disY +\'px\';
            }
            document.onmouseup = function (){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
  return false;
    }

好了，一个简单的彩色积木例子就实现了，如果想了解更多关于获取浏览器视口和显示器宽度以及高度的方法请看我的博客，谢谢大家，吃好喝好回见。

以上是关于用产生随机数的方法加上鼠标事件实现点击生成彩色积木的主要内容，如果未能解决你的问题，请参考以下文章