个人分类:我也来说说系列(58)

震惊!一对情侣半夜潜入好友家中竟然是为了这个!

前几日,有一对情侣,男的叫五边形,女的叫三边形。二者感情特别好,结果同居了。别人恭喜他们时,他们却说只是为了省钱才住在一块,睡觉却睡在两张床上。现在的问题是:你信吗?选择不信的话,他们睡觉的姿势是这样的(小编我认为他们只是搂在一起而已):选择相信的话,画面应该是这样:他们有个朋友小猎(化名),对此甚是好奇,结果半夜潜入其家中。最后发现他们说的是实话,虽睡在同一房间,但确实没有睡在同一张床上。于是小猎同学,回来跟其他人说,但别人都不信。结果小猎半夜去他们家,悄悄的砌了一堵墙:当然,砌墙的画面只是出现在小猎的脑海里。他想来想去觉得拍照最好,但是他又不想直接拍人,于是去拍二者的影子。

那些年我看的前端书籍

有人看了那篇《统一回复:如何学习JavaScript》,私下问我能否列下你看的那50本书目,并评论一下。下面详细统计一下自己这三年来看过的前端领域书籍。以下书籍大部分都是看完的。有的看了很多遍了。有的看了一遍就不想再翻了。有的看了自己感兴趣的章节。有几本是英文原版,啃得很费劲。只要是书嘛,质量肯定参差不齐,只要是翻译的书,英文原版我也尝试去找了,还好,大部分网上也都有。有的译者水平可以,有的不是很认真。国内的书相对来说,看得不是那么多,水平各异,不予评价。有哪些特别值得推荐的,还是开头那篇文章,其中对几本进行了评价。其他的这里不准备评了,因为很多书,只是有大概印象。有的也并不经常翻,怕评论

2016 个人总结(ppt版)

应别人之邀,我也写两句。。。使用空格键或者方向键进行翻页。html代码效果预览<!doctypehtml><html><head><title>老姚</title><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><style>*{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;position:relative;}html{font-size:100px;overflow:hidden;}.step{position:relative;width:900px;padding:40px;margin:20pxauto;box-sizing:border-box;font-family:'宋体',serif;font-size:60px;line-heig

JavaScript的链式调用

本文结构1.概念与实现2.辅助函数3.案例4.后记估计很多同学对链式调用相当熟悉了,可以直接跳过第一节。1.概念与实现可链式调用的英文是chainable,我们先看看非chainable是什么样的:varobject={doSomething1:function(){console.log('doSomething1...');},doSomething2:function(){console.log('doSomething2...');},doSomething3:function(){&nb

解决怎么拿到JavaScript异步函数的返回值?

今天研究一个小问题:怎么拿到JavaScript异步函数的返回值?1.错误尝试当年未入行时,我的最初尝试:html代码效果预览<script>functiongetSomething(){varr=0;setTimeout(function(){r=2;},10);returnr;}functioncompute(){varx=getSomething();alert(x*2);}compute();</script>2.回调函数弹出的不是4,而是0,后来知道这是异步的问题,要用回调技术来做:html代码效果预览<script>functiongetSomething(cb){varr=0;setTimeout(function(){r=2;cb(r);},10);}functioncompute(x){alert(x*2);}getSomething(compute);</script>3.promise回调函数真是个好

大话Promise系列之二:学几个术语

看了两本书相关书籍后,准备写几篇笔记。望读者要求别太高,就当乐呵看。参考的书籍是:1.http://es6.ruanyifeng.com/#docs/promise;2.http://liubin.org/promises-book/;3.《你不知道的JavaScript中卷》、《英文版》。本文是第二篇。第一篇文章对相关术语说的不详细,本文详细说说。先看一下下面的代码:varp=newPromise(function(resolve,reject){resolve(20);});p.then(functiononFulfilled(){},functiononRejected(){});1.基本术语其中promise表示承诺,即对某一件事情的承诺:这个事情,交给我了,你放心吧。然而此

大话Promise系列之一:借钱的故事

看了两本书相关书籍后,准备写几篇笔记。望读者要求别太高,就当乐呵看。参考的书籍是:1.http://es6.ruanyifeng.com/#docs/promise;2.http://liubin.org/promises-book/;3.《你不知道的JavaScript中卷》、《英文版》。本文是第一篇。主要串一串promise相关api。全文以借钱的故事来大话promise。0.故事基本场景一天,小红准备向小明借点钱。小红给小明发个短信,说能否借我500元。小明收到短信后,马上回复说,我知道了。情况一、小明看了一下支付宝余额,回复小红说,钱打给你了。情况二、小明看了一下支付宝余额,回复小红说,我也没钱了,你找别人吧。上面就是故事背景,看我如何跟promise关联上。1.小明收到短信后,马

打造真实魔方教程

这是一篇讲解如何打造真实魔方(可以转着玩的)的教程。先说说本文的行文风格。每一步都不改原先的代码,基本都是新增标签,添加新的代码。这样步步迭代,大家看得也很清晰,一股脑的贴代码,觉得很难有信心坚持看完。每次代码中都标出了,跟上一次相比哪块是新增的。友情提示一下,本文关心的是实现原理,因此没有考虑兼容性问题,chrome是没问题的。正文开始魔方,众所周知,1阶魔方就是一个立方块(体),当然也不能算是魔方。2阶魔方是8个立方块(体)。本文以打造2阶魔方为例讲,讲解如何画任意阶魔方。因为从1到2,发生了质变,而2到3,再到4,只是量变。7阶魔方的原理与2阶魔方,并没什么区别。第一步,画一个立方体首先

统一回复《怎么学JavaScript?》

鉴于时不时,有同学私信问我怎么学前端的问题。这里统一回复一下,如下次再遇到问我此问题同学,就直接把本文链接地址发给你了。首先说句题外话。关于有人管我叫大神的事情。个人感觉这跟你买东西时,人家管你叫帅哥一样,你答应与否都无妨。正题开始,前端怎么学,应该因人而异,别人的方法未必适合自己。就说说我的学习方法吧。我把大部分时间放在学习js上了。因为这个js的学习曲线,先平后陡。项目实践和练习啥的,我不说了,主要说下工作之外的时间利用问题。我是怎么学的呢,看书,分析源码。个人这几天统计了一下,前端书籍目前看了50多本吧(点击我)。大部分都是js的。市面上的书基本,差不多都看过。第一个问题是,看书有

我和颜色有个约会:亮度

hsl中的l,表示颜色的明暗程度。50%表示正常亮度。100%表示最亮,看起来很白,0的话,看起来黑。如果h,使hsl成环,加上s,进而使hsl成盘,那么加上l,会使hsl成柱。柱体表示个人不会画,这里画个亮度盘html代码效果预览<section></section><style>section{position:relative;}div{width:8px;height:300px;position:absolute;left:50%;transform-origin:0300px;}</style><script>varcontainer=document.querySelector('section');for(vari=0;i<360;i++){vardiv=document.createElement('div');div.style.background='linear-gradient(totop,hsl('+i+',100%,0%),hsl('+i+',100%,50

我和颜色有个约会:饱和度

hsl,中的s是饱和度,指的是彩色的纯度,取值是0%-100%,100%,颜色最鲜艳,0%,颜色最暗,结合色相环,可以做个饱和度盘。从图中可以看出圆盘从径向来说是逐步变成鲜艳的。html代码效果预览<section></section><style>section{position:relative;}div{width:8px;height:300px;position:absolute;left:50%;transform-origin:0300px;}</style><script>varcontainer=document.querySelector('section');for(vari=0;i<360;i++){vardiv=document.createElement('div');div.style.background='linear-gradient(totop,hsl('+i+',0%,50%),hsl('+i+',100%,50%))';div.style.transform=

我和颜色有个约会:色相环

hsl中的h,是hue,是色度是色相。取值是0-360。我就做了一个色相环,基本满足红、橙、黄、绿、青、蓝、紫的分布规律。r、g、b分布在0、120、240度,建议你从低于屏幕的角度像上面仰视,明显看出是r、g、b三大块。俯视是六块:html代码效果预览<section></section><style>section{position:relative;}div{width:8px;height:150px;position:absolute;left:50%;transform-origin:0300px;}</style><script>varcontainer=document.querySelector('section');for(vari=0;i<360;i++){vardiv=document.createElement('div');div.style.background='hsl('+i+',100%,50%)';div.style.transform=

❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤

原先的标题是《特殊字符的妙用》。原谅我任性一把。。。特殊字符(实体字符)想必大家已经有所使用。比如空格的编码是&nbsp;本文就来说说这个事情。本文不会去列都有哪些特殊字符,你可以百度。本文要说一些图标相关的事情。比如删除图标,我们知道是个叉,但是不想用图片,我们可以使用特殊字符(&#x2716并且加分号)(笔记里会直接显示叉号)。比如:html代码效果预览<div><aclass="delete"href="javascript:"></a></div><style>div{background:rgba(0,0,0,.5);padding:10px;margin:010px;overflow:hidden;border-radius:10px;}.delete{float:right;}.delete:before{content:'\2716';}</style>然

我和颜色有个约会:灰度

颜色真是一门神奇的学问。表示需要看一本专业的书。。。《css权威指南》87页提到了灰度的概念。rgb三个分量值设置成一样的,比如#cccccc。那么就看不出其他颜色的成分了,比如看不出任何一点红色的量。测试如下,请滚动鼠标:html代码效果预览<style>div{height:30px;color:red;}</style><body></body><script>varbody=document.querySelector('body');for(vari=0;i<256;i++){vardiv=document.createElement('div');varvalues=[i,i,i];div.style.background='rgb('+values+')';div.innerHTML=values;body.appendChild(div);}</script>本文完。

css3过渡效果触发时机的问题

过渡效果想必很多同学都熟悉了,比如:html代码效果预览<style>div{width:100px;height:40px;background:#92B901;font-size:14px;opacity:0.5;transform:none;transition-property:width,height,background,font-size,opacity,transform;transition-duration:1s,1s,1s,1s,1s,1s;border-radius:5px;font-weight:bold;color:#ffffff;padding:10px;}div:hover{width:120px;height:60px;background:#1ec7e6;font-size:20px;opacity:1;transform:rotate(360deg);}</style><div>css3transition</div>以前我以为只有hover才能触发过渡效果。

打造自己的栅格系统

说起bootstrap,比较出名的还是它的栅格系统,今天来研究研究这个东西。关于bootstrap的栅格系统的介绍请参考,官方中文版介绍。本文不会涉及响应式,只是关心怎么用百分比构建它的。因此相对来说比较简单。本文行文的思路,是通过一个个例子,来说明这个东西。使用过bootstrap的同学都知道(正如官方介绍的那样),栅格、栅格,自然就有行和列之说。col-*放row内,row放在一个容器container内。我们假设container的width为800px。我们先创建一个一行两列的栅格布局:html代码效果预览<style>.container{width:800px;margin:0auto;}.col{width:50%;float:left;}</style><style>[class^=col]{padding-top:10px;

听说,你会this?

this的指向问题,想必大家都很熟悉了。js作用域是词法作用域,即书写时决定的变量的可见性,又由于函数是对象,是引用类型,会产生闭包现象。而动态作用域是取决于运行时的,this是最接近动态作用域这个概念的。因此this指向,取决于函数的调用形式。四种调用形式(函数、方法、call、new),四种指向。我出几道题,考考大家1.this丢失问题:javascript代码效果预览vara={value:'a',fn:function(){alert(this.value);}};varb=a.fn;b();上面明白的话,下面这个呢:html代码效果预览<script>vara={value:'a',fn:function(){alert(this.value);}};setTimeout(a.fn);</script>可以认为是作为“函

一篇文章搞定JS类型转换

为啥要说这个东西?一道面试题就给我去说它的动机。题如下:javascript代码效果预览varbool=newBoolean(false);if(bool){alert('true');}else{alert('false');}运行结果是true!!!其实啥类型转换啊,操作符优先级啊,这些东西都是最最基本的。犀牛书上有详细的介绍。但我很少去翻犀牛书的前5章。。。比如说优先级那块儿,很多书都教育我们,“不用去背诵优先级顺序,不确定的话,加括号就行了。“平常我们写代码时也确实这么做的。但现实是啥呢?面试时会出这种题,让你来做。。。真不知道这种题的意义是啥。。。抱怨到此为止,本文尝试来解决类型转换问题,争取把《JS权威指南》49页那个表背下来。都有哪些东

打造自己的jquery(入门版)

这两天看了一本书。《DOM启蒙》,关于这本书的个人评价,以后再写。其12章,写了一个dom.js,其标题是“创造dom.js,源自jquery灵感,服务于现代浏览器,这是一个万众期待的DOM库”。总之吧,标题名字起的很大,这里不做过多评论。貌似很多人都写过这种文章了。这里按照个人思路的也来写一篇学习笔记。注意可没有抄袭哦。既然是简易版,首先看看我们模仿点什么东西呢?$()的整整12个分支,这里模仿几个吧。再来几个实例方法,包括each、html、text、append首先搭框架(function(){this.$=function(selector,context){returnnew$(selec

由var引起的思考

在js中,var表示声明一个变量。而本文不是关于变量相关知识点的总总。而是想问,你当初想过这个var,是什么单词的缩写吗?其实我第一次接触var,不是在js中,而是在c#中。严格地说,c#是我用在工作上的第一门语言。当时觉得var好神奇,不用指定变量具体类型,随便写个var就好了。那么,这三个字母是什么单词的简写?百度了才知道是单词variable(变量)的缩写。哪怕你现在告诉我不是,我也不会去改变的。。。其实这个事情引发的思考,这几天也在合计。有时难免会去想,老外学编程应该很简单的,因为基本上不用去刻意记住什么api。如果是一个老外去学css,估计只要半天,就能入门了吧。你说,我们大伙看的书,基本上都是老外的东