事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。DOM事件流分为三个阶段，分别为：捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；目标阶段：真正的目标节点正在处理事件的阶段；冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段。捕获阶段：!DOCTYPEhtml
html

head
metacharset=UTF-8
metaname=viewportcontent=width=device-width,initial-scale=1.0
metahttp-equiv=X-UA-Compatiblecontent=ie=edge
titleDocument/title
style
.father{
overflow:hidden;
width:300px;
h

本篇文章给大家介绍一下使用纯CSS实现火焰动画效果。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。正文从下面开始。今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。嗯，长什么样子？在 CodePen 上输入关键字CSS Fire，能找到这样的：或者这样的：我们希望，仅仅使用 CSS ，效果能再更进一步吗？能不能是这样子：如何实现嗯，我们需要使用filter+mix-blend-mode的组合来完成。很多 CSS 华而不实的效果都是filter+mix-blend-mode，很有意思，但是业务中根本用不上，当然多了解了解总没坏处。如上图，整个蜡烛的骨

项目过程中，开始使用了js的requestAnimationFrame方法实现进度条，但是在数据超级多的时候非常影响性能，如此改用css去实现，优化。先贴代码：!DOCTYPEhtmlhtmlheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0metahttp-equiv=X-UA-Compatiblecontent=ie=edgetitleDocument/titlestyletype=text/css*{margin:0;padding:0}.box{width:100px;height:10px;border-radius:10px;background:#999;margin:100pxauto;border:1pxsolid#ff6780;}.child{position:relative;height:100%;border-radius:inherit;}

毫无疑问，JavaScript 是Web开发中最流行的编程语言之一。 无论使用的是 React，Vue 还是Angular，都只是 JavaScript。 JS围绕着广阔而至关重要的生态系统发展，提供了无数的框架和库，可帮助我们更快地开发应用程序。但是有时候最好退一步，尝试了解如何在没有使用库的情况下做事。 看看下面的代码片段，它们以优雅的方式解决了简单的问题，在日常项目也很实用，所以记好笔记，当遇到问题时就可直接来用使用。1.字符串反转在此示例中，我们使用展开运算符，Array的reverse方法和 String 的join方法来反转给定的字符串。constreverseStrin

我正在做一个项目，其中有一个倒序的列表。列表创建时间降序排序的，这里我想在语义和视觉上都能体现出来(让列表显示对应的编号，编号越大表示是最新的)。网上做了一些研究，找到了一些有趣的解决办法，有些很好，有些就不那么好了。最终结果类似如下:CBA接着，我们来看看有哪些实现的方式。HTML中的reversed属性简单，最直接的解决方案是HTML中的reversed属性。olreversed
liC/li
liB/li
liA/li
/olreversed属性是一个布尔属性，reversed属性规定列表顺序为降序 (9, 8, 7...)，而不是升序 (1, 2, 3...)。reversed属性除了 IE 大多数的

赋值和浅拷贝的区别一直以为对象赋值和对象浅拷贝是一样的，但实际上它们还是有很大差异。先看赋值，将一个对象赋值给一个新的对象的时候，赋的其实是该对象在栈中的地址，而不是堆中的数据。 也就是一个对象的改变就会改变另外一个对象。再看浅拷贝，浅拷贝会创建一个对象，再去遍历原始对象，如果原对象的属性值是基础类型，那么就拷贝基础类型，如果是引用类型，则拷贝的是指针。是不是有点蒙蔽？看一个例子：varobj1={
name:'前端大杂货铺',
content:['前端','生活']
}

//赋值
varobj2=obj1

obj2.n

JS数组求和的常用方法。一、for循环vararr=[1,2,3];
functionsum(arr){
vars=0;
for(vari=0;iarr.length;i++){
s+=arr[i];
}
returns;
}
console.log(sum(arr));//6二、forEach遍历vararr=[1,2,3];
functionsum(arr){
vars=0;
arr.forEach(function(val,idx,arr){
s+=val;
},0);
returns;
};
console.log(sum(arr));//6三、reducevararr=[1,2,3];
functionsum(arr){
returnarr.reduce(function(acr,cur){
returnacr+cur;
});
}
console.log(sum(arr));//6四、递归vararr=[1,2,3];
functionsum(arr){
if(arr.lengt

要比较两个函数哪个性能更好，一个直观且公平的方法就是计算两个函数分别执行完的时间。良好的性能更容易好的用户体验，而好的用户体验更能留住用户。 研究表明，由于性能问题，在88％的在线消费者对用户体验不满意后，他们不太可能会二次使用。这也是为什么要提高性能的一个重要原因。 特别是使用 JS 开发时，编写的每一行 JS 都可能会阻塞DOM，因为它是单线程语言。本次分享，我们主要介绍如何计算函数的性能。Performance.nowPerformance是一个做前端性能监控离不开的API，最好在页面完全加载完成之后再使用，因为很多值必须在页面完全

为什么要进行事件委托？首先实现一个小功能：在单击 HTML 的按钮后，把消息输出到控制台。为了实现这个小功能，你需要选择按钮，然后再用addEventListener()方法来附加事件监听器：buttonid=buttonIdClickme/button

script
document.getElementById('buttonId')
.addEventListener('click',()=console.log('Clicked!'));
/script以上就是侦听单个元素（尤其是按钮）上事件的方式。如果需要监听多个按钮上的事件呢？下面是一种可能的实现：divid=buttons
buttonclass=buttonClassClickme/button
buttoncla