JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

JS实现消灭星星案例

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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)&nbsp;    删除父元素中的一个子结点

样式属性操作

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、只执行一次

@H_469_126@window.setInterval(调用函数，[延迟的毫秒数])；

1、setTimeout()这个调用函数我们也成为回调函数callback
2、window可以省略
3、这个调用函数可以直接写函数或者函数名或则采取字符串'字符名'
4、延迟的毫秒数省略默认是0   单位必须是毫秒
5、定时器可能有很多，经常给定时器赋值一个标识符
6、重复执行

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

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的JS实现消灭星星案例全部内容，希望文章能够帮你解决JS实现消灭星星案例所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：jsjs
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程