JS實現(xiàn)消滅星星案例

更新時間：2021年11月11日 09:35:14 作者：ls22

這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)消滅星星案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)消滅星星的具體代碼，供大家參考，具體內(nèi)容如下

消滅星星的效果圖：

功能需求：

1、點(diǎn)擊星星，星星消失
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');        //獲取到星星圖片
 
            //給每個星星添加點(diǎn)擊事件
            for (var i = 0; i < img.length; i++) {
                img[i].addEventListener('click', function () {
                    //點(diǎn)擊之后刪除點(diǎn)擊的img
                    div.removeChild(this);
                })
            }
            creatImg(1);
        }, 1000);

獲取圖片的時候是獲取div盒子里面所有的星星圖片，不是單獨(dú)的某一張

圖片獲取完之后是以偽數(shù)組的形式存在，所以可以用遍歷的方式一個一個的綁定點(diǎn)擊事件

案例所用到的JS知識點(diǎn)： (帶有顏色的是案例中使用)

結(jié)點(diǎn)操作

創(chuàng)建結(jié)點(diǎn)

document.createElement()
document.createTextNode()
document.createTextNode()

添加結(jié)點(diǎn)

node.appendCild(child)(追加元素)
node.insertBefore(新的子元素,要插入的位置元素)

刪除結(jié)點(diǎn)

node.removeChild(child) 刪除父元素中的一個子結(jié)點(diǎn)

樣式屬性操作

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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: