用產生隨機數的方法加上鼠標事件實現點擊生成彩色積木

時間 2019-12-13

標籤產生隨機數方法加上鼠標事件實現點擊生成彩色積木简体版

原文原文鏈接

這個小例子我是用純Js實現的，這個例子主要用到了random()產生隨機數的方法和onmouse等鼠標事件以及獲取元素和視口座標來實現了能夠在網頁上拖拽的積木效果，能夠幫學習javascript的同窗一些小小的啓發，話很少說，先給你們看效果圖：javascript

這個html代碼就很簡單了，咱們寫一個按鈕來實現點擊事件便可：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>

而後咱們來分析一個隨機生成網頁積木所需的步奏，首先咱們要爲頁面上的這個按鈕設置點擊事件來讓它能夠生成隨機的小方塊:java

 <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;
    }

好了，一個簡單的彩色積木例子就實現了，若是想了解更多關於獲取瀏覽器視口和顯示器寬度以及高度的方法請看個人博客，謝謝你們，吃好喝好回見。dom

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。