全栈工程
  • 深入了解DOM事件流的三个阶段

    事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即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

    2021-01-20 0 0 0 0
  • HTML的10个最佳实践

    2021-01-20 0 0 0 0
  • 纯CSS如何实现火焰动画效果?(实例介绍)

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

    2021-01-19 0 0 0 0
  • css3如何实现进度条动画效果?(代码示例)

    项目过程中,开始使用了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;}

    2021-01-19 0 0 0 0
  • 10个实用的 ES6 方法

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

    2021-01-14 0 0 0 0
  • HTML/CSS实现逆序列表(列表编号倒序)

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

    2021-01-14 0 0 0 0
  • JS对象赋值和浅拷贝的区别是什么?

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

    //赋值
    varobj2=obj1

    obj2.n

    2020-11-25 0 0 0 0
  • 5种JS数组求和的常用方法(分享)

    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

    2020-11-23 0 0 0 0
  • 如何计算JavaScript函数的性能

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

    2020-11-23 0 0 0 0
  • 谈谈 JavaScript 中的事件委托

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

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

    2020-11-22 0 0 0 0
共有34页首页上一页123456789下一页尾页
.
更多

1589982338979126.png


ots网络社区

www.ots-sec.cn

联系方式
更多

投稿邮箱:1481840992@qq.com

交流群2群:622534175

ots网络社区3群:1078548359

关注我们
更多
技术支持: 建站ABC | 管理登录