溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么用JS實(shí)現(xiàn)消滅星星

發(fā)布時(shí)間：2021-11-11 11:05:13 來(lái)源：億速云 閱讀：155 作者：iii 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要介紹“怎么用JS實(shí)現(xiàn)消滅星星”，在日常操作中，相信很多人在怎么用JS實(shí)現(xiàn)消滅星星問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么用JS實(shí)現(xiàn)消滅星星”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

消滅星星的效果圖：

怎么用JS實(shí)現(xiàn)消滅星星

功能需求：

1、點(diǎn)擊星星，星星消失
2、每隔一秒自動(dòng)生成一顆星星
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里面我們只需要一個(gè)div來(lái)裝下我們隨機(jī)生成的星星

  • div盒子需要有一個(gè)定位(星星隨機(jī)出現(xiàn)的位置是根據(jù)定位的left和top值來(lái)實(shí)現(xiàn)的)

JS代碼：

var div = document.querySelector('div');//獲取到div盒子
        function creatImg(num) {
            for (var i = 0; i < num; i++) {    //隨機(jī)生成num個(gè)星星
 
                var imgs = document.createElement('img');   //創(chuàng)建img標(biāo)簽
                imgs.style.position = 'absolute';   //給星星圖片添加絕對(duì)定位
                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等帶有單位的屬性的時(shí)候一定要加上單位

creatImg(5);    //調(diào)用函數(shù)并生成五顆星星
        setInterval(function () {    //每隔1s執(zhí)行一次里面的代碼
 
            var img = document.querySelectorAll('img');        //獲取到星星圖片
 
            //給每個(gè)星星添加點(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);

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

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

 案例所用到的JS知識(shí)點(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)     刪除父元素中的一個(gè)子結(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會(huì)直接更改元素的類名，會(huì)覆蓋原先的類名
3、可以使用多類名選擇器

定時(shí)器

window.setTimeout(調(diào)用函數(shù)，[延遲的毫秒數(shù)])；

1、setTimeout()這個(gè)調(diào)用函數(shù)我們也成為回調(diào)函數(shù)callback
2、window可以省略
3、這個(gè)調(diào)用函數(shù)可以直接寫函數(shù)或者函數(shù)名或則采取字符串'字符名'
4、延遲的毫秒數(shù)省略默認(rèn)是0   單位必須是毫秒
5、定時(shí)器可能有很多，經(jīng)常給定時(shí)器賦值一個(gè)標(biāo)識(shí)符
6、只執(zhí)行一次

window.setInterval(調(diào)用函數(shù)，[延遲的毫秒數(shù)])；

1、setTimeout()這個(gè)調(diào)用函數(shù)我們也成為回調(diào)函數(shù)callback
2、window可以省略
3、這個(gè)調(diào)用函數(shù)可以直接寫函數(shù)或者函數(shù)名或則采取字符串'字符名'
4、延遲的毫秒數(shù)省略默認(rèn)是0   單位必須是毫秒
5、定時(shí)器可能有很多，經(jīng)常給定時(shí)器賦值一個(gè)標(biāo)識(shí)符
6、重復(fù)執(zhí)行

到此，關(guān)于“怎么用JS實(shí)現(xiàn)消滅星星”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手