消滅星星的效果圖：
看著很流弊的樣子 其實代碼也只有一點點，但是還是有點點流弊
功能需求：
- 點擊星星，星星消失
- 每隔一秒自動生成一顆星星
- 星星的大小、出現位置是隨機的
案例代碼及分析：
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來裝下我們隨機生成的星星
- 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.random() * (50 - 10 + 1) + 10);
var height = width; //隨機生成寬度和高度，星星的寬高一致
var top = Math.floor(Math.random() * (450 - 0 + 1) + 0);
var left = Math.floor(Math.random() * (950 - 0 + 1) + 0);
//將星星的寬、高、left、top值全部修改為隨機生成的
imgs.style.width = width + 'px';
imgs.style.height = height + 'px';
imgs.style.left = left + 'px';
imgs.style.top = top + 'px';
//將星星圖片的鏈接添加到img標簽中
imgs.src = 'images/xingxing.gif';
//將創建的img標簽添加到div盒子里面
div.appendChild(imgs);
}
}注意：使用修改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);
獲取圖片的時候是獲取div盒子里面所有的星星圖片，不是單獨的某一張
圖片獲取完之后是以偽陣列的形式存在，所以可以用遍歷的方式一個一個的系結點擊事件
案例所用到的JS知識點：(帶有顏色的是案例中使用)
結點操作
創建結點
- document.createElement()
- document.createTextNode()
- document.createTextNode()
添加結點
- node.appendCild(child)(追加元素)
- node.insertBefore(新的子元素,要插入的位置元素)
洗掉結點
- node.removeChild(child) 洗掉父元素中的一個子結點
樣式屬性操作
element.style
- element.style.backgroundColor = 'red';
- JS里面的樣式采用駝峰命名法
- JS修改style樣式操作，產生的是行內樣式，css權重比較高
element.className
- 適用于樣式較多或者功能復雜的情況下
- className會直接更改元素的類名，會覆寫原先的類名
- 可以使用多類名選擇器
定時器
window.setTimeout(呼叫函式，[延遲的毫秒數])；
- setTimeout()這個呼叫函式我們也成為回呼函式callback
- window可以省略
- 這個呼叫函式可以直接寫函式或者函式名或則采取字串'字符名'
- 延遲的毫秒數省略默認是0 單位必須是毫秒
- 定時器可能有很多，經常給定時器賦值一個識別符號
- 只執行一次
window.setInterval(呼叫函式，[延遲的毫秒數])；
- setTimeout()這個呼叫函式我們也成為回呼函式callback
- window可以省略
- 這個呼叫函式可以直接寫函式或者函式名或則采取字串'字符名'
- 延遲的毫秒數省略默認是0 單位必須是毫秒
- 定時器可能有很多，經常給定時器賦值一個識別符號
- 重復執行
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/355669.html
標籤：其他