mayue24-优快云博客

原创你不知道的 flex 布局

网页的布局是css的一个重点应用，布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。但是对于一些特殊的布局就不是那么好实现了。在2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。接下来详细介绍下flex布局。一、f...

2018-07-09 14:34:17 299

原创 CSS的那些魔幻属性

css中有一些你不注意的冷知识，但往往是这些你不注意的冷知识，却阻止我们的项目进度，如果你看了，我相信你也会从中有所受益为什么此处li标签内的p元素看起来独自撑开了一行代码如下：<ul> <li class="left"> <p style="display: inline-block;">这是一个很撑很撑的发的发发发送达方式的地方非地...

2018-07-08 17:40:50 295

原创 Promise对象的用法

1）什么是Promise对象Promise是异步编程的一种解决方案，简单来说就是一个容器里面保存着某个未来才会结束的事件 (通常是一个异步操作)的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。2）Promise对象有以下2个特点：1.对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending(进行中)、Resolved(已完成)和R...

2018-07-07 08:46:39 460

原创 CSS基础面试题（附答案）

1、用纯css创建一个三角形的原理是什么？首先，需要把元素的宽高设置为0，然后设置边框样式。width: 0;height: 0;border-top: 40px solid transparent;border-left: 40px solid transparent;border-right: 40px solid transparent;border-bottom: 40p...

2018-07-06 08:54:55 2349

原创 ES6中关于reduce、set和数组重构

1、数组的 reduce方法1）使用deduce代替map+ filter要把数组中的值进行计算后再滤掉一些值，然后输出新数组。一般我们使用 map 和 filter 方法组合来达到这个目的，但这也意味着你需要迭代这个数组两次。而我们的reduce方法只需要迭代一次数组就可以实现同样的效果。 eg：把数组中的值除以2，并且返回小于10的值：const Array = [10,...

2018-07-06 07:31:57 1660

原创 JavaScript 几个易错知识点

1.面向对象编程举一个例子说明一下：面向对象思想：猫.抓(老鼠)面向过程思想：抓.(猫,老鼠)//面向对象//定义猫（名字）let Cat=function(name){ this.name=name;}//动作Cat.prototype={ catch:function(someThing){ console.log(`${this.name}抓$...

2018-07-04 17:02:33 253

1. Ramda拥有超过12K的stars，Ramda库可以用来在JavaScript中函数式编程，专门为函数式编程风格而设计，更容易创建函数式 pipeline、且从不改变用户已有数据。Ramda主要特征如下：1）Ramda 强调更加纯粹的函数式风格。数据不变性和函数无副作用是其核心设计理念。这可以帮助你使用简洁、优雅的代码来完成工作。2）Ramda 函数本身都是自动柯里化的。这可以让你在只提供...

2018-07-04 08:22:43 229

原创走在前端最前沿之前端面试题

1）ajax是什么？异步的javascript+Xmlvar xhr = new XmlHttpRequest() 或者 new ActiveXObject() xhr.onreadyChange = function(){ if(xhr.readyState = 4){ if(xhr.status == 200){ var tes...

2018-07-03 20:19:23 567

原创常见的响应式布局解决方法

由于设备的分辨率不同，我们就用响应式布局来解决设备分辨率不同的问题，常见的解决方法有px视口、媒体查询、百分比、rem、和vw/vh等方法来实现响应式布局。接下来介绍下个种方法。一、px和视口在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽高以及定位信息。在pc端，通常认为css中,1px所表示的真实长度是固定的。那么什么是像素？像素是网页布局的基础，一个像素表示了计算机屏幕所能显...

2018-07-03 09:34:22 4829

原创简单的原生js轮播图

轮播图我们在网站中经常看到，主要就是为了在有限的空间内展示出更多的内容，同时也增加了界面的特效，让页面不是那么死版，让界面动起来，看着更加舒服，话不多说，代码如下：效果：HTML代码：<div id="slide">  <div id="pic"> <div class="current"&

2018-07-02 21:09:45 326

原创 setInterval()和setTimeout()区别

定义setTimeout()和setInterval()经常被用来处理延时和定时任务。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。setTimeout()只执行一次，而setInterval可以多次调用。很简单的定义，使用起来也很简单，但有时候我们的代码并不...

2018-07-02 09:12:50 32670 2

原创 jQuary实现背景飘雪效果

css样式：body{ padding: 0; margin: 0; overflow: hidden; background: #000;}JS代码：var flackColor = "#fff"; //雪片颜色var newOne = 10;//间隔10毫秒var flake = $("<div></div>").html("❄").css("...

2018-07-01 19:20:40 560

原创前端数组精选题

一、数组排序遍历数组，把拿到的数据和定义的temp值比较（这里是从小到大）如果数据大于temp值，则将该数据赋值给temp，继续进行遍历。var arr = [3,7,9,1,5,10];var temp = 0;for (var i = 0; i < arr.length; i++){ for (var j = 0; j < arr.length - i; j++){ ...

2018-06-30 17:53:20 374

原创一分钟掌握IE与FF(Firefox)脚本兼容性问题

一、window.event 表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象。二、获取事件源 IE用srcElement获取事件源，而FF用target获取事件源。三、添加、去除事件 IE：添加事件：element.attachEvent("onclick",function(){}); 去除事件：element.de...

2018-06-30 08:52:03 955

原创分分钟学会Canvas绘制验证码

在登录时我们经常遇到输入验证码，看完这篇文章你也可以制作出验证码，让验证码不再神奇。效果如图：HTML代码：<canvas id="canvas"></canvas><button id="btn">点击换一张</button>JS代码：var canvas = document.getElementById("canvas");//获

2018-06-29 20:15:07 1288

原创 cookies, sessionStorage和localStorage的区别

(1) cookies数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。(2) sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。(3) cookie数据不能超过4k，只适合保存很小的数据。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。(...

2018-06-29 08:24:43 170

原创 js阻止冒泡事件和默认事件的方法兼容性写法

HTML代码：<div id="swap"> <div id="box"> <a href="http://www.baidu.com" id="btn">点我</a> </div></div> js代码： var swap=do

2018-06-28 19:36:11 584

原创常见的浏览器内核

一、Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。二、Gecko内核代表作品Mo...

2018-06-28 07:56:13 296

原创 DOM中常见的节点操作方法

1.创建节点 a.创建元素节点：document.createElement("div"); b.创建文本节点：document.createNode("Hello world");2.插入节点 a.在父元素中插入节点：parentNode.appendChild(newNode); b.将节点插入到父元素之前：parentNode.insertBefore(newNod...

2018-06-27 20:44:59 1711

原创用CSS实现垂直居中的方法

布局中经常见到垂直居中效果，为实现良好的兼容性，PC端实现实现这一效果的方法一般是通过绝对定位，table-cell，负边距等。CSS让垂直居中的方法更加多样化，接下来介绍几种实现垂直居中的方法：垂直居中效果：html代码：外部div基础CSS样式：1.绝对定位和负边距CSS：2.绝对定位和0的结合相较于第一种方法这种方法更适合用于移动端开发3.table-cell方法注意：此处类名为.box2的...

2018-06-27 20:11:10 192

mayue24的博客