- 博客(48)
- 资源 (10)
- 收藏
- 关注
RSS订阅原创 Javascript数组去重方法汇总
前言关于数组去重，也算是一个比较常见的面试题了。但是有点开发经验的同学又会发现，前端数组去重的操作很少见（也可能是我个人经验不足遇到的比较少）。这是为什么呢？。我感觉可能是大部分的去重操作被后端处理了。个人见解！虽然，前端很少用到。本着爱（kuai)与(su)和(zhang)平(xin)的精神，我们也来学习一波！方法汇总一、IndexOfIndexOf是数组的一个原生方法，当你传入一个参...
2019-11-23 15:38:33
333
原创 如何仅利用css实现一个三角形（原理解析）
在前端开发的时候，我们有时候会需要用到一个三角形的形状，比如地址选择的时候，或者播放器里面播放按钮，快进快退按钮？如下图所示：我们通常情况下，会选择使用图片去做，或者使用svg去解决。我们今天换个法子，用css去实现。首先我们准备一个节点<div class="box"></div>.box{ width: 200px; height: 200p...
2019-10-29 21:24:18
957
原创 如何解决移动端击穿（穿透）问题
在移动端开发的时候，我们有时候会遇到这样一个bug：点击关闭遮罩层的时候，遮罩层下面的带有点击的元素也会被触发，给人一种击穿了页面的感觉，这是为什么呢？为了让大家更直观的看到效果，我复现了bug,并录制了一个gif。供大家参考：点击“打开弹框”按钮，显示遮罩层点击“关闭弹框”按钮，遮罩层消失，底下的连接被触发[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img...
2019-10-24 14:05:26
1023
原创 如何解决移动端300ms延迟的问题
声明一下：300ms只是行业内部的统称，其实应该在300ms-350ms之间的一个数值。移动端300ms延迟的前世今生背景： 2007 年初。苹果公司在发布首款iPhone前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对iPhone这种小屏幕浏览桌面端站点的问题。这当中最出名的，当属双击缩放(double tap to zoom)。顾名思义，即...
2019-10-20 11:20:32
552
原创 JS 对象的深拷贝和浅拷贝
现象我们先来看一个demo// 我们先申明一个变量str1，// 然后把变量str1负值（拷贝）给变量str2 // 最后对变量str2进行修改操作var str1 = 'shen'var str2 = str1str2 += 'zhiyong'console.log('str1:', str1) //shenconsole.log('str2:', str2) ...
2019-10-14 19:06:39
161
原创 你TMD的竟然在代码里面下毒！
你TMD的竟然在代码里面下毒！情景如下：沈志勇，你看一下gitlab上面xxx的项目，这个是我们的一个老项目。我们要基于这个老点的框架,添加点新的功能。老大说到！说实话，就怕接手老项目。里面的坑不知道有多少。皇天不负有心人，真的让我找到了一个坑。在一个公共组件里面，有个img图片不知何故，加了固定宽度，不仅加在了行间样式上，还给我加了‘!important’。看到代码的那一刻，我瞬间就：...
2019-09-24 07:22:30
1319
原创 CSS垂直居中、水平居中（超详细解析）
CSS垂直居中、水平居中让一个div或者一段文字亦或者一张照片居中显示的问题，面试的过程中也经常被问到。相信大家都日常的布局也经常会用到，回答出个三两种解决方案亦不是难事。但今天我细究了一下，发现还有新大陆可寻，特意留此博文总结一下，与君分享！如果你有新的方法，欢迎补充！????????????我们先从固定宽高的div开始为方便演示，默认宽高各为100px的div<div class="wrapper...
2019-09-23 21:35:31
555
原创 前端面试必考题---CSS盒模型详解
盒模型是CSS的基础中的基础。因为它的重要性，所以很多面试中都会被问题。它也成为了考察求职者基本素质的一道题。属于绝对的经典问题。这样描述，相信大家能意识到盒模型的重要性了吧。然而，在面试的过程中，我发现还有不少求职者，回答的支支吾吾，嗯！是那个，对！就是那样。说实话，我真觉得有些不妥。 今天我就重新整理一下，希望能帮到大家。什么是盒模型呢？我们先来看一种图：当浏览器对一个HTML文档...
2019-09-17 11:25:43
799
3
原创 前端性能优化之函数防抖与截流
在前端开发当中，我们都知道有些交互事件，会频繁触发。这样会导致我们的页面渲染性能，如果频繁触发接口调用的话，会直接导致服务器性能的浪费。话不多说，盘它！我们先简单列一下onresize onmousemove onkeydown srcoll ...
2019-09-11 00:26:47
802
原创 如何交换a,b值？且不使用第三个变量！几种方法汇总
如何交换a,b值？且不使用第三个变量！几种方法汇总在我们的日常面试的当中，难免会遇到这样的问题。无论你使用的是什么语言，这里我使用javascript来作为演示。一、我们先使用最简单的方法。使用临时变量。 let a = 3, b = 5 console.log('default:',`a = ${a}`, `b = ${b}`) let temp = 0 temp = a a = ...
2019-08-09 16:12:41
4993
4
原创 自定义你的前端组件（shadow-DOM）二
书接上文，上一篇博客。让我们对影子模型有了大致的了解并且可以修改其样式！现在，我们自己去写一个自己的组件！同样是利用shadow-DOM。首先，我们准备基本的html，也就是我们前面说的 shadow-hostdiv id="host"> Sorry! Your browser does not support the shadow-DOM!!!div> //我是宿主为了友
2017-06-25 15:08:38
4459
2
原创 利用原型对原始对象的方法进行扩展（javascript面试题）
javascript面试题目。 对String对象定义一个重复n次数的方法。或者是对Array对象扩展一个求和的方法。下面我就以扩展Array的求和方法作为例子。有兴趣的同学可以自己写写第一个题目。分析：由于扩展原始对象的方法，我们就必须在原型链（prototype）上面添加方法了。如果你不懂什么是原型，那就先去看我的博客面向对象。
2017-06-07 23:34:05
1279
原创 HTML中引入CSS的四种方法（前端css面试题）
忙活的一阵子，今天终于稳定了，特意来写一篇博客来温习一下之前的知识点，也是自己在面试当中碰到的面试题。在HTML里面导入CSS总共有四种方式： - 内联方式 - 嵌入方式 - 链接方式 - 导入方式一、内联方式<div style="background-color: red"></div>这样的书写方式，不用多说，大家都知道其缺点在哪里。 （1）、结构层与样式层没有分离。
2017-04-14 18:05:27
9473
原创 最熟悉的陌生属性——position
最近更新了一下简历，不久，有一个公司发来了面试邀请。于是就过去面试了一下。其中面试官的一个问题（如题），我觉得有必要写进自己的博客。position:有以下几个属性 static(默认) releative absolute fixed。总所周知，position的默认属性是 static。所以通常情况下，我们都不写。也因此这个属性很少出现在代码里面。
2017-03-11 19:37:57
770
翻译 通过javascript获取到css的rotation的值
利用javascript获取css的rotation属性值。将matrix 转化成具体的数值。
2017-03-01 18:58:18
1197
原创 HTML5使用js jq控制<audio>的播放 暂停
正所谓节后三天瘟！第一天上班脑子迷迷糊糊。一上来就写一端代码控制audio，凭借仅存的记忆，还不错！弄出来了！中间遇到了一点点小坑，特地拿出来晒晒，免得以后再吃亏！任务要求：利用js或者jq控制音频的播放，不要原生的控制器。正所谓： js未动，html先行。 （为了方便演示：其中MP3的资源，我利用线上的了） Document javascript
2017-02-06 18:36:25
13893
6
原创 css光影一闪而过 css 色泽效果
先看这个css效果。不知道什么时候，这样的css效果小小流行了一把。最早我是在京东看见的。今天在唯品会上面又看见了。于是按捺不住，我自己也动手写了一个。保存到自己的css库里面，方便日后调用！1.先准备一个div。然后准备好一张图片吧，因为图片的展示效果好一点。 Szy1000 2.接下来就全部是CSS的事情了。先给外面的div定好宽高后。一定
2016-12-08 19:30:11
11178
3
原创 js获取程序执行的时间长短 控制台之console。
今天在地铁上面刷公众号！一不小心看到了一个有意思的命令console.time();console.timeEnd();只要你把他们两一个放到要执行的程序前面，一个放到程序的结尾。就可以得到程序执行的时长。console.time("global"); var s = 0; for(var i=0;i<999999;i++){ s+=i; }
2016-12-03 10:36:58
5267
原创 IE8下的背景平铺 background-size不起作用
今天在写项目的时候，用到了background-size:cover。在chrome上面预览很正常。但是跑到IE下面一看。虽然有background-image 的属性。但是效果不能如愿。
2016-11-29 12:17:10
5547
原创 伪类after before如何使用阿里的iconfont字体
之前在做一个蛋糕项目的时候，设计给了我一个这样的图片（tips:[ “ \e60d”为蛋糕的小图标 ]）当中的蛋糕图标，我的第一反应就是用before去做。然后把iconfont图标的十六进制的编码放到content里面去。正所谓，理想很丰满，但现实很骨感！失败了！于是，我就翻起之前的文章是相关content字符编码的，戳我查看。 于是我换了一个content的值。尽然
2016-10-31 12:23:05
17328
3
原创 css垂直居中--div
面试到css的时候，人们经常会问给你一个div固定宽度. Document .container{ position: relative; width: 400px; height: 400px; border: 1px solid red; } .container .center{ width: 80px; height:
2016-09-23 11:20:48
263
原创 事件的委托
之前给li写事件的时候发现，用代码新添加的li不能像之前的事件。如同下图！后来改变看到有事件委托就可以修复这个bug!就试了试！以下是全部代码： Document li{ border: 1px solid red; } window.onload=function () { var oUl = do
2016-09-22 15:02:40
664
原创 javascript获取字符串中出现最多的字符并弹出其次数
今天在网上看面试题的时候，发现了这个问题---获取字符串中出现最多的字符并弹出其次数。百度了许多，看不大懂。然后自己学着去写了一个一、怕自己忘记了 二、希望能帮助到其他的初学者，我也是小白，所以代码比较简单。同时注释比较多 方便理解！ Document window.onload=function () { var str = 'afaafdff'; v
2016-09-22 11:04:02
1100
原创 addEventListener()及attachEvent()区别
今天仔细看了一下addEventListener() attachEvent()写篇博客记忆一下。html代码很简单一句话： Document js语法分别是 :element.addEventListener(event, function, useCapture) //FFattachEvent(event,function) //IE
2016-09-21 18:14:28
295
原创 element.offsetWidth 与 element.style.width的区别
请先 下载demo事例下载后，请依次点击div，仔细观看弹出框里面的内容，仔细比较一下，你就能看到区别。不愿意下载的童鞋也可以自己复制啊！html: Hello, World 我是div1点我看看我的类型 我是div2点我看看我的类型 我是div3我有padding border width
2016-09-10 23:38:42
1991
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人