溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么用JS實現消滅星星”，在日常操作中，相信很多人在怎么用JS實現消滅星星問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用JS實現消滅星星”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
消滅星星的效果圖：
1、點擊星星，星星消失
2、每隔一秒自動生成一顆星星
3、星星的大小、出現位置是隨機的
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
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、重復執行
到此，關于“怎么用JS實現消滅星星”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
