js打怪升級之路三隨機顯示小星星

時間 2021-08-13

標籤 javascript java app dom ide 函數動畫 this code 對象欄目 JavaScript 简体版

原文原文鏈接

<script type="text/javascript">
//實例：隨機顯示小星星
/*
	(1)網頁背景色爲黑色
	(2)建立圖片節點，追加到<body>父節點
	(3)圖片隨機大小
	(4)圖片隨機定位座標(x,y)
	(5)定時器
	(6)網頁加載完成，開始星星
	(7)星星顯示的範圍，跟窗口的寬高同樣。(0,window.innerWidth)
	(8)點擊星星，星星消失
*/

//網頁加載完成
window.onload = function(){
	//更改網頁背景色
	document.body.bgColor = "#000";
	//定時器：1秒鐘，顯示一個星星
	window.setInterval("star()",1000);
}
//動畫主函數
function star()
{
	//建立圖片節點
	var imgObj = document.createElement("img");
	//添加src屬性
	imgObj.setAttribute("src","images/xingxing.gif");
	//添加width屬性。getRandom()隨機數函數
	var width = getRandom(15,85);
	imgObj.setAttribute("width",width);

	//添加style屬性(行內樣式)。
	var x = getRandom(0,window.innerWidth);
	var y = getRandom(0,window.innerHeight);
	imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;");
	
	//添加onclick事件屬性
	//this表明當前對象，this是一個對象。
	//this是系統關鍵字。this只能在函數內使用。
	imgObj.setAttribute("onclick","removeImg(this)");
	//將圖片節點，掛載到<body>父節點下
	document.body.appendChild(imgObj);
}
//函數：求隨機數函數
function getRandom(min,max)
{
	//隨機數
	var random = Math.random()*(max-min)+min;
	//向下取整
	random = Math.floor(random);
	//返回結果
	return random;
}
//函數：刪除節點
function removeImg(obj)
{
	document.body.removeChild(obj);
}
</script>
</head>

<body>
</body>