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、重复执行

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现消灭星星(web简易版)

    昨天看视频之后,整理思路,自己完成了简易版消灭星星 思路: 模块1:初始化 初始化总分数.当前分数.背景图.选择的星星分数 初始化星星(生成二维数组,对二维数组的每一个对象设置样式(长.宽.背景图),生成二维数组个div元素节点插入到游戏面板中) 模块2:预判 判断:  鼠标移动到某一个方块,判断上下左右是否有连接着的小方块(采用递归方法),然后将其存储到数组choose[],移到其他方块时,choose置为空 闪烁:  将已选中的小方块设置样式(缩放) 显示选择分数:  设置初始分数和递增分数

  • javascript实现消灭星星小游戏简单版

    javascript实现消灭星星小游戏简单版

    来看看实现的效果图 游戏规则:双击颜色一样的星星,双击相同的部分就消失了 实例代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" content="target-densitydpi=320,width=640,user-scalable=no" /> <noscript><meta http-equiv="refresh"

  • 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; bac

  • JS实现消灭星星小游戏

    JS实现消灭星星小游戏

    本文实例为大家分享了JS实现消灭星星小游戏的具体代码,供大家参考,具体内容如下 先看看效果图: 先准备css和一张星星图片,很简单,body背景设为黑色. <style>         body {             background-color: black;         } </style> 就直接写JS代码了,解释都写在注释里面了 <script>         function start() {             //设置一个定时器,重

  • JS实现五星好评案例

    本文实例为大家分享了JS实现五星好评案例的具体代码,供大家参考,具体内容如下 业务逻辑是我需要先创建出所有我需要用到的标签和样式再写出我们星星对应的行为,分数对应行为,笑脸对应行为,点击对应行为,抽象化出来,方便维护.并且在点击后我们抛出事件,记录下对应的name,分数等信息,保存在cookie中. 在编写过程中,一个是位置问题,很容易出现在没有创建就进行appendChild,第二个就是在添加行为时如何调整星星,笑脸的位置. <!DOCTYPE html> <html lang=&qu

  • vue.js+boostrap项目实践(案例详解)

    vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

  • js实现飞入星星特效代码

    本文实例讲述了js实现飞入星星特效代码,分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: <html> <head> <title>星空极速飞入效果</title> <style type="text/css"> <!-- body { background-color: #000066; } --> </style> </head> <body> <scr

  • js实现商城星星评分的效果

    在这里和朋友们分享一个使用js实现商城星星评分的效果,希望能给大家点帮助,当然更好的特效还有待大家完善. html如下: <div class="starts"> <ul id="pingStar"> <li rel="1" title="特别差,给1分"></li> <li rel="2" title="很差,给2分"><

  • js实现的星星评分功能函数

    本文实例讲述了js实现的星星评分功能函数.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

  • JS实现点星星消除小游戏

    本文实例为大家分享了JS实现点星星消除游戏的具体代码,供大家参考,具体内容如下 步骤及游戏功能分析: 1.网页上的随机出现小星星: 2.点击小星星,小星星消失: 绑定一个onclick事件:     对象.事件 = 事件处理函数:     注意:要想删除某个节点,必须找到它的父节点     注意:在绑定事件中this可以直接使用 3.添加功能开始游戏 4.添加功能暂停游戏 5.游戏进度条功能 <style type="text/css"> #d2{ width: 100px

随机推荐