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、重复执行
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Node.JS调试貌似比较麻烦,每次改完了要重启一下Node进程.GOOGLE上有个NPM模块,可以监控JS文件的更改,然后自动重启Node.但我下载后在windows里运行报错2012-01-01
这篇文章主要介绍了Javascript写入txt和读取txt文件的方法,需要的朋友可以参考下2014-02-02
下面小编就为大家带来一篇js获取元素的偏移量offset简单方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了bootstrap+jQuery实现的动态进度条功能,结合完整实例形式分析了bootstrap+jQuery实现动态进度条的具体步骤与相关操作技巧,需要的朋友可以参考下2017-05-05
本文为大家介绍下如何解决js中window.open弹出的是上次的缓存页面的问题，下面有个不错的示例，感兴趣的额朋友可以参考下2013-12-12
这篇文章主要为大家详细介绍了JavaScript实现简单进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要为大家分享了JS html时钟的制作代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了javascript使用正则实现去掉字符串前面的所有0,需要的朋友可以参考下2018-07-07
干前端这行当已经超过一个月了, 每天都会遇到新奇古怪, 甚至离奇的问题. 虽然绝大部分都是一些小问题, 但我觉得还是有必要记录下来2011-05-05
为什么JavaScript中0.1 + 0.2 != 0.3
这篇文章主要给大家介绍了关于为什么JavaScript中0.1 + 0.2 != 0.3的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
最新评论