zzxboy1-CSDN博客

原创关于绝对定位元素居中的流体特性和top:50%的兼容性问题

在我们的一般认知中，对元素使用绝对定位时，margin: auto肯定就失效了，margin：auto只对指定了宽高的元素生效，是通过计算得来的。绝对定位元素脱离文档流，理论上自然是无法使用margin:auto的。但事实上并非如此，我们往往在不考虑浏览器兼容性的情况下使用 top: 50%; transform:translate(0, -50%)来实现垂直居中或者对明确知道高度的元素使用负mar

2017-07-18 16:47:34 1930

原创 [leetcode javascript解题]N-Queens

该题描述如下： The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no two queens attack each other. Given an integer n, return all distinct solutions to the n-queens

2017-07-18 11:22:21 625

原创图片上传显示进度条和预览图的前端实现之预览图篇

上一集我们说到了进度条的实现，之后就鸽了很久，终于到写这一篇的时候了，说到底一方面是自己太忙，第二方面是自己太懒了。在图片未上传完成之前不可能拿到上传后返回的uri通过线上地址渲染，同时服务端图片预览虽然也可以实现，但比较麻烦，所以，这里的预览图，其实是拿到本地图片资源后，转换为uri，在浏览器端直接使用。如图在上传进度条出现的时候，图片已经出现了，它从何而来呢？我们可以使用URL.create

2017-06-07 12:01:40 3555

原创图片上传显示进度条和预览图的前端实现之进度条篇

很久没有写博客了，是最近忙着找实现，另外工作也很忙，闲下来整理一下最近做的东西，觉得还是有点可写的。不知道有没有朋友在工作中碰到这样的需求，需要实现一个组件，能实现图片上传功能，同时，在图片未上传完成时，要显示进度条和相应的图片预览图。如图所示，上传过程中，进度条和预览图都能显示：这一篇首先来说说点击上传功能和进度条功能的实现吧，等今天忙完了我继续更新下一篇点击弹出文件夹，选择上传的功能想必

2017-05-23 11:22:02 7134

原创移动端无法获取event.clientX和event.clientY的解决办法

最近在制作一个实现类似于手机的锁屏手势密码效果的页面时，由于需要应用获取canvas中，手指划过的位置，于是遇到了一些小问题。众所周知，在PC端，我们通常用event.clienX或者event.clientY来获取手指的坐标，可是在移动端，打开开发者模式，调试touch事件时，这一值通过console.log始终返回是undefined。通过查询，我发现了TouchEvent里面有touche

2017-03-24 09:27:58 5785 1

原创使用ES5 reduce()方法的一点小注意事项

ES5数组方法 reduce()方法想必大家不会陌生，MDN上有详细的介绍，官方介绍是对累加器和数组的每个值 (从左到右)应用一个函数，以将其减少为单个值。用起来也不难理解，以下面一个例子为例：let sum = [0, 1, 2, 3].reduce(function(acc, val) { return acc + val;}, 0);console.log(sum);// 6看

2017-03-07 15:32:49 1142

原创使用min-device-pixel-ratio媒体功能实现真正的1像素border

过完了一个愉快的年，开始陆陆续续的继续在家学移动端开发的知识。关于设备像素比的知识，想必做过移动端开发的都有接触，这里就不介绍啦，万一有不懂的可以看张鑫旭大神的设备像素比devicePixelRatio简单介绍由于设备像素比存在的原因，我们在处理设计图的一些边框时，对于1px的border，如果在代码里将其写死，可能在不同设备像素比的设备中，粗细不一样，尤其是在目前大多数设备像素比为2的设备中，

2017-02-20 17:28:32 9817

原创 [leetcode javascript解题]Multiply Strings

leetcode 第43题“Multiply Strings”描述如下： Given two numbers represented as strings, return multiplication of the numbers as a string. Note: The numbers can be arbitrarily large and are non-negative.

2017-01-04 22:20:23 547

原创 [leetcode javascript解题]Combination Sum

leetcode第39题Combination Sum描述如下： Given a set of candidate numbers (C) (without duplicates) and a target number (T), find all unique combinations in C where the candidate numbers sums to T. The sam

2017-01-02 00:18:40 688

原创 [leetcode javascript解题]Valid Sudoku

leetcode 36题’Valid Sudoku’，描述如下 Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could be partially filled, where empty cells are filled with the characte

2016-12-30 10:28:35 612

原创 [leetcode javascript解题]Search for a range

leetcode 第34题”Search for a range”描述如下： Given a sorted array of integers, find the starting and ending position of a given target value. Your algorithm’s runtime complexity must be in the order of

2016-12-23 22:32:05 557

原创 [leetcode javascript解题]Next Permutation

