原生JS实现萤火虫效果

本文实例为大家分享了JS实现萤火虫效果的具体代码，供大家参考，具体内容如下

上代码之前，先看一下效果：

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]; }}

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

原生JS 代码和用 jQuery 实现效果各有什么优劣势

各种封装，包括jQuery, dojo等等，主要目的就是为了省心，拿jQuery来说：jQuery对不同浏览器的事件,DOM对象,都进行了封装,各种操作都可以直接兼容各种浏览器, 要知道, 不同浏览器的区别不仅仅是在CSS里写”-webkit-“还是”filter”的区别, 连事件模型这种底层的东西都不一样jQuery特有的CSS-LIKE选择器, 链式写法, 封装的各类animate函数, 封装了的异步加载, 都大幅提高了开发效率, 减少重复劳动jQuery用delay和一系列的函数封装了AJAX操作, 这个功能目测还在不断改进和完善. 反正是比JS省心就是了.其他就是有些常用函数JQ有所以不用自己写了,你比如浏览器检测…插件不断丰富, 资料丰富 等等当然,这样也导致了jQuery比原生JS慢上 10倍(chrome)~100倍(ie). 具体数忘了, 反正是这个数量级的…尤其是有些人喜欢滥用选择器和不用链式写法所以说, 如果只用一句JS就可以解决的问题, 就不要用JQ了啊亲…亲测$(‘#x’)比getElementById(‘x’)慢40倍jQuery也不见得适用所有情况就是了, 网站规模更大就会凸显jQuery的不足. 比如没有命名空间- -. 很多网站是根据自己的情况建立自己的函数库.题外话, 如果项目相比”一个网页”更偏向”一个APP”的情况, jQuery不见得是最合适的

原生js方法怎么实现的

原生的JS函数或方法一般都是由运行环境提供，运行环境分多个。
1.浏览器，一般浏览器都是用系统API写的，对WINDOWS，UNIX/LINUX系统是，C语言编写，相应的js原生方法，用C语言实现；特例：MAC OS 与IOS由OBJECTIVE-C,SWIFT提供系统API，相应的js原生方法用OBJECTIVE-C或SWIFT实现。

3.node.js,mongodb，C语言实现，js原生方法由C语言实现。
4.微软excel2010及以后版本，有可能C#或.net实现，具体不详，js原生方法由C#或.net实现。

原生javascript，想要实现AB切换效果

CSS

什么是原生JS

原生态JS是指遵循ECMAscript标准的javascript，不同于微软的jscript也不依赖于任何框架，依托于浏览器标准引擎的脚本语言。
jquery是在原生态的js上集成的框架资源，使用jquery并不代表代码就不是你写的，区别在于使用jquery只是使用了它的语法，更利于兼容以及实现，jquery已经将常规的js兼容问题解决，所以使用起来出现不兼容的情况会更少，更利于开发。

扩展资料
JS基本特点：
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1.是一种解释性脚本语言（代码不进行预编译）。

2.主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

3.可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

4.跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。

Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

用原生JS，怎样实现的页面中所有a标签都在新窗口中打开

1.根据标签a获取所有标签
var aList = document.getElementsByTagName(‘a’);//获取所有的标签a

2.循环获取的标签，修改target为_blank（新窗口）方式。

真实项目中，你们怎么用JS显示效果，还是用Jquery等框架？还是修改别人的插件？

一般情况下我们这边的项目都是使用jquery去处理前台业务的。jquery的选择器非常的强大，很有必要学习下使用方法。

使用jquery，理解并掌握闭包是新手到熟手的一个门槛。