JS實現(xiàn)消滅星星案例
本文實例為大家分享了JS實現(xiàn)消滅星星的具體代碼，供大家參考，具體內(nèi)容如下
消滅星星的效果圖：
功能需求：
1、點擊星星，星星消失
2、每隔一秒自動生成一顆星星
3、星星的大小、出現(xiàn)位置是隨機(jī)的
案例代碼及分析：
html和css代碼：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
position: relative;
width: 1000px;
height: 500px;
margin: 100px auto;
background-color: black;
}
</style>
<body>
<div>
</div>
- body里面我們只需要一個div來裝下我們隨機(jī)生成的星星
- div盒子需要有一個定位(星星隨機(jī)出現(xiàn)的位置是根據(jù)定位的left和top值來實現(xiàn)的)
JS代碼：
var div = document.querySelector('div');//獲取到div盒子
function creatImg(num) {
for (var i = 0; i < num; i++) { //隨機(jī)生成num個星星
var imgs = document.createElement('img'); //創(chuàng)建img標(biāo)簽
imgs.style.position = 'absolute'; //給星星圖片添加絕對定位
var width = Math.floor(Math.random() * (50 - 10 + 1) + 10);
var height = width; //隨機(jī)生成寬度和高度，星星的寬高一致
var top = Math.floor(Math.random() * (450 - 0 + 1) + 0);
var left = Math.floor(Math.random() * (950 - 0 + 1) + 0);
//將星星的寬、高、left、top值全部修改為隨機(jī)生成的
imgs.style.width = width + 'px';
imgs.style.height = height + 'px';
imgs.style.left = left + 'px';
imgs.style.top = top + 'px';
//將星星圖片的鏈接添加到img標(biāo)簽中
imgs.src = 'images/xingxing.gif';
//將創(chuàng)建的img標(biāo)簽添加到div盒子里面
div.appendChild(imgs);
}
}
注意：使用修改width、left等帶有單位的屬性的時候一定要加上單位
creatImg(5); //調(diào)用函數(shù)并生成五顆星星
setInterval(function () { //每隔1s執(zhí)行一次里面的代碼
var img = document.querySelectorAll('img'); //獲取到星星圖片
//給每個星星添加點擊事件
for (var i = 0; i < img.length; i++) {
img[i].addEventListener('click', function () {
//點擊之后刪除點擊的img
div.removeChild(this);
})
}
creatImg(1);
}, 1000);
獲取圖片的時候是獲取div盒子里面所有的星星圖片，不是單獨(dú)的某一張
圖片獲取完之后是以偽數(shù)組的形式存在，所以可以用遍歷的方式一個一個的綁定點擊事件
案例所用到的JS知識點： (帶有顏色的是案例中使用)
結(jié)點操作
創(chuàng)建結(jié)點
document.createElement()
document.createTextNode()
document.createTextNode()
添加結(jié)點
node.appendCild(child)(追加元素)
node.insertBefore(新的子元素,要插入的位置元素)
刪除結(jié)點
node.removeChild(child) 刪除父元素中的一個子結(jié)點
樣式屬性操作
element.style
1、element.style.backgroundColor = 'red';
2、JS里面的樣式采用駝峰命名法
3、JS修改style樣式操作，產(chǎn)生的是行內(nèi)樣式，css權(quán)重比較高
element.className
1、適用于樣式較多或者功能復(fù)雜的情況下
2、className會直接更改元素的類名，會覆蓋原先的類名
3、可以使用多類名選擇器
定時器
window.setTimeout(調(diào)用函數(shù)，[延遲的毫秒數(shù)])；
1、setTimeout()這個調(diào)用函數(shù)我們也成為回調(diào)函數(shù)callback
2、window可以省略
3、這個調(diào)用函數(shù)可以直接寫函數(shù)或者函數(shù)名或則采取字符串'字符名'
4、延遲的毫秒數(shù)省略默認(rèn)是0 單位必須是毫秒
5、定時器可能有很多，經(jīng)常給定時器賦值一個標(biāo)識符
6、只執(zhí)行一次
window.setInterval(調(diào)用函數(shù)，[延遲的毫秒數(shù)])；
1、setTimeout()這個調(diào)用函數(shù)我們也成為回調(diào)函數(shù)callback
2、window可以省略
3、這個調(diào)用函數(shù)可以直接寫函數(shù)或者函數(shù)名或則采取字符串'字符名'
4、延遲的毫秒數(shù)省略默認(rèn)是0 單位必須是毫秒
5、定時器可能有很多，經(jīng)常給定時器賦值一個標(biāo)識符
6、重復(fù)執(zhí)行
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
MQTT(消息隊列遙測傳輸協(xié)議),是一種基于發(fā)布/訂閱(publish/subscribe)模式的通訊協(xié)議,該協(xié)議構(gòu)建于TCP/IP協(xié)議上,這篇文章主要給大家介紹了關(guān)于前端MQTT詳細(xì)使用的兩種方法,需要的朋友可以參考下2024-07-07
JS中數(shù)組實現(xiàn)代碼(倒序遍歷數(shù)組,數(shù)組連接字符串)
詳解webpack+ES6+Sass搭建多頁面應(yīng)用
