自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

szy1000的专栏

生命不息,bug不止!

  • 博客(48)
  • 资源 (8)

原创 Javascript数组去重方法汇总

前言关于数组去重,也算是一个比较常见的面试题了。但是有点开发经验的同学又会发现,前端数组去重的操作很少见(也可能是我个人经验不足遇到的比较少)。这是为什么呢?。我感觉可能是大部分的去重操作被后端处理了。个人见解!虽然,前端很少用到。本着爱(kuai)与(su)和(zhang)平(xin)的精神,我们也来学习一波!方法汇总一、IndexOfIndexOf是数组的一个原生方法,当你传入一个参...

2019-11-23 15:38:33 76

原创 如何仅利用css实现一个三角形(原理解析)

在前端开发的时候,我们有时候会需要用到一个三角形的形状,比如地址选择的时候,或者播放器里面播放按钮,快进快退按钮?如下图所示:我们通常情况下,会选择使用图片去做,或者使用svg去解决。我们今天换个法子,用css去实现。首先我们准备一个节点<div class="box"></div>.box{ width: 200px; height: 200p...

2019-10-29 21:24:18 271

原创 如何解决移动端击穿(穿透)问题

在移动端开发的时候,我们有时候会遇到这样一个bug:点击关闭遮罩层的时候,遮罩层下面的带有点击的元素也会被触发,给人一种击穿了页面的感觉,这是为什么呢?为了让大家更直观的看到效果,我复现了bug,并录制了一个gif。供大家参考:点击“打开弹框”按钮,显示遮罩层点击“关闭弹框”按钮,遮罩层消失,底下的连接被触发[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img...

2019-10-24 14:05:26 282

原创 如何解决移动端300ms延迟的问题

声明一下:300ms只是行业内部的统称,其实应该在300ms-350ms之间的一个数值。移动端300ms延迟的前世今生背景: 2007 年初。苹果公司在发布首款iPhone前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定,应对iPhone这种小屏幕浏览桌面端站点的问题。这当中最出名的,当属双击缩放(double tap to zoom)。顾名思义,即...

2019-10-20 11:20:32 126

原创 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 67

原创 你TMD的竟然在代码里面下毒!

你TMD的竟然在代码里面下毒!情景如下:沈志勇,你看一下gitlab上面xxx的项目,这个是我们的一个老项目。我们要基于这个老点的框架,添加点新的功能。老大说到!说实话,就怕接手老项目。里面的坑不知道有多少。皇天不负有心人,真的让我找到了一个坑。在一个公共组件里面,有个img图片不知何故,加了固定宽度,不仅加在了行间样式上,还给我加了‘!important’。看到代码的那一刻,我瞬间就:...

2019-09-24 07:22:30 395

原创 CSS垂直居中、水平居中(超详细解析)

CSS垂直居中、水平居中让一个div或者一段文字亦或者一张照片居中显示的问题,面试的过程中也经常被问到。相信大家都日常的布局也经常会用到,回答出个三两种解决方案亦不是难事。但今天我细究了一下,发现还有新大陆可寻,特意留此博文总结一下,与君分享!如果你有新的方法,欢迎补充!????????????我们先从固定宽高的div开始为方便演示,默认宽高各为100px的div<div class="wrapper...

2019-09-23 21:35:31 253

原创 前端面试必考题---CSS盒模型详解

盒模型是CSS的基础中的基础。因为它的重要性,所以很多面试中都会被问题。它也成为了考察求职者基本素质的一道题。属于绝对的经典问题。这样描述,相信大家能意识到盒模型的重要性了吧。然而,在面试的过程中,我发现还有不少求职者,回答的支支吾吾,嗯!是那个,对!就是那样。说实话,我真觉得有些不妥。 今天我就重新整理一下,希望能帮到大家。什么是盒模型呢?我们先来看一种图:当浏览器对一个HTML文档...

2019-09-17 11:25:43 402 1

原创 前端性能优化之函数防抖与截流

在前端开发当中,我们都知道有些交互事件,会频繁触发。这样会导致我们的页面渲染性能,如果频繁触发接口调用的话,会直接导致服务器性能的浪费。话不多说,盘它!我们先简单列一下onresize onmousemove onkeydown srcoll ...

2019-09-11 00:26:47 232

原创 如何交换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 370 4

原创 height:100%不起作用!

css: height: 100% 不起作用!高度不能铺满全屏!

2017-07-21 12:37:07 1985 2

原创 自定义你的前端组件(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 3569 2

原创 你见或者不见,我就在那里。不离不弃!--(shadow DOM)(前端冷知识)

shadow-DOM: 就是影子模型!一般我们是看不到它的。

2017-06-10 12:59:10 3882

原创 左侧固定宽右侧自适应(CSS布局面试题)

左侧固定宽度,右边自适应这是一个很常用的css布局,尤其是在后台页面当中,使用频繁。

2017-06-08 23:40:15 8998

原创 利用原型对原始对象的方法进行扩展(javascript面试题)

javascript面试题目。 对String对象定义一个重复n次数的方法。或者是对Array对象扩展一个求和的方法。下面我就以扩展Array的求和方法作为例子。有兴趣的同学可以自己写写第一个题目。分析:由于扩展原始对象的方法,我们就必须在原型链(prototype)上面添加方法了。如果你不懂什么是原型,那就先去看我的博客面向对象。

2017-06-07 23:34:05 1071

原创 写在前面!!!

HTML前端入门 电脑设置。windows & mac 显示文件后缀名(扩展名)及显示影藏文件。

2017-05-23 11:48:26 662

原创 HTML中引入CSS的四种方法(前端css面试题)

忙活的一阵子,今天终于稳定了,特意来写一篇博客来温习一下之前的知识点,也是自己在面试当中碰到的面试题。在HTML里面导入CSS总共有四种方式: - 内联方式 - 嵌入方式 - 链接方式 - 导入方式一、内联方式<div style="background-color: red"></div>这样的书写方式,不用多说,大家都知道其缺点在哪里。 (1)、结构层与样式层没有分离。

2017-04-14 18:05:27 3963

原创 最熟悉的陌生属性——position

最近更新了一下简历,不久,有一个公司发来了面试邀请。于是就过去面试了一下。其中面试官的一个问题(如题),我觉得有必要写进自己的博客。position:有以下几个属性 static(默认) releative absolute fixed。总所周知,position的默认属性是 static。所以通常情况下,我们都不写。也因此这个属性很少出现在代码里面。

2017-03-11 19:37:57 579

原创 你是我的小呀小cookie

cookie的设置 删除 获取。修复chrome下面的时间格式bug。

2017-03-09 23:26:39 331

翻译 通过javascript获取到css的rotation的值

利用javascript获取css的rotation属性值。将matrix 转化成具体的数值。

2017-03-01 18:58:18 846

原创 手机号,邮箱 身份证号验证

验证邮箱 电话 正则验证邮箱 电话

2017-02-26 13:50:26 1062 2

原创 正则表达式的简单入门

正则表达式的简单入门笔记,里面包含正则的表达式中,许多标点符号的具体意义。方便大家快速入门。读懂配置文件。

2017-02-24 20:21:33 268

原创 一道经典的css面试题。固定底部(sticky footer)

固定底部 sticky footer

2017-02-19 16:19:09 1056

原创 HTML5使用js jq控制<audio>的播放 暂停

正所谓节后三天瘟!第一天上班脑子迷迷糊糊。一上来就写一端代码控制audio,凭借仅存的记忆,还不错!弄出来了!中间遇到了一点点小坑,特地拿出来晒晒,免得以后再吃亏!任务要求:利用js或者jq控制音频的播放,不要原生的控制器。正所谓: js未动,html先行。 (为了方便演示:其中MP3的资源,我利用线上的了) Document javascript

2017-02-06 18:36:25 12096 6

原创 腻害了!我的console.log

腻害了!我的console.log

2016-12-29 19:39:17 782

原创 css截取td里面的内容 如何固定td th的宽度

css截取td里面的内容 如何固定td th的宽度

2016-12-23 15:48:25 16647 2

原创 css光影一闪而过 css 色泽效果

先看这个css效果。不知道什么时候,这样的css效果小小流行了一把。最早我是在京东看见的。今天在唯品会上面又看见了。于是按捺不住,我自己也动手写了一个。保存到自己的css库里面,方便日后调用!1.先准备一个div。然后准备好一张图片吧,因为图片的展示效果好一点。 Szy1000 2.接下来就全部是CSS的事情了。先给外面的div定好宽高后。一定

2016-12-08 19:30:11 7697 2

原创 图片transform其父级的border-radius失效

当transform遇见border-radius就会碰出bug的火花

2016-12-05 12:36:12 2431 2

原创 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 4261

原创 js如何获取css里面的样式 兼容IE

aa

2016-11-29 17:46:27 3012

原创 IE8下的背景平铺 background-size不起作用

今天在写项目的时候,用到了background-size:cover。在chrome上面预览很正常。但是跑到IE下面一看。虽然有background-image 的属性。但是效果不能如愿。

2016-11-29 12:17:10 4342

原创 伪类after before如何使用阿里的iconfont字体

之前在做一个蛋糕项目的时候,设计给了我一个这样的图片(tips:[ “ \e60d”为蛋糕的小图标 ])当中的蛋糕图标,我的第一反应就是用before去做。然后把iconfont图标的十六进制的编码放到content里面去。正所谓,理想很丰满,但现实很骨感!失败了!于是,我就翻起之前的文章是相关content字符编码的,戳我查看。 于是我换了一个content的值。尽然

2016-10-31 12:23:05 12852 3

原创 css垂直居中--img p

因为p标签和img居中的方法 我知道的不多 就放到一起了!

2016-09-24 13:40:25 1571

原创 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 200

原创 事件的委托

之前给li写事件的时候发现,用代码新添加的li不能像之前的事件。如同下图!后来改变看到有事件委托就可以修复这个bug!就试了试!以下是全部代码: Document li{ border: 1px solid red; } window.onload=function () { var oUl = do

2016-09-22 15:02:40 426

原创 javascript获取字符串中出现最多的字符并弹出其次数

今天在网上看面试题的时候,发现了这个问题---获取字符串中出现最多的字符并弹出其次数。百度了许多,看不大懂。然后自己学着去写了一个一、怕自己忘记了 二、希望能帮助到其他的初学者,我也是小白,所以代码比较简单。同时注释比较多 方便理解! Document window.onload=function () { var str = 'afaafdff'; v

2016-09-22 11:04:02 961

原创 addEventListener()及attachEvent()区别

今天仔细看了一下addEventListener() attachEvent()写篇博客记忆一下。html代码很简单一句话: Document js语法分别是 :element.addEventListener(event, function, useCapture)  //FFattachEvent(event,function)   //IE

2016-09-21 18:14:28 201

原创 useCapture:true与flase的表现区别 事件的冒泡与捕获

Document 今天看了一下事件绑定,写篇博客记忆一下!

2016-09-21 17:41:06 5894 1

原创 element.offsetWidth 与 element.style.width的区别

请先 下载demo事例下载后,请依次点击div,仔细观看弹出框里面的内容,仔细比较一下,你就能看到区别。不愿意下载的童鞋也可以自己复制啊!html: Hello, World 我是div1点我看看我的类型 我是div2点我看看我的类型 我是div3我有padding border width

2016-09-10 23:38:42 1327

原创 javascript 书写无缝滚动。

qq

2016-09-10 15:40:46 319

index.html

我博客的代码事例,打扰到大家了。还请见谅

2019-09-11

解决border-radius失效问题

解决border-radius失效问题

2016-12-09

css光影效果

模拟京东的光影效果!

2016-12-08

js获取样式表里面的内容

利用js获取到css里面的内容

2016-12-08

offsetWidth与style.width的区别

点击div 你就可以清楚的看到 offsetWidth和style.width的区别

2016-09-11

javascript 无缝滚动

利用原生的js,写的一个简单demo!

2016-09-10

WampServer2.1a-x32

php服务器

2016-09-05

css阴影代码

我个人博客里面所用的资源,不是什么好东西。不幸被亲搜到,耽误你的时间了。抱歉!

2016-09-01

空空如也

空空如也
提示
确定要删除当前文章?
取消 删除