使用JavaScript怎么实现一个萤火虫效果？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
CSS部分：
计算
安全
数据库
网络和加速
企业服务
<style>
.box{width: 4px;height: 5px;background: wheat;position: absolute;border-radius: 50%;}
body{background: url(../img/bg.jpg) ;}
</style>JS部分：
<script>
class Glowworm{
constructor(){
// 获取屏幕的可视区域的宽高，用作将来的随机范围
this.clientW = document.documentElement.clientWidth;
this.clientH = document.documentElement.clientHeight;
// 假设萤火虫的宽高
this.w = 20;
this.h = 20;
}
createEle(){
var div = document.createElement("div");
div.className = "box";
document.body.appendChild(div);
// 在创建元素之前一定得先生成随机坐标
div.style.left = this.x + "px";
div.style.top = this.y + "px";
// 元素创建好之后，立即运动
this.move(div);
}
randomPos(){
// 随机生成坐标
this.x = random(0,this.clientW - this.w);
this.y = random(0,this.clientH - this.h);
}
move(ele){
// 开始运动之前，还得随机生成目标
this.randomPos();
// 开始运动
move(ele,{
left:this.x,
top:this.y
},()=>{
// 一个动画结束后，重复开启当前动画，即可
this.move(ele);
})
}
}
for(var i=0;i<60;i++){
// 先得到实例
var g = new Glowworm();
// 生成随机坐标
g.randomPos();
// 再创建元素
g.createEle();
}
function random(a,b){
return Math.round(Math.random()*(a-b)+b);
}
</script>最后需要引入一个运动函数：
原生JS封装：带有px的css属性、透明度、且可以运动的函数。
function move(ele,obj,cb){
clearInterval(ele.t);
ele.t = setInterval(() => {
var i = true;
for(var attr in obj){
if(attr == "opacity"){
var iNow = getStyle(ele,attr) * 100;
}else{
var iNow = parseInt(getStyle(ele,attr));
}
let speed = (obj[attr] - iNow)/10;
speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
// 只要有一个属性没到目标：绝对不能清除计时器
if(iNow !== obj[attr]){
i = false;
}
if(attr == "opacity"){
ele.style.opacity = (iNow + speed)/100;
}else{
ele.style[attr] = iNow + speed + "px";
}
}
if(i){
clearInterval(ele.t);
if(cb){
cb();
}
// cb && cb();
}
}, 30);
}
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}看完上述内容，你们掌握使用JavaScript怎么实现一个萤火虫效果的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
