消滅星星

新建一個文件夾,里面包含一張名為star的png格式的圖片。

首先將body的背景設置成黑色

body style="background:#000";

定義一個生成隨機數(shù)的函數(shù)

<script>

function rand(min,max){

? ?time=Math.random()*(min+max)+min;

}

定義一個計時器,每隔一秒則添加一個img元素

setInterval(function(){

創(chuàng)建img元素標簽

? var img=document.createElement("img");

添加圖片

? img.setAttribute("src","star.png");

設置圖片寬度

? img.setAttribute("width",rand(30,100));

設置圖片的位置

img.setAttribute("style","position:absolute;left:"+rand(50,500)+"px;top:rand(50,500)"+"px");

將元素標簽追加到body中

document.body.appChild(img);

獲取body中的元素

var star=document.getElementByTagName("img");

循環(huán)遍歷頁面中的元素

for(var i=0;i<=img.length;i++){

點擊哪個元素也將該元素從頁面中刪除

? img[i].onclick=function(){

? document.body.removeChild(this);

}

}

},1000)

</script>

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 8,130評論 2 17
  • 單例模式 適用場景:可能會在場景中使用到對象,但只有一個實例,加載時并不主動創(chuàng)建,需要時才創(chuàng)建 最常見的單例模式,...
    Obeing閱讀 2,315評論 1 10
  • 以下是常用的代碼收集,學習用。轉(zhuǎn)自豪情博客園 1. PC - js 返回指定范圍的隨機數(shù)(m-n之間)的公式 re...
    自由加咖啡閱讀 1,114評論 0 1
  • 一、JS前言 (1)認識JS 也許你已經(jīng)了解HTML標記(也稱為結構),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,932評論 0 8
  • 發(fā)現(xiàn)俺這個字很好玩: 我五十多歲的母親 在微信上說, "俺今天搶了一個大紅包" 我認識的一位詩人 在電話里說 "俺...
    向日葵愛呀愛太陽閱讀 262評論 0 0

友情鏈接更多精彩內(nèi)容