javascript技巧——消灭星星_js消灭星星设置位置怎么设置-CSDN博客

本文链接：https://blog.csdn.net/DS153/article/details/121614791

在学习javascript的时候，学习的越多，我们就可以写出来更多有趣的东西。比如我所展示的消灭星星的案例，就是在学习DOM，BOM的内容之后，所写出来的案例。那么在这里，我就来介绍一下这个消灭星星的案例是怎么做出来的。

让我们来看看消灭的星星的案例是什么样的效果：

让我们观察这个消灭星星的案例，它在实现的时候，存在两个过程：

点击星星的时候，会消灭当前的点击对象，然后生成星星
所生成的星星是随机的大小，是随机的位置
每隔一段时间，页面中也会不断生成新的星星，而且位置和大小也是一样的随机

根据这些特点，我们分布来讲解每个阶段该怎么去实现。

一、构建黑夜中的星星

当然我们需要做的事情其实最基础的地基，就是先把html结构搭建好，加上一些CSS的样式去完成这个效果，这里我展示一下我自己的代码给大家做案例，也可以用自己的想法来书写：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    li {
        list-style: none;
    }
    
    body {
        background-color: #000;
    }
    
    ul li {
        position: absolute;
        top: 100px;
        left: 300px;
        width: 60px;
        height: 60px;
        background: url(img/xingxing.gif) no-repeat;
        background-size: contain;
        cursor: pointer;
    }
</style>

<body>
    <ul>
        <li></li>
    </ul>
</body>

二、消灭星星

从我的案例，我们可以看出来，我想要制作的是生成的星星，装在ul里面，然后点击的星星，是用li生成。这样做，我们就可以使用一个好用的DOM事件方法：事件委托。通过事件代理，即使我们生成的星星不是原有的列表里面存在的，是从新生成的li，也可以实现刷新列表之后找到这个对象，利用冒泡的方式监听到新生成的li，实现可以指定我们需要的li的效果，并且消灭li。

了解我们的原理和方法，我们首先要书写生成的星星的函数，规定三个随机数，第一个和第二个是当前的位置变化随机数，第三个则是星星大小比例的随机数。创造结点插入结点之后，我们就把这些变化添加给新生成的li里面。代码如下：

function Creat() {
        var r1 = Math.random(10);
        var r2 = Math.round(Math.random() * 600);
        var r3 = Math.round(Math.random() * 1400);
        var li = document.createElement('li');
        ul.appendChild(li, ul.children);
        li.style.top = r2 + 'px';
        li.style.left = r3 + 'px';
        li.style.width = r1 * li.clientWidth + 'px';
        li.style.height = r1 * li.clientHeight + 'px';
    }

之后，我们就把函数放进事件委托里面，当我们的事件委托触发的时候，我们就移除当前点击的li，然后通过函数创造新的li，我们就完成了消灭星星的事件了。

ul.addEventListener('click', function(e) {
        Creat();
        ul.removeChild(e.target);
    });

三、持续生成星星

原理就是把生成的调用函数装入定时器中，重复调用，然后设定一个关闭的条件就可以了，我这里设定的是ul的子节点的长度。用代码展示给大家看吧：

timer = setInterval(function() {
        Creat();
        if (ul.children.length > 20) {
            clearInterval(timer);
        }
    }, 1000);

这样，消灭星星的案例就完成了。消灭星星的重要的地方是，搞清楚哪些功能要先做出来，然后再去处理。最后附上一个完整的代码给大家观看，方便大家检查代码的错误：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    li {
        list-style: none;
    }
    
    body {
        background-color: #000;
    }
    
    ul li {
        position: absolute;
        top: 100px;
        left: 300px;
        width: 60px;
        height: 60px;
        background: url(img/xingxing.gif) no-repeat;
        background-size: contain;
        cursor: pointer;
    }
</style>

<body>
    <ul>
        <li></li>
    </ul>
</body>
<script>
    var ul = document.querySelector('ul');
    var timer = null;
    ul.addEventListener('click', function(e) {
        Creat();
        ul.removeChild(e.target);
    });
    timer = setInterval(function() {
        Creat();
        if (ul.children.length > 20) {
            clearInterval(timer);
        }
    }, 1000);


    function Creat() {
        var r1 = Math.random(10);
        var r2 = Math.round(Math.random() * 600);
        var r3 = Math.round(Math.random() * 1400);
        var li = document.createElement('li');
        ul.appendChild(li, ul.children);
        li.style.top = r2 + 'px';
        li.style.left = r3 + 'px';
        li.style.width = r1 * li.clientWidth + 'px';
        li.style.height = r1 * li.clientHeight + 'px';
    }
</script>

感谢大家的观看。