leetcode 第31题 “Next Permutation”描述如下，有点长： Implement next permutation, which rearranges numbers into the lexicographically next greater permutation of numbers. If such arrangement is not possible,

2016-12-23 19:21:29 544

原创 [leetcode javascript解题]Divide Two Integers

leetcode第29题，“Divide Two Integers” 的描述如下： Divide two integers without using multiplication, division and mod operator. If it is overflow, return MAX_INT.题目就是要大家不使用乘除法和模运算来实现除法。同时要考虑边界条件。这道题在lee

2016-12-23 11:36:43 868

原创 [leetcode javascript解题]Swap Nodes in Pairs

leetcode 24题 “ Swap Nodes in Pairs”描述如下： Given a linked list, swap every two adjacent nodes and return its head. For example, Given 1->2->3->4, you should return the list as `2->1->4->3.这道题乍一看

2016-12-22 10:38:30 465

原创 [leetcode javascript解题]Generate Parentheses

leetcode第22题”Generate Parenthese”描述如下： Given n pairs of parentheses, write a function to generate all combinations of well-formed parentheses. For example, given n = 3, a solution set is: [

2016-12-21 21:30:13 1170

原创 [leetcode javascript解题]Valid Parentheses

leetcode 20题 Valid Parentheses 描述如下 Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid. The brackets must close in the correct or

2016-12-21 19:41:10 624 2

原创 [leetcode javascript解题]Letter Combinations of a Phone Number

leetcode的17题”Letter Combinations of a Phone Number”描述如下： Given a digit string, return all possible letter combinations that the number could represent. A mapping of digit to letters (just like on

2016-12-20 21:05:57 770

原创 [leetcode javascript解题]3Sum

leetcode 第15题”3Sum”描述如下： Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all unique triplets in the array which gives the sum of zero. Note: The solut

2016-12-20 15:39:24 1907

原创 [leetcode javascript解题]Longest Common Prefix

leetcode第14题 “Longest Common Prefix”描述是这样的： Write a function to find the longest common prefix string amongst an array of strings.也就是从一个字符串数组中寻找出公共的最长前缀字符串，首先考虑的是这个最长前缀字符串肯定要小于最短字符串长度，所以先找到最短字符串的长度m

2016-12-19 21:39:27 1295

原创 [leetcode javascript解题]Container With Most Water

开始在leetcode上用Javascript解题了，本来是打算把代码放在github上，然后开issues来和大家讨论，但是想了想一方面是自己不太喜欢去公开场合宣传自己的github所以基本没人关注到我的github，另一方面是自己的很多题目解法和大神们的解法对比毕竟存在差距。所以还是把自己觉得有意思的，有代表性值得讨论的题放在博客上和大家一套讨论。当然如果对我其他题的解法有兴趣可以Star一下

2016-12-18 16:10:56 552

原创 ES6 rest参数和扩展运算符

ES6引入了rest参数（形式为“…变量名”）。其中rest参数搭配的变量是一个数组可以使用数组的一切操作。　　比如：function rest(...values){ let sum=0; for(var val of values){ sum+=val; } return sum;}add(1,2,3)//6　　值得注意的是rest参数之后

2016-12-16 13:01:41 6898

原创关于clientHeight/clientWidth和scrollHeight/scrollWidth的相关知识点

如果要用原生JS来确定元素的大小，在开发中想必都踩过document.documentElement和document.body的坑。　　首先是在不包含滚动条的情况下使用clientWidth和offsetWidth以及clientHeight和offsetHeight来确定文档总高度（也就是基于视口的最小高度时），不同浏览器有不同的区别。 Firefox中这两对属性始终是相等的，但大小是代

2016-09-20 22:13:42 681

原创用div和p标签实现类似于input标签的输入功能

啊闲来无事我又来写博客了，前段时间接了个需求是关于制作移动端的一个动画页面，其中需求方强烈要求我在项目中实现类似于微信那样的评论功能。　　最开始想着，这有啥难的，用input标签不就能做么，在评论按钮使用jquery的trigger()方法再触发这个input标签不就行了么！于是我自信满满的接了活，开始飞快的码代码，结果写到一半脑子一动，input标签好像不能像聊天窗那样自动换行吧，大胸弟。。

2016-08-29 11:07:57 9552 3

转载一张图看懂encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的区别

一、这四个方法的用处1、用来编码和解码URI的统一资源标识符，或叫做 URI，是用来标识互联网上的资源（例如，网页或文件）和怎样访问这些资源的传输协议（例如，HTTP 或 FTP）的字符串。除了encodeURI、encodeURIComponent、decodeURI、decodeURIComponent四个用来编码和解码 URI 的函数之外 ECMAScript 语言自身不提供任何使用 URL

2016-08-17 13:43:40 485

原创 range 对象

今天在工作中做项目为了模拟微信评论，使用了h5的新属性contenteditable="true"，使得div和p标签可以像input和textarea标签一样编辑。但是问题是文本获得焦点后，光标总是定位在文字的开头。查阅资料后，发现要使用range对象来解决。模块化的代码如下： po_Last: function(obj) { if (window.getSelection

2016-08-17 10:12:48 1346 2

原创 window.location相关内容

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。 URL即:统一资源定位符 (Uniform Resource Locator, URL) 完整的URL由这几个部分构成： scheme://host:port/path?query#fragment scheme:通信协议常用的http,ftp,maito等host:主机服务器(计算

2016-08-10 15:59:39 302

转载前端面试题搜集之三——CSS

前端面试题搜集之三——CSS 本文为转载文，将原文的四个部分拆开，这是第三个部分，文的最后注明了出处，如需再转载也请注明出处,尊重原创。本博客对原博客进行了校对，修改了一些已经失效的网页，为方便大家阅读进行了精心排版。希望对正在找工作的你有所帮助。3.1、谈谈你对CSS布局的理解3.2、请列举几种可以清除浮动的方法（至少两种）浮动会漂浮于普通流之上，像浮云一样，但是只能左右浮动。正是这种特性，

2016-08-08 15:33:31 768

原创 white-spacing,word-break,word-wrap的区别

今天工作中遇到了需要让汉字和英文词汇均不换行的需求，同时需要考虑兼容性问题，除了white-space：nowrap或者pre。顺带将所有相关的知识补了一下。首先是white-space，在没有设定white-space情况下 #test { font-size: 20px; margin: 0 auto; background: grey;

2016-08-02 17:50:49 838

转载前端面试题搜集之二——HTML

前端面试题搜集之二——HTML 本文为转载文，将原文的四个部分拆开，这是第二个部分，文的最后注明了出处，如需再转载也请注明出处,尊重原创。本博客对原博客进行了校对，修改了一些已经失效的网页，为方便大家阅读进行了精心排版。希望对正在找工作的你有所帮助。2.1、标签上title属性与alt属性的区别是什么？alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文

2016-07-29 00:07:13 369

原创用CSS实现JS的交互效果

昨天在做页面的时候遇到一个简单的效果，不多说，上交互图鼠标滑过的导航高度会变化，同时如果滑过的不是被选中的（红色）导航，则被选中的高度会降低，大概就是要实现这样一个效果，当时觉得这样一个交互效果用JQ的hover实现很简单，想当然的就用了JQ，设置一个叫”hover”的class代码如下： $("#midsection2_nav>li").hover(function() {

2016-07-26 10:27:07 851

转载前端面试题搜集之一——理论知识

前端面试题之一——理论知识本文为转载文，将原文的四个部分拆开，这是第一个部分，文的最后标注出了的出处，如需再转载请注明出处,尊重原创。本博客对原博客进行了校对，去除了一些已经失效的网页。为了方便自己和大家看的舒服，还进行了精心排版，希望对正在找工作的你有所帮助。1.1、讲讲输入完网址按下回车，到看到网页这个过程中发生了什么a. 域名解析b. 发起TCP的3次握手c. 建立TCP连接后发起http

2016-07-25 00:02:20 928

原创前端Javascript面试题

今天有群里的朋友面试完了回来问了我一道题。代码如下 var test = (function(a) { this.a = a; return function(b) { return this.a + b; } } (function(a, b) { return a; }(1, 2))); console.log(tes

2016-07-24 23:09:53 540

原创 jquery实现两种轮播效果

我想大家在浏览网页时都接触过轮播图。其实在bootstrap中也有相应的轮播插件，下面我们将抛开对其他JS库和框架的依赖，仅适用jquery来实现两种轮播效果。第一种轮播图应该是大家最熟悉的传统轮播图，以淘宝为例：这种轮播图的功能大致是这样的：点击左右箭头可以实现图片的切换效果，点击圆点圆点会变色，并快速指向对应的图片，此外，可以无限循环轮播，也就是你一直点图片会一

2016-07-24 00:23:50 4994

原创关于JS下offsetLeft，style.left，以及jquery中的offset().left，css("left")的区别。

最近因为工作需要，仔细研究了一下关于JS下offsetLeft，style.left，以及jquery中的offset().left，css("left")的区别。JS下的offsetLeft和style.left，以及jquery的css("left")，对定位的理解相似，如果父元素中有定位元素，都是相对于上一个定位元素（position不为static）定位。值得一提的是如果没有已经定

2016-07-23 10:14:07 4888

zzxboy1的博客