文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么用JS实现消灭星星

2023-06-25 14:30

关注

这篇文章主要介绍“怎么用JS实现消灭星星”,在日常操作中,相信很多人在怎么用JS实现消灭星星问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用JS实现消灭星星”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

消灭星星的效果图:

怎么用JS实现消灭星星

功能需求:

点击星星,星星消失
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>

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

element.style.backgroundColor = 'red';
2、JS里面的样式采用驼峰命名法
3、JS修改style样式操作,产生的是行内样式,css权重比较高

element.className

适用于样式较多或者功能复杂的情况下
2、className会直接更改元素的类名,会覆盖原先的类名
3、可以使用多类名选择器

定时器

window.setTimeout(调用函数,[延迟的毫秒数]);

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

window.setInterval(调用函数,[延迟的毫秒数]);

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

到此,关于“怎么用JS实现消灭星星”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