原生JS 實現點擊按鈕建立元素

時間 2020-08-02

原文原文鏈接

要求: 點擊按鈕，隨機生成一個20px-100px寬度正方形，隨機顏色，隨機位置，不能出可視區域外html

思路：（1）建立按鈕，爲按鈕添加事件偵聽app

　　　　（2）觸發事件，建立一個元素dom

　　　　（3）設置元素樣式，包括大小，位置，顏色函數

基礎HTML代碼：spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>添加</button>
    <script>

    </script>
</body>
</html>

JS代碼：code

 init(); function init() { var bn = document.getElementById("bn");     //經過id獲取按鈕bn
            bn.addEventListener("click",clickHandler);  //爲按鈕添加點擊事件
 } function clickHandler(e) { var wid = document.documentElement.clientWidth;   //獲取視口寬度
            var hei = document.documentElement.clientHeight;  //獲取視口高度
            var div = document.createElement("div");          //建立一個div
             //定義一個局部變量divWidth 存放當前建立的div的大小
            var divWidth = Math.floor(Math.random() * 80 + 20); //設置div的樣式,包括 寬 高 定位 背景顏色
            div.style.position = "absolute"; div.style.width=divWidth+"px"; div.style.height=divWidth+"px"; //div的位置應該是當前視口寬高減去建立div的寬高 而後取隨機值,才能保證div不會超出視口
            div.style.left = Math.floor(Math.random() * (wid - divWidth))+"px"; div.style.top = Math.floor(Math.random() * (hei - divWidth))+"px"; div.style.backgroundColor =randomColor(); //將元素添加到body中
 document.body.appendChild(div); } //定義一個函數,執行返回一個表明顏色的字符串
        function randomColor() { return "#"+Math.floor(Math.random()*0x1000000).toString(16).padStart(6,"0"); }

效果展現：htm

看完上面的代碼，你是否是以爲它看起來有一些繁雜也許咱們能夠將它「美化」一下，讓代碼看起來更漂亮，更加賞心悅目對象

咱們能夠將代碼中的一些相似的部分摘取出來，用一個函數來完成這些內容，好比爲元素添加style 樣式blog

咱們能夠這麼寫事件

        // createNewElement 建立一個元素, 函數內有兩個參數第一個參數是要建立的元素類型,第二個參數是樣式
        //經過Object.assign()方法將style內的屬性添加給建立的元素的style上
        //最後將處理好的元素返回
        function createNewElement(elem,style){ var elem=document.createElement(elem); Object.assign(elem.style,style); return elem; }

注： Object.assign(target, source_1, ···)

　　用於將源對象的全部可枚舉屬性複製到目標對象中。

咱們怎麼使用這個函數呢

　　 var elem(用於接收函數return的元素)=createNewElement("div(要建立的元素類型)",{

　　　　　屬性:屬性值; //第二個參數爲對象,將這個對象傳入,並將對象的屬性複製到元素的style屬性上完成樣式的添加.

　　　　　width:"100px",

　　　　　backgroundColor:"green"

　　});

這個函數不只能夠用於這裏,還能夠用於建立其餘元素

 init(); function init() { var bn = document.getElementById("bn");     //經過id獲取按鈕bn
            bn.addEventListener("click",clickHandler);  //爲按鈕添加點擊事件
 } function clickHandler(e) { var wid = document.documentElement.clientWidth;   //獲取視口寬度
            var hei = document.documentElement.clientHeight;  //獲取視口高度
            //定義一個變量divWidth 存放當前建立的div的大小
            var divWidth = Math.floor(Math.random() * 80 + 20); var div=createNewElement("div",{ position : "absolute", width:divWidth+"px", height:divWidth+"px", left: Math.floor(Math.random() * (wid - divWidth))+"px", top:Math.floor(Math.random() * (hei - divWidth))+"px", backgroundColor:randomColor() }) document.body.appendChild(div); } // createNewElement 建立一個元素, 函數內有兩個參數第一個參數是要建立的元素類型,第二個參數是樣式
        //經過Object.assign()方法將style內的屬性添加給建立的元素的style上
        //最後將處理好的元素返回
        function createNewElement(elem,style){ var elem=document.createElement(elem); Object.assign(elem.style,style); return elem; } //定義一個函數,執行返回一個表明顏色的字符串
        function randomColor() { return "#"+Math.floor(Math.random()*0x1000000).toString(16).padStart(6,"0"); }

相關標籤/搜索

每日一句

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