JS實現消滅星星案例
本文例項為大家分享了實現消滅星星的具體程式碼，供大家參考，具體內容如下
消滅星星的效果圖：
功能需求：
1、點選星星，星星消失
2、每隔一秒自動生成一顆星星
3、星星的大小、出現位置是隨機的
案例程式碼及分析：
html和程式碼：
* {
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來裝下我們隨機生成的星星
- div盒子需要有一個定位(星星隨機出現的位置是根據定位的left和top值來實現的)
JS程式碼：
var div = document.querySelector('div');//獲取到div盒子
function creatImg(num) {
for (var i = 0; i < num; i++) { //隨機生成num個星星
var imgs = document.createElement('img'); //建立img標籤
imgs.style.position = 'absolute'; //給星星圖片新增絕對定位
var width = Math.floor(Math.http://www.cppcns.com 注意：使用修改width、left等帶有單位的屬性的時候一定要加上單位
creatImg(5); //呼叫函式並生成五顆星星
setInterval(function () { //每隔1s執行一次裡面的程式碼
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)http://www.cppcns.com;
獲取圖片的時候是獲取div盒子裡面所有的星星圖片，不是單獨的某一張
圖片獲取完之後是以偽陣列的形式存在，所以可以用遍歷的方式一個一個的繫結點選事件
案例所用到的JS知識點： (帶有顏色的是案例中使用)
結點操作
建立結點
document.createElement()
document.createTextNode()
document.createTwww.cppcns.comextNode()
新增結點
node.appendCild(child)(追加元素)
node.insertBefore(新的子元素,要插入的位置元素)
刪除結點
node.removeChild(child) 刪除父元素中的一個子結點
樣式屬性操作
element.style
1、element.style.backgroundColor = 'red';
2、JS裡面的樣式採用駝峰命名法
3、JS修改style樣式操作，產生的是行內樣式，css權重比較高
element.className
1、適用於樣式較多或者功能複雜的情況下
2、className會直接更改元素的類名，會覆蓋原先的類名
3、可以使用多類名選擇器
定時器
window.setTimeout(呼叫函式，[延遲的毫秒數])；
1、setTimeout()這個呼叫函式我們也成為回撥函式callback
2、window可以省略
3、這個呼叫函式可以直接寫函式或者函式名或則採取字串'字元名'
4、延遲的毫秒數省略預設是0 單位必須是毫秒
5、定時器可能有很多，經常給定時器賦值一個識別符號
6、只執行一次
window.setInterval(呼叫函式，[延遲的毫秒數])；
1、setTimeout()這個呼叫函式我們也成為回撥函式callback
2、window可以省略
3、這個呼叫函式可以直接寫函式或者函式名或則採取字串'字元名'
4、延遲的毫秒數省略預設是0 單位必須是毫秒
5、定時器可能有很多，經常給定時器賦值一個識別符號
6、重複執行
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。