要求: 點擊按鈕，隨機生成一個20px-100px寬度正方形，隨機顏色，隨機位置，不能出可視區域外
思路：（1）創建按鈕，為按鈕添加事件偵聽
（2）觸發事件，創建一個元素
（3）設置元素樣式，包括大小，位置，顏色
基礎HTML代碼：
<!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代碼：
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"); }
效果展示：
看完上面的代碼，你是不是覺得它看起來有一些 繁雜 也許我們可以將它 “美化” 一下，讓代碼看起來更漂亮，更加賞心悅目
我們可以將代碼中的一些類似的部分摘取出來，用一個函數來完成這些內容，比如為元素添加style 樣式
我們可以這么寫
// 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"); }
--