float对父元素的text-align的影响

今天做一个项目,要求左右两个元素,中间一个相对于父元素水平居中……话说这样的布局挺常见,处理起来方法也有很多种,我想当然的就用了下面的方法,结果发现并未符合预期…… 备注:实际项目中,左右两个元素的宽度全部是未知的,这里只是一个demo而已。 感兴趣的可以试一下,有了左右两个浮动元素后,中间元素并未按照父元素的宽度做水平居中,而是按照剩下的宽度来的(chrome以及火狐下)……再一次出现了和印象中不一样的情况……最后还是乖乖的用absolute的吧,这个是真正脱离文档流的,若是页面需要再次渲染,还可以节省那么一丁点性能……若是中间的宽度确定的话,也可以给中间元素设置margin:0 auto;来使其居中显示,用这种方法是不受左右的浮动元素影响的……why?目前指鹤还不知道,有知道的望告知一下。 这个问题还好解决,有一个在webview下的问题困扰我好久了,页面回退(三星低端机下,history.go(-1)和history.back()只能回退一个页面,然后就是死循环了),除了用history的API写一个页面跳转和回退的统一事件,暂时没有想到好的方法去处理这件事了,但问题是那需要动好多页面,而这边的前端老大极有可能不让我去动他写的代码,且貌似这个时候我也的确不太方便动他写的代码…… 有知道这个问题怎么解决的,麻烦告知一下,多谢了!

有整洁强迫症的慎当程序员

作为程序员,写代码是我们工作的主要内容。最初,看到代码库有些代码写的混乱,我也会有些反感,甚至是埋怨前辈为何不写好点。后来我发现我太天真了,写出高效整洁代码真不是一件容易的事情,写代码就是在挖坑,给后人和自己踩的坑。 写了一年代码,我以亲身经历在此告知后辈,有整洁强迫症的人慎当程序员。为什么这么说呢?是什么让程序变得混乱呢? 1、历史遗留问题 之前见到有人吐槽12306的前端代码,吐槽他们用Jquery版本是1.4.2,Jquery最新版本是2.1.1(2014.9.12)。若是去扒代码的话,你会发现很多公司用的Jquery版本都不高,京东主页用的是1.2.6(2014.9.12)。这就是历史遗留问题,由于版本之间多多少少会有些差别,升级版本有着不可估量的风险,且项目越大风险越大。为了规避风险,再加上代码跑着没问题,一般来说负责人也就不愿去冒险升级了。不去升级会导致什么问题?一些比较新的方法不能用,这对开发人员来说有时是挺痛苦、挺无奈的。 上面只是历史遗留问题的一种情况,实际中还有很多,比如公用的方法逻辑杂乱冗余却没人敢去清除整理、系统架构过时、APP升级后对历史版本的兼容支持与维护等等。总之,写代码时你会遇到各种历史遗留问题。 2、系统架构的问题 实际来看,系统架构最初就考虑全面挺难的,需要经验极其丰富的架构师,即便是这样也只能保证在一定时期内架构满足需求。 抛开业务增长致架构无法满足需求不谈,有多少公司敢站出来说自己系统架构完美呢?一来,很多事都是需要权衡后取舍,技术也不例外,会出现为了解决一个问题引入另一个问题的情况。二来,互联网公司整体的浮躁,恨不得有想法就开始做,且新的技术不断出来,有些人管理为了追新不调研清楚就开始用,引入到系统架构之中,但新技术的引用往往会带来未知的风险。一旦引入的新技术在系统架构中出现了问题,造成的后果是极其严重的。这里不是说新技术不能用,是要慎用。 总结来说,系统架构问题主要原因有三点。一是有些系统架构搭建时需要根据项目需求做一些取舍,致在项目中做部分处理时较麻烦。二是系统架构师经验不足。三是有些项目管理者不够负责,想一出是一出。 系统构架问题也是代码混乱的原因之一,且问题一旦出现就不是几个程序员能够扭转的。 3、需求本身复杂 有些需求本身就很复杂,需要众多人分工协作来完成。这种大项目的代码逻辑注定不会简单,加上是由多人完成,也就很少有人懂得所有逻辑。 对于互联网企业来说,人员变动频繁,项目开发完,甚至是开发一半是说不定就有人走了,最恐怖的是走的人离开时连文档都没有留下。 遇到这种情况,接手的人只能的去扒代码找逻辑。非码农绝对不会了解扒代码找逻辑的痛苦。若是代码写的规范还好一些,若是写的不规范,再加上不是出于一个人之手,那对接手的人来说绝对称得上灾难了。 4、项目催得紧 互联网讲究的是快,仿佛不快就会死。对于这种情况,不知道真的是‘天下武功唯快不破’,还是老板压榨员工劳动力的借口而已。 快,必然导致项目迭代速度快,需求被催来催去,产品、测试以及经理都在后面催。遇到这种情况虽心里不爽,但我知道产品、测试以及经理也不容易,能够理解就理解,毕竟大家也都是为了工作。 需求被催的紧会导致代码质量完全没有保证。由于时间不够,看到需求想到实现方案就要开始动手写,根本没时间去考虑是不是最优的,后续的扩展性,这样写了会不会引起其他的问题等等。 由于最初没有时间考虑周全,开发时有可能会遇到一些完全没有预料到的问题,但仍旧是由于没有时间,根本没法返工重新设计,只能随便找一个能够解决问题的hack方法解决了。 由于项目时间紧,开发文档几乎不会有。一来可能是项目一个挨着一个根本没时间写。二来是需求做完了,开发都不清楚代码为何要那样写了。因那段代码可能是开发连续高负荷工作十几个小时下写出来的,那段时间开发的精神是恍惚。也许有人会说精神都恍惚了,为什么还不去休息啊,只能说需求不允许,开发比较敬业,不是老油条。 由于记不清当时为什么那样写,加上人都是有惰性的,没有人催促自然就不会去从仓促赶出来的垃圾代码扒逻辑了,况且一般来说开发根本没有完全的清闲时光,自然也就不会去补文档了。 除了文档,项目需求被催得紧也会导致代码注释不全。编码习惯好的可能会随手写些注释,编码习惯一般的就极有可能由于时间仓促而不写注释了。 项目需求被催得紧也会造成代码review形同虚设。因代码还未提交就有一帮人在后面催,想一想这样的情况还能愉快地走代码review吗?但对于新人来说,代码review是规范代码风格的必要步骤,是从师父的review中学习编码技巧的重要途径之一。 前三种令代码不整洁的情况在一定程度上不可避免,只能做到尽量的减少其对代码的影响,但催促项目需求这一点完全可以避免。 虽可避免,但从实际来看很少有互联网公司去注意这一点,似乎大家仍旧觉得只有快才能在‘拼杀’中胜出,根本不去考虑代码一旦混乱,后续的维护以及二次开发增加的时间、人力以及财力成本。 混乱的代码烂账也是跳槽的诱因之一,面对一份杂乱的代码时间长了会觉得恶心,恶心到受不了也就走了。 有时快是胜出的关键,但盲目的追求快也就是急功近利了,而急功近利往往是在自掘坟墓。 5、特殊需求 有时业务或产品会提出一些常人难以理解的逻辑。这可能是由于业务或产品想要实现某个功能,但当前的系统架构、技术实现或开发时间不允许,他们又非要想实现该功能,于是便整出了一个最初需求的阉割版,马不像马牛不像牛的阉割版需求。 一般来说这种需求会拟定后续版本,但这就犹如程序员说这个方法先实现了,后续有时间再优化一样,很少有下文了。造成这种现象的原因之一还是项目迭代快、时间不允许,另一点就是人的惰性。 除了阉割版需求称得上特殊需求,还有可能是想一出是出,但根本不了解实际情况的老板,或者高层提出来的需求,一般来说由于提需求的人地位在那里,做事的开发与产品等也就很难拒绝做了。 6、好代码需经验: 写出高效整洁的代码一来是程序员需要很高的素质、很好的习惯,二来真的需要经验。由于程序员缺口众多,新人不断的涌入近来。想一想网上之前的嘲讽段子“我们有一个非常好的idea,什么都准备好了,就缺一个程序员了”。从这一段子可以看出,有想法的人很多,但能够将想法实现的程序员很缺。 指望着没有经验的新人能够写出高效的,逻辑性非常强、没有任何冗余逻辑的代码我觉得不现实。新人代码风格不错就是比较好的了。其实,这个时候若是有一个好的代码review机制就非常好了,可是上面也提到了,由于种种原因,不知道多少公司的代码review根本形同虚设。 7、代码风格因人而异: 每个人的编码风格都不一样,习惯阅读的编码风格自然也就不一样了。实际项目开发往往又是由多人共同完成的,也就造成代码库内会包含各种风格的代码。风格一多,就自然有了与自己习惯风格不符的了。 虽这也算是阅读代码的一个障碍,但相对于上面的问题来说,它似乎不是什么大问题,除非遇到写代码完全不注意的人,再加上第四条提到的没有人review。 总结: 以上算是介绍了代码之所以杂乱的七点原因。说到这里,对代码多多少少有些认识的人,你们应该了解我最上面的“有整洁强迫症的慎当程序员”绝非危言耸听了。 在这里,我再次告诫所有后辈们,若是你有整洁强迫症,或者说你属于急性子,慎入程序员这一条路。否则会被代码虐千百次,虐的你心力憔悴,牙口胃口都不好了,心情也不好了,觉得整个世界都是灰暗的,人嘛,何必那么自找没趣,对不起自己呢? 最后,说点工作中的感悟。工作大家谁都不容易,部门不一样工作中考虑的出发点也就不一样,所以相互理解非常重要。若是真的遇到强横无理、不可以商量的,我会选择离开,省的整天与这种人生气添堵。工作毕竟是工作,令工作太过影响心情真的划不来。

webview Access-Control-Allow-Origin Error At Android

最近做项目时,在三星手机上遇到了一个问题,webview下的zeptojs的ajax请求报错,具体错误信息如下: 查了后发现需要在Android上加入如下配置 参考文章:http://stackoverflow.com/questions/11318703/access-control-allow-origin-error-at-android-4-1 有关添加此配置后引起的安全性问题文章一篇:http://www.2cto.com/Article/201501/370287.html

奇怪的location.href?

最近做项目时遇到了一个问题,同事在location.href=“******”,的后面加了一行代码,我的第一反应是这行代码并不会执行,于是和同事说建议他将此改到href上面,没有想到同事说那一行代码运行了,不相信的我测试一看,还真的是运行了,由于那段时间比较忙,也就没有继续在这个上面花时间,直到今天才有些时间来看这件事。 今天分别在chrome、IE8和最新版的Firefox上测了一下,没有想到结果极其不统一。具体结果如下: 1、chrome(版本39.0.2171.95 ),在location.href后的代码是会继续执行的,不论有多少。 2、firefox(35),在location.href的代码会执行,但并不保证全部执行完毕,仿佛是与收到href请求返回的某项信息后就终止了当前代码,开始跳转到新的页面。 3、IE8,它的表现就有些特殊了,会执行alert,且是紧跟href的alert,只要出现非alert的语句,它就开始跳转了。 暂时发现的现象如上,总结的话呢,就是除非必要,没有其他路可走,否则还是不建议将语句写在href后面。至于其中具体的原因,就要去看各个浏览器本身的实现机制了。 有兴趣去深入了解此问题的,找到具体原因后,希望能够在指鹤的博客下面留言告知,多谢了。  

2015-1-18

今天参加了《重返20岁》签售会,拿了本签名书,见到了远子,回来把韩版的《奇怪的她》看了,韩国夸张的表演的确容易产生些笑点(不知道看多了会不会免疫啊?),总体来说还不错,只是不是我喜欢的类型。 最近加班较多,闲暇时间没有多少,一本《上帝掷骰子吗?》看了两周还没有看完,希望这周可以看完吧。看这本书的原本目的是给准备写的科幻小说打基础的,意外的收获是令我重新审视了现在的科技进步。著名科幻作家刘慈欣,也就是三体的作者,他曾说过如今“IT 技术的增长造成人类进步的假象”,看完后我有了一种同感。IT进步的确在时刻改变着我们的生活方方面面,但相对于整个科学而言,它是上层的建筑,建立在理论基础之上建筑。没有理论基础的突破,上面的建筑发展终究会有极限,最后能够做的只有修修剪剪而已,成为了“边际效用”的一个事例。对于建筑的底层基础,这些年有怎样的发展,由于我本身不是做研究的人,我不太了解,只能说看到有关它们新闻的概率,还没有一个花边新闻的概率大。这里有着一个很现实的问题,就是利益,搞上层往往能够挣到更多的钱,底层的投入产出比极低,从上世纪的量子力学发展史来看,搞底层研究的人大部分人也并不太过看重利益,不过他们倒是挺看重名望的,也许只有那样的人才真的适合搞学术吧? 这段日子,借着查些背景资料的契机,混了下科幻社区,发现的确有些脑洞大开的人,国内的科幻迷人数也不少,但我发现相当一部分民科有一个共同点,有些人是纯粹的脑洞大开,根本没有去了解基本的物理常识,估计没看过几本相关知识的书籍。不过民科毕竟是民科,条件有很多限制,许多东西真的只能靠想,因为很难找到可以用来做实验的地方。 除了物理学的东西,我还找了些侦探的常识资料,只是还没看一页。 看了这些后,我最大的感触人类真的很渺小,需要我们去解释、了解的东西实在太多了,人的一辈子真的太短了……若是你会有无聊寂寞的时候,我强烈建议你去看些科普尝试,不仅可以打发时间、还可以增长生活知识,比如你会了解最初的胶卷照相机是什么原理,现在的液晶电视是怎么一回事儿,薛定谔的猫到底是怎么一回事? 诺基亚的wphone手机用了一个多月了,最大的感触是世界安静了,再也没有每次联网后弹出一堆广告的烦恼了(其实可以在设置里关掉,只是每个软件要单独去关),不过一些常用软件用起来的确没有安卓舒服,但对我来说还可以接受,若是唯一令我有些不满意的,只有待机时间还是太短,这也许和我买到的手机是翻新机有关——我只是有些怀疑,并没有实质性的证据,官网查询的结果是大陆半,已过保质期,不过过保质期的原因有可能是硬件过保。 说一句,人的一生有很多事可以做,要不就彻底的局限自己,要不就去拥抱这个神奇的世界,不要徘徊在中间态,成为薛定谔的猫。 新年愿望,有一个属于自己的书架,结束漂泊。

iscroll5实现下拉刷新,上拉分页加载

项目中用到iscroll5,需要用到下拉刷新的功能,结果发现在iscroll4中支持的功能,在5中去掉了,下拉回弹后会直接反弹为this.y=0,于是不得已开扒iscroll5的源码,发现可以多加一个设置参数就可以了。具体更改如下: 用于需要用到缩放,所以iscroll5用的是iscroll-zoom.js的版本,注:文中原先就有的只是为了定位帮助读者定位位置,并不是需要替换的部分: 1、在options中加入如下参数代码(我的代码是在2470行): 2、在下面不远处(十行以内)加入如下参数: 3、最后一处修改,在resetPosition方法内,此处直接贴上更改之后的方法,其实真正的修改只是将this.minScrollX修改成了(代码在2830行左右): 全部修改内容如上,调用的时候,只需要传入minScrollX、minScrollY参数便可实现下拉后回弹上面的预留位置了。 注:对于scroll的滚动区域小于包裹容器的,iscroll禁止滚动,会造成无法实现下拉刷新,这里有一个小技巧,就是给滚动区域加一个min-height:101%; 最后附上此次修改的dome下载地址,由于dome最初也是从别处拿的(最初的dome不能满足需求),其中的css布局方面个人觉得有些不好,但由于最近工作紧张也没有去改,暂时就先这样吧,有空会优化一下的。 下载地址:点击这里。 其实,除了这个改法还有其他的方法,比如修改scrollEnd的触发位置,以便scrollEnd时可以取到this.y的值(未重置之前的),就可以判断上拉的距离,然后就可以写触发刷新部分代码……这种方式提示刷新的样式可能需要修改下,因为srcoll会被重置到0,当然你可以注掉重置部分,自己根据监听到的来写位置……这种方式还未具体看效果,有兴趣的可以看下。

陈年:凑热闹的公司都会烟消云散

由于工作的原因,最近很少看类似的文章,这篇也是朋友推荐的,看了之后还是挺有感悟的,当今这个社会凑热闹的人和公司的确很多,很多公司更是为了扩张而扩张。陈年的这篇文章给凡客的从繁荣到衰落做了很好的总结,希望也能够引起一些人的反思吧,同时也希望凡客能够从跌倒中爬起来,并越做越好。 陈年:我希望在未来,换季时你要买件衬衫或者超轻羽绒服,能想起凡客,这就够了。优衣库就是这样一步步走向成功的。我不想再去凑热闹,我凑过,也见过很多凑热闹的公司,最后它们都烟消云散了。 口述者:陈年(凡客诚品(北京)科技有限公司CEO) 本刊记者|李原 整理 2011年,凡客最热闹时,公司里有一万三千多人,光总裁级的领导就有三四十位,凡客却步步陷入危机。现在,凡客只剩下不到300人,做衬衫的核心团队只有7个人,但业务运转得很顺畅。我不免想,以前那么多人平时都在干吗? 现在回想起来,公司越热闹,烧钱混日子的人越多。凡客曾经为了达到年销售额100亿的目标,倒推需要扩张多少品类、多少SKU(库存量单位),需要有多少人去承担这样的业务量。按照一个人管七个人的原则,公司就要有几十位副总、两三百位总监。 那时,我自己也陶醉在这种热闹中,把所有精力都放在怎么管理这一万多人,却不知道公司真正要管理的应该是价值。 在凡客最鼎盛的时候,我开始隐隐感觉到不对,但不知道错在哪里。第一次真正点醒我、让我彻底反思凡客模式的,是我多年的好兄弟雷军。我跟雷军都生于1969年,他比我小8个月。在过去的17年里,我们不断在一起共事,交流很多。因为同龄人的关系,我们在人生和心灵上的感悟也有许多同步。 我和雷军的第一次见面在1998年,我和他都是29岁,我刚刚创办《书评周刊》,他刚做到金山软件的总经理。两年后,雷军邀请我一起创办卓越网;卓越网卖给亚马逊后,雷军又给我创办的我有网和凡客投资和建议。 2007年对我和雷军都很重要。这一年雷军离开金山,我开始准备凡客的启动。雷军对金山感情很深,离开了打拼了多年的事业,给他带来的痛苦不言而喻,许多原因外界的评论也不见得真实。这种痛苦让雷军得以绝地重生、重新出发,但此后出发得这么漂亮,是旁人没有想到的。 2007年到2010年雷军酝酿小米的过程,在事业上和心灵上给他带来了巨大的提升。雷军因此想透了许多事情,比如如何成就一个产品的品牌,还有坚持专注、极致、口碑的思想。在雷军彻悟的时间里,我却迷失在凡客剧烈的增长和浮躁的扩张中。那时雷军背着满满一书包几十部手机,兴奋地跟我聊这些手机的差别,我对此不以为然。而当凡客崩溃时,我与他深入地讨论凡客的未来,还有自己亲身经历沉痛的过程,我才体会到他的变化是多么深刻。 2013年6月,我跟雷军在凡客喝了一次酒,聊得很不愉快,根本就谈不拢。雷军直言不讳,说凡客这种盲目扩张是上个时代的做法,未来的企业会像小米一样,以用户需求为导向,用产品来塑造品牌。他的话对我刺激很大,我认为从用户的增长去预估业务的增长,以此布置SKU的思路也是成立的。我心里想,你做小米发达了,也不必来挤对我吧。 这次谈话不欢而散,我真正对雷军心服口服是在两个月后。2013年8月29日,我为了赌气,找他来凡客参观。我清空了半层楼,把凡客所有的样品挂出来。当我跟雷军在几百个衣架间走过时,我感到狼狈,因为这也是我第一次看到这么多真实的产品。我挫败地发现,没有一件是拿得出手的。雷军说,他感觉不是站在一个品牌店,而是百货市场。 这件事让我彻底认栽,之后,雷军和我有过七八次、每次七八个小时的长谈。雷军说:“不够专注、不够极致是凡客遇到问题的原因。”他给我的凡客开出了“去毛利率、去组织架构、去KPI”的三个改造方向。雷军问我,你能不能先专注地只做好一件最基本的产品?我想,衬衫最基础,也能体现出技术含量,而衬衫中最基础的是白衬衫。 开始我没觉得做好一件白衬衫是难事,凡客已经做过1400万件衬衫。但一旦你开始聚焦和认真审视,难题就来了。 2007年时,产品讨论我还参与。2009年下半年后,大家说“陈年你不懂服装,就别提意见了”。我确实不懂,于是我招了许多传统服装产业的人把关,自己放手不管了。 当我要认真做一件白衬衫时,我去问这些专业人员,要用什么面料、什么版型、怎样制作,没人能说出门道。设计师说,白衬衫有什么好做的,为什么不设计更多的花色图案?——现在,他们已经都基本离开凡客了。 过去一整年,我四分之三的时间都不在北京。为了做好一件白衬衫,我开始密集安排出差,去见供应商,去找工厂。而当我见到供应商时,我才了解到以往我犯的错误有多大,他们告诉我,过去他们到北京拜访过我,但我太“拽”,忙着看PPT,没空见他们。他们只能跟凡客基层的员工打交道,为了拿到订单,还要招待他们洗澡唱歌。 这些事听得我毛骨悚然。可想而知,之前凡客已经挤满了多少凑热闹的人。如何让这些人尽快离场?我出了一个狠招,不再维持凡客的虚假繁荣,把总部从位于西二环的雍贵中心高档写字楼搬到了遥远的南五环亦庄去,谁适应不了随时走人。 大多数人迅速感到了搬家的落差和心理冲击。搬家前,凡客有5000多人,搬家后,我以为减到一千多人就不错了,没想到最后减到了300多人。当凡客走上专注和极致路线后,我才发现需要的人可以如此少。这个过程像剥洋葱一样,越剥越难受,越剥越残酷,越剥才发现之前我们搞了多少凑热闹的事和凑热闹的人。 曾经凡客光是衬衫部门就有200多人,现在负责衬衫的团队只有7个人,他们主要的工作是设计、版型、面料、跟单,而衬衫的产品经理实际上是我。我们先确定了新疆优质长绒棉作为面料,接下来,我们陷入了痛苦的对白衬衫的设计难题,不管怎么做,哪怕是抄,都复制不出大牌白衬衫的气质。 2014年春节前后,团队的人集体绝望了,我一度想放弃。有人建议我到越南南定拜访一下日本衬衫大师吉国武,在见到他之前,碰巧是我们情绪最低落的时候。因为此前失望太多,这次旅行我没抱太大希望。因为我的郁闷,飞机上所有人都不愿说话。在河内的宾馆,我让团队的人先去南定见吉国武,觉得靠谱我再过去。当时我已经做好马上飞回北京的准备了。 团队带着这样沮丧的心情到了南定,一路上还戏剧般地经历了抛锚、迷路等颠沛流离。接着,这种失落的心情在第二天突然豁然开朗。吉国武是一位真正的高手。他在日本做了三十多年的衬衫,服务的公司已经有120年的历史。他告诉了我们许多设计细节的奥妙。比如在领子下加个半衬,让领口挺括;在袖口掐出6个褶皱,以贴合手臂;如何设计衬衫不同的嵌条以符合欧版和美版衬衫或修身或宽松的风格。 日本师傅在工艺制作上的精益求精让我们无比钦佩和折服。比如我们曾研究为什么衣服泡在水里会产生浮毛,所有人一筹莫展。日本师傅让我们先研究一下衣服在染色时的机器转速,如果转速过快,就会产生毛羽;转速过慢,光泽度不够。师傅跟我们一档档回调,直到确定最佳效果。 这些一个个看似简单的问题,最后都是中国制造根本的浮躁。以前我们对产品提出质疑,合作伙伴给我拿出各种质检报告,说制造符合国家标准、欧标、日标,但符合标准和用户体验是两回事。这些事让我意识到,我曾经生产出的服装都是垃圾。 我刚开始做凡客时,那时我大言不惭地说,未来在中国成功的国际品牌只有奢侈品,消费品市场都会被中国品牌占据,优衣库一定会在中国一败涂地。7年后,优衣库和Gap已经在中国长驱直入。这就是对中国制造最大的惩罚。 做白衬衫的这一年时间里,我许多次想放弃,周围几乎所有人也都曾动摇过。但作为领导者,我先放弃就完蛋了。很幸运的是,跑步帮我坚持了下去。我现在每天要跑10公里以上,跑步释放的多巴胺对我的情绪帮助极大,一旦开始跑起来,你就会发现,要么继续跑下去,要么人生完蛋;要么坐在那儿长吁短叹,要么坚持下去变得健康无比。 而雷军则在精神上给了我决定性的支持,在我前途一团迷雾时,他仗义地在股东面前力挺我,在危机时再次投资凡客。一天晚上他在电话里说,陈年我做梦都觉得你能做好。两个人四十多岁了,深更半夜跟谈恋爱似的。凡客的人也说,我们俩的感情他们找不到合适的词来形容。 雷军说,做好产品要有坚定的信念。好产品会在口碑积累下慢慢成长,然后在未来的某一天迎来一个爆发。雷军曾经问我,你说诺基亚手机他们的老板会用吗?凡客最鼎盛的时候,我穿的是Prada和Zegna。现在,我和雷军都穿着凡客的T恤衫和牛仔裤度过了整个夏天,想想觉得不可思议。 凡客暂时没有进一步的融资计划,有人也问我什么时候会再制造像“凡客体”那样的热点。我说,营销品牌我很擅长,但我不想再刻意制造什么事件了,接下来是凡客积累口碑的过程。 我希望在未来,换季时你要买件衬衫或者超轻羽绒服,能想起凡客,这就够了。优衣库就是这样一步步走向成功的。我不想再去凑热闹,我凑过,也见过很多凑热闹的公司,最后它们都烟消云散了。

android + javascript 相互通信实例分析(转)

开发是碰到在webview里面添加图片上传功能,一直没有处理好,最后决定采用JavaScript和Android通信,利用Android原生的完成,然后再把上传好的路径传过来。 根据功能实现找到了下面一篇文章,地址:http://www.cnblogs.com/yaozhongxiao/p/3408948.html 建议去原文地址阅读,原文样式更加的便于阅读,指鹤转载只为了将来查找方便。 转载内容: 1.  AndroidManifest.xml中必须使用许可 “android.permission.INTERNET”, 否则会出Web page not available错误。 <uses-permission android:name=”android.permission.INTERNET”/> 2.  如果访问的页面中有Javascript,则webview必须设置支持Javascript。 1   WebSettings webSetting = webview.getSettings(); 2   webSetting.setJavaScriptEnabled(true); 3.如果页面中链接,如果希望点击链接继续在当前browser中响应,而不是新开Android的系统browser中响应该链接,必须覆盖 webview的WebViewClient对象或者覆盖webview的 setWebChromeClient 1 mWebView.setWebViewClient(new WebViewClient(){ 2 public boolean shouldOverrideUrlLoading(WebView view, String url) { 3     view.loadUrl(url); 4     return true; 5    } 6 }); 1 mWebView.setWebChromeClient(new MyWebChromeClient() 2 @Override 3 public boolean onJsAlert(WebView view, String url, String message, JsResult result) { 4 Log.d(LOG_TAG, message); 5 result.confirm(); 6 return true; 7 }); 4.  如果不做任何处理,浏览网页,点击系统“Back”键,整个Browser会调用finish()而结束自身,如果希望浏览的网 页回退而不是推出浏览器,需要在当前Activity中处理并消费掉该Back事件。 1 public boolean onKeyDown(int keyCode, KeyEvent event) { 2   if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) { 3     mWebView.goBack(); 4     return true; 5   } 6   return super.onKeyDown(keyCode, event); 7 } 5.  javascript对象 与 android 对象绑定 WebView注入Java对象   对象注入即通过webview 建立 javascript对象 与 android 原生对象的绑定关系,下面代码中,obj1对象在android程序中可以操作,obj2在js程序中可以操作,两者操作的均为同一个内存对象,即可以理解为,两个绑定的对象是同一个对象在不同运行环境下的一个别名(仅个人理解,有误请大牛指正) 1 webview.getSetting().setJavaScriptEnable(true); 2 class JsObject { 3 @JavascriptInterface 4 public String toString() { return “injectedObject”; } 5 } 6 webView.addJavascriptInterface(new JsObject()obj1, “injectedObject”obj2); 上面的程序建立 javascript 与android 程序的绑定关系,android 4.2 之后版本提供给js调用的函数必须带有注释语句@JavascriptInterface ,4.2版本之前向webview注入的对象所暴露的接口不是必须带有@JavascriptInterface注释语句(需要注意,android adt,eclipse生成的工程,低版本中会自动带有 anotations.jar,支持@JavascriptInterface, 而高版本中工程中,不会自动带有anotations.jar包,所以要加入注释语句@JavascriptInterface,首先要自己手动加入anotations.jar包,不要忘记import 哦!本人就犯过这么低级的错误哦) 官方文档解释是因为这个接口允许JavaScript 控制宿主应用程序,这是个很强大的特性,但同时,在4.2的版本前存在重大安全隐患,因为JavaScript 可以使用反射访问注入webview的java对象的public fields,在一个包含不信任内容的WebView中使用这个方法,会允许攻击者去篡改宿主应用程序,使用宿主应用程序的权限执行java代码。因此4.2以后,任何为JS暴露的接口,都需要加 @JavascriptInterface 注释,这样,这个Java对象的fields 将不允许被JS访问。[2] 注:如果将targetSdkVersion 设置为17或者更高,但却没有给暴露的js接口加@JavascriptInterface注释,则logcat会报如下输出:    Console: Uncaught TypeError: Object [object Object] has no method ‘toString’   (需要特注意的一点,这里的限制是通过 targetSdkVersion 为标准,即如果工程采用了android sdk的版本是4.2以上,但是 targetSdkVersion 的版本在17之下,那么该状态下生成的应用,不过报错,如果targetSdkVersion 设置为>=17 就需要特别主意,要加上 @JavascriptInterface注释语句了, 所有建议在各种版本下都采用@JavascriptInterface注释,就万无一失了)   6.  在做webview开发是经常会加载本机的html文件如下: file:///android_asset/teste.html   加载项目assets下的文件teste.html […]

javasrcipt实现图片预览上传

最近项目遇到了图片上传预览,面对需求原本用了html5的API,觉得移动端应该支持性还行,测了几个机子也都通过了,可是用到webview后就不好使了……无奈之下只能利用另外一种方法,先利用ajax将图片上传到服务器,然后在上传成功后拿到地址,在预览…… 两个方法的代码全部如下: HTML5 api的方法: 另外的方法: 对应的php文件,放在和html同目录下,注:需要http服务,最简单的方式用xampp等集成工具,不会的自行谷歌或百度; 参考文件:http://www.cnblogs.com/Zjmainstay/archive/2012/08/09/jquery_upload_image.html

电脑报警声音有几种啊?

1、“嘀嘀…”连续的短音 一般情况下常见于主机的电源有问题。不过有时候电源输出电压偏低时,主机并不报警,但是会出现硬盘丢失,光驱的读盘性能差,经常死机的情况。当出现这些情况时,最好检查一下各路电压的输出,是否偏低,当+5V和+12V低于10%时,就会不定期的出现上述的问题。因为电源有电压输出,经常会误以为主板的问题或硬盘问题,而浪费好多时间。造成输出电压偏低的原因是输出部分的滤波电容失容或漏液造成的,直流成份降低时,电源中的高频交流成份加大,会干扰主板的正常工作,造成系统不稳定,容易出现死机或蓝屏现象。 不过这种情况在INTEL和技嘉的某类主板上,如果系统出现“嘀嘀…”连续短鸣声,并不是电源故障,而是内存故障报警,这一点需要注意。 2.“呜啦呜啦”的救护车声,伴随着开机长响不停 这种情况是CPU过热的系统报警声,大多是因为在为主机内部除尘,打扫CPU散热器或者是因为更换了新的CPU风扇,因为安装不到位,CPU散热器与CPU接触不牢,有一定的空间或其间加有杂物,导致CPU发出的热量无法正常散出,一开机CPU就高达80-90℃。如果是PIII以下的CPU,因为CPU的温度测试是采用靠近CPU附近的温度探头来采集的,显示的温度数值与CPU实际的温度数值有一定的误差,大约有10-20℃的差别。而PIV的CPU的温度传感器是集成在CPU内部,这时系统显示的CPU温度比较准确。一般主机只要一开机,系统提示的CPU温度就在50℃左右,这是正常的。 3.“嘀…嘀…”的连续有间隔的长音。 这是内存报警的声音,一般是内存松动,内存的金手指与内存插槽接触不良,内存的金手指氧化,内存的某个芯片有故障等原因。 4.“嘀…,嘀嘀”一长两短的连续鸣叫 这是显卡报警,一般是显卡松动,显卡损坏,或者主板的显卡供电部分有故障。 5.“嘟嘟”两声长音后没有动静,过一会儿会听到“咯吱咯吱”的读软驱的声音。 如果有图像显示会提示系统将从软驱启动,正在读取软盘。如果软驱中没有软盘,系统会提示没有系统无法启动,系统挂起。 6.在WIN系统下按“Caps Lock”和“Num Lock”与“Scroll Lock”这三个键时,主机的PC喇叭有“嘀”的类似按键音。 例如三帝的PV40ML,这种情况是主板的一种提示功能,提示用户改变了键盘的输入状态,不是故障。但是因为有的人不明白其中缘伪,便认为是主板有问题。 7.短促“嘀”的一声 一般情况下,这是系统自检通过,系统正常启动的提示音。不过,有的主板自检通过时,没有这种提示音,什么声音也没有。还要注意,有的主板自检的时间可能较长,会等五六秒钟后才会听到“嘀”的一声,需要有点耐心。 转自百度知道:点击这里

有关WebView开发问题

转自:http://blog.sina.com.cn/s/blog_8241e8510101btvk.html 今天做webview时遇到了问题,由于未加上 localStorage配置导致页面无法使用 localStorage,按照文章中的第七条进行了设置就可以了。 1、添加权限:AndroidManifest.xml中必须使用许可”android.permission.INTERNET”,否则会出Web page not available错误。 2、在要Activity中生成一个WebView组件:WebView webView = new WebView(this); 3、设置WebView基本信息: 如果访问的页面中有Javascript,则webview必须设置支持Javascript。 webview.getSettings().setJavaScriptEnabled(true); 触摸焦点起作用 webview.requestFocus();//如果不设置,则在点击网页文本输入框时,不能弹出软键盘及不响应其他的一些事件。 取消滚动条 this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY); 4、设置WevView要显示的网页: 互联网用:webView.loadUrl(“http://www.google.com”); 本地文件用:webView.loadUrl(“file:///android_asset/XX.html”); 本地文件存放在:assets文件中 5、如果希望点击链接由自己处理,而不是新开Android的系统browser中响应该链接。 给WebView添加一个事件监听对象(WebViewClient) 并重写其中的一些方法 shouldOverrideUrlLoading:对网页中超链接按钮的响应。 当按下某个连接时WebViewClient会调用这个方法,并传递参数:按下的url onLoadResource onPageStart onPageFinish onReceiveError onReceivedHttpAuthRequest 6.listview,webview中滚动拖动到顶部或者底部时的阴影(滑动到项部或底部不固定) WebView.setOverScrollMode(View.OVER_SCROLL_NEVER); 7.//android 中 webview 使用 localStorage WebSettings settings = mWebView.getSettings(); // 设置可以使用localStorage settings.setDomStorageEnabled(true); // 应用可以有数据库 settings.setDatabaseEnabled(true); String dbPath = this.getApplicationContext().getDir(“database”, Context.MODE_PRIVATE).getPath(); settings.setDatabasePath(dbPath); // 应用可以有缓存 settings.setAppCacheEnabled(true); String appCaceDir = this.getApplicationContext().getDir(“cache”, Context.MODE_PRIVATE).getPath(); settings.setAppCachePath(appCaceDir); 8、如果用webview点链接看了很多页以后,如果不做任何处理,点击系统“Back”键,整个浏览器会调用finish()而结束自身,如果希望浏览的网页回退而不是退出浏览器,需要在当前Activity中处理并消费掉该Back事件。 覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法。 public boolean onKeyDown(int keyCoder,KeyEvent event){ if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){ webview.goBack(); //goBack()表示返回webView的上一页面 return true; } return false; } WebView相关问题注意: Android的webView很强大,其实就是一个浏览器,你可以把它嵌入到你想要的位置,我这里遇到两个问题,就是怎么知道网页的加载进度和加载网页时, 点击网页里面的链接还是在当前的webview里跳转,不想跳到浏览器那边,解决办法如下: //此方法可以处理webview 在加载时和加载完成时一些操作 webView.setWebChromeClient(new WebChromeClient(){ @Override public void onProgressChanged(WebView view, int newProgress) { if(newProgress==100){ // 这里是设置activity的标题, 也可以根据自己的需求做一些其他的操作 title.setText(“加载完成”); }else{ title.setText(“加载中…….”); } } }); webView.setWebViewClient(new WebViewClient(){ @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { //重写此方法表明点击网页里面的链接还是在当前的webview里跳转,不跳到浏览器那边 view.loadUrl(url); return true; } @Override public void onReceivedSslError(WebView view, SslErrorHandler handler, android.net.http.SslError error) { // 重写此方法可以让webview处理https请求 handler.proceed(); } });

jsp版ueditor(百度富文本编辑器)图片在线管理返回绝对路径

转自:http://shuoit.net/it/18.html#cmt45,建议到原文去看。 如果你有富文本编辑器的功能需要开发,我推荐你用百度的ueditor。本文将与你分享jsp版ueditor开发中遇到的一些问题。此次要说的版本是ueditor1_4_3-utf8-jsp,lib版本是ueditor1.1.1.jar。 先附上ueditor源码和已经改过bug的jar包,急着用的就别看我废话了: ueditor-src-shuoitnet-updated.zip 第一:ueditor图片在线管理返回绝对路径,本来图片已经成功上传了,但是在线管理时却返回里绝对路径,如(D:\project\shuoit\xx.jpg)。自己研究了半天,开始以为是 config.json 配置的问题,最后才发现是jar包的bug….在这里我想说,百度你作为互联网老大,提供这么优秀的工具,竟然这种低智商错误,太遗憾了,如图: 原来的函数,你可以用反编译工具看看,我们改成如图配置就好了,打包运行,就没问题了,如下图: 第二:如果你的commons-io-2.4.jar太旧,比如我的以前是1.XX版,则上传图片又会报错,这是个小问题,删掉多余的jar包就好; 第三:这个问题相当蛋疼,是关于struts2的,如果你的项目采用的struts2,你就要注意,你的文件上传不鸟,很大可能是struts2内置的上传过滤功能给你拦截了,解决方式是,自定义拦截器,如下代码: 以上是我使用过程中遇到的问题,欢迎与我交流。 (PS:知道图上胡子老头儿是谁吗?请回复评论,答对有奖  ^_^) 除非注明,发表在“说IT”的文章『jsp版ueditor图片在线管理返回绝对路径』版权归说IT所有。 转载请注明出处为“本文转载于『说IT』原地址http://shuoit.net/it/18.html”

通过 File API 使用 JavaScript 读取文件

转自:通过 File API 使用 JavaScript 读取文件,推荐在原网站阅读,转载后有些实际操作失效了。 简介 HTML5 终于为我们提供了一种通过 File API 规范与本地文件交互的标准方式。为了举例说明其功能,可使用 File API 在向服务器发送图片的过程中创建图片的缩略图预览,或者允许应用程序在用户离线时保存文件引用。另外,您可以使用客户端逻辑来验证上传内容的 mimetype 与其文件扩展名是否匹配,或者限制上传内容的大小。 该规范通过“本地”文件系统提供了多种文件访问接口: File – 独立文件;提供只读信息,例如名称、文件大小、mimetype 和对文件句柄的引用。 FileList – File 对象的类数组序列(考虑 <input type=”file” multiple> 或者从桌面拖动目录或文件)。 Blob – 可将文件分割为字节范围。 与以上数据结构结合使用时,FileReader 接口可用于通过熟悉的 JavaScript 事件处理来异步读取文件。因此,可以监控读取进度、找出错误并确定加载何时完成。这些 API 与 XMLHttpRequest 的事件模型有很多相似之处。 请注意:在编写此教程时,Chrome 浏览器 6.0 和 Firefox 3.6 均支持处理本地文件所必需的 API。从 Firefox 3.6.3 起,就不支持 File.slice() 方法了。 选择文件 首先需要检查您的浏览器是否完全支持 File API: // Check for the various File API support.if(window.File&& window.FileReader&& window.FileList&& window.Blob){// Great success! All the File APIs are supported.}else{ alert(‘The File APIs are not fully supported in this browser.’);} 当然,如果您的应用程序只会用到这些 API 中的一小部分,请相应地修改此代码段。 使用表单输入进行选择 要加载文件,最直接的方法就是使用标准 <input type=”file”> 元素。JavaScript 会返回选定的 File 对象的列表作为 FileList。以下示例使用“multiple”属性实现了同时选择多个文件: <inputtype=”file”id=”files”name=”files[]”multiple/><outputid=”list”></output><script>function handleFileSelect(evt){var files = evt.target.files;// FileList object// files is a FileList of File objects. List some properties.var output =[];for(var i =0, f; f = files[i]; i++){ output.push(‘<li><strong>’, escape(f.name),'</strong> (‘, f.type ||’n/a’,’) – ‘, f.size,’ bytes, last modified: ‘, f.lastModifiedDate.toLocaleDateString(),'</li>’);} document.getElementById(‘list’).innerHTML ='<ul>’+ output.join(”)+'</ul>’;} document.getElementById(‘files’).addEventListener(‘change’, handleFileSelect,false);</script> 示例:使用表单输入进行选择。赶快试试吧! Hydrangeas.jpg (image/jpeg) – 595284 bytes, last modified: 2009/7/14 Jellyfish.jpg (image/jpeg) – 775702 bytes, last modified: 2009/7/14 Lighthouse.jpg (image/jpeg) – 561276 bytes, last modified: 2009/7/14 Penguins.jpg (image/jpeg) […]

JavaScript 的Blob小玩

这里用到了玩这个词,主要是暂时还未用到实际运用的地方,写了一个没啥实际意义的代码而已……实现了什么功能呢?进入创世中文网,打开一个小说的阅读页面,f12打开控制台,在console栏下输入下面的代码,然后会发现屏幕的左下角发现下载文章的几个字,点击后会下载下来一个txt文件,文件里的内容就是本章节的内容……想要换成其他的小说网站也很简单,只需要将bookreadercontent替换下就可以了,学前端的人都应该了解,若是非学前端的,可以留言,我可以帮你修改代码。 PS:功能做的很粗糙,遇到具体实际应用场景再考虑是否优化吧……先去继续敲代码了……

onclick、onchange在原生js下监听无效??

取这个题目只是想贴近搜索的关键词,遇到如下问题容易搜的关键词。 这个问题是怎么一回事儿呢?真的是不起作用了吗?其实不是,只是用法错了而已。 先看下下面的错误HTML和js代码: HTML代码: js代码 上面的代码无法按照预期执行,看出问题了吗?HTML或原生js是单一对应绑定的(之所以这样写,是之前一直用jQuery,原谅我的out吧),所以上面这种写法肯定是不行的,那么要怎样修改呢?修改为下面这样便可以了。 有关JavaScript和HTML的事件绑定,可以看下这篇文章:在javascript或者jQuery中绑定按钮点击事件,和在HTML 标签中直接调用onclick属性有什么区别?

2014阿里前端线上笔试题

查资料时看到的文章,粗略扫了下其中的题目还是有些意思的,保存下,有空可以挨着个看一看 No.1 下图绿色区域的宽度为100%,其中有三个矩形,第一个矩形的宽度是200px,第二个和第三个矩形的宽度相等。请使用css3中的功能实现它们的布局。 已知html结构是: <div> <div>column 1</div> <div>column 2</div> <div>column 3</div> < /div> No.2 有两个盒子 A、B,B 在 A 盒子中,它们的 css 是这么定义的: A { position:relative; width:500px; height: 500px; background-color:green; } B { position:absolute; max-width:300px; max-height:300px; background-color:blue; } 如何实现 B 在 A 中水平方向和垂直方向居中 No.3 经常在SNS中看到如下图所示的功能: 请通过代码完成它,它至少应该: 1. 良好结构、语义化的HTML 2. 兼容主流的浏览器; 3. JS应该包括: 1) 实时计数功能 2)校验字数限制 3) 防止重复提交; 4. 如果时间所限,无法100%,但请说明实现方案及思路; No.4 //现有代码如下: function test() { var a = 1; setTimeout(function() { alert(a); a = 3; }, 1000); a = 2; setTimeout(function() { alert(a); a = 4; }, 3000); } test(); alert(0); //请注意,代码中有三处alert.他们分别会alert出什么值,时间上的顺序是怎样的? //请详述得到这个答案的原因,特别是test函数的局部变量a是对运行结果的影响. No.5 当我们使用CSS3新属性,比如:box-shadow或者transition时,我们怎么检测浏览器是否支持这些属性? 请设计一个javascript函数,该函数接受一个CSS属性名作为参数,并返回一个boolean值,表明浏览器是否支持这个属性。 No.6 如果你现在使用的是 Google Chrome 或 Apple Safari,如何让 input 元素在默认情况下显示 “alipay WD Team”,而在光标移入后则显示空白? No.7 解释一下 alert(Function instanceof Object); alert(Object instanceof Function); 这个结果。 No.8 //现有代码如下: var foo = 1; function main(){ alert(foo); var foo = 2; alert(this.foo) this.foo = 3; } //1.请给出以下两种方式调用函数时,alert的结果,并说明原因。 var m1 = main(); var m2 = new main(); //2.如果想要var m1 = main()产生的m1和前面的m2完全一致,又该如何改造main函数? No.9 实现如下图所示的布局 要求: sidebar 固定宽度200px,content和header宽度自适应 当window宽度小于600px时,变成三行布局 默认如下 宽度小于600px时如下 下面是html结构: <div class=’header’> <h1>header</h1> </div> <div>sidebar”</h1> </div> <div> <h1>content</h1> </div> 请写出其css代码. No.10 写一段脚本,实现:当页面上任意一个链接被点击的时候,alert出这个链接在页面上的顺序号,如第一个链接则alert(1), 依次类推; No.11 请用html5标准完成以下页面布局(要求完整书写整个页面的html代码,不需要写CSS) […]

CSS3中display:box模式box-flex不均分的情况

15年第一篇文章送上: 今天开发时遇到的问题,欲用box-flex:1均分元素,但发现元素并未被均分,谷歌后找到了一个不明所以的方式,给元素设置width:0%……试了下的确成功了。 为什么会是这个样子呢? 指鹤暂时还未找到原因,有空会再查下资料,也欢迎知道原因的朋友告知下。 最后再送上一个今天看到的名词:CRUD是指在做计算处理时的增加(Create)、读取(Retrieve)(重新得到数据)、更新(Update)和删除(Delete)几个单词的首字母简写。主要被用在描述软件系统中数据库或者持久层的基本操作功能。

javascript如何获取translate的值

上周指鹤感冒了,现在好些了,虽还时不时的出虚汗,吃饭没有胃口。希望新年新气象,一切会随着今天结束吧。下面送上年底的最后一篇文章。 我想要得到translateY的值,找到了个可以解决问题,但并不算简单(不是一步完成的方法)、适用性也不好的方法。 简要的HTML demo 处理的js方法 方法不算好,算是一个解决此问题的思路,利用正则从transform中取得想要的……空闲时指鹤会继续找解决此问题的方法的,找到后会第一时间更新日志……有空的话,指鹤也会把现在这个简陋、存在些问题的正则进行处理优化吧……先继续做需求去了。

JavaScript基于时间的动画算法

一篇不错的文章,推荐下。 转自:前端乱炖专栏,地址:http://www.html-js.com/article/The-original 作者:戴嘉华 转载请注明出处,保留原文链接和作者信息 本文同时也发布在我的博客 目录 前言 基于帧的动画算法(Frame-based) 基于时间的动画算法(Time-based) 改良基于时间的动画算法 总结 前言 前段时间无聊或有聊地做了几个移动端的HTML5游戏。放在不同的移动端平台上进行测试后有了诡异的发现,有些手机的动画会“快”一点,有些手机的动画会“慢”一点,有些慢得还不是一两点。 通过查找资料发现,基于帧的算法(Frame-based)来实现动画会导致不同帧率的平台体验不一致,而基于时间(Time-based)的动画算法可以很好地改良这种情况,让不同帧率的情况下都能达到较为统一的速度上的体验。 本文介绍的就是基于帧动画算法和基于时间动画算法的差异,以及对基于时间算法的改良。 基于帧的动画算法(Frame-based) 相信做过前端的人对使用JavaScript实现动画的原理都很熟悉。现在让你实现一个让一个div从左到右来回移动的JS代码,你可能嗖嗖就写出来了: function moveDiv(div, fps) { var left = 0; var param = 1; function loop () { update(); draw(); } function update() { left += param * 2; if (left > 300) { left = 300; param = -1; } else if (left < 0) { left = 0; param = 1; } } function draw() { div.style.left = left + “px”; } setInterval(loop, 1000 / fps); } moveDiv(document.getElementById(“div1”), 60); 效果如下: 看看代码,我们让一个div在0 ~ 300px区间内左右来回移动。update计算更新描绘div的位置,draw重新描绘页面上的div。为了方便起见,这里直接使用setInterval作为定时器,实际情况下可以采用你喜欢的setTimeout或者requestAnimationFrame。这里设置每秒钟到更新60次,60fps是人尽皆知的比较适合做动画的帧率。 地球人都知道,JavaScript中的定时器是不准确的。由于JavaScript运行时需要耗费时间,而JavaScript又是单线程的,所以如果一个定时器如果比较耗时的话,是会阻塞下一个定时器的执行。所以即使你这里设置了1000 / 60每秒60帧的帧率,在不同的浏览器平台的差异也会导致实际上你的没有60fps的帧率。 所以上面代码在一个手机上执行的时候可能有60fps的帧率,在另外一个手机上可能就只有30fps,更甚可能只有10fps。 我们模拟一下这种情况会有什么效果发生: 这完全不对大头! 可以看到三个方块移动速度根本不在同一个channel上。想象一下一个超级马里奥游戏在10fps的情况会怎么样?按跳跃一下,你会看到马里奥以一种太空漫游的姿态在空中抛弧线。 导致这种情况的原因很简单,因为我们计算和绘制每个div位置的时候是在每帧更新,每帧移动2px。在60fps的情况下,我们1秒钟会执行60帧,所以小块每秒钟会移动60 * 2 = 120px;如果是30fps,小块每秒就移动30 * 2 = 60px,以此类推10fps就是每秒移动20px。 三个小块在单位时间内移动的距离不一样! 假如你现在要做一个超级马里奥的游戏,怎么做到可以在不同帧率的情况下让马里奥看起来还是那么迅速且帅气? 解决方案很明显。虽然不同的浏览器平台上的运行差异可能会导致帧率的不一致,但是有一样东西是在任何平台上都一致的,那就是时间。所以我们可以改良我们的算法,不是以帧为基准来更新方块的位置,而是以时间为单位更新。也就是说,我们之前是px/frame,现在换成px/ms。 这就是接下来要说的基于时间(Time-based)的动画算法。 基于时间的动画算法(Time-based) 其实思路和实现都很简单。我们计算每一帧离上一帧过去了多少时间,然后根据过去的时间来更新方块的位置。 例如,上面的方块应该每秒钟移动120px,每毫秒移动120 / 1000 = 0.12像素(12px/ms)。如果上一帧方块的位置在left为10px的位置,到了这一帧的时候,假设相对于上一帧来说时间过去了200ms,那在时间上来说在这一帧方块应该移动200ms * 0.12px/ms = 240px。最终位置应该为10 + 240 = 250px。其实就是left = left + detalTime * speed。代码如下: function moveDivTimeBased(div, fps) { var left = 0; var current = +new Date; var previous = +new Date; var param = 1; function loop() { var current = +new Date; var dt = current – previous; // 计算时间差 previous […]

ajax,Unsupported media type-415(不 支持的媒体类型)

指鹤用的是zepto的ajax,数据格式是json,在与后台进行数据传输时报了Unsupported media type-415错误,查了后发现Content-Type未设置,contentType 的默认是application/x-www-form-urlencoded.后端对此设置的为application/json,so设置上就可以了,可参考如下代码: 虽解决了这个问题,但对于ajax的各个指鹤还未去了解,抽空要看他们都是什么意思,有着什么样的作用。 最后附上zepto官网对ajax参数的介绍说明,有时间的可以花上几分钟扫一眼,能理解的就理解了,不能理解的也能有个印象。 $.ajax $.ajax(options) ⇒ XMLHttpRequest Perform an Ajax request. It can be to a local resource, or cross-domain via HTTP access control support in browsers or JSONP. Options: type (default: “GET”): HTTP request method (“GET”, “POST”, or other) url (default: current URL): URL to which the request is made data (default: none): data for the request; for GET requests it is appended to query string of the URL. Non-string objects will get serialized with $.param processData (default: true): whether to automatically serialize data for non-GET requests to string contentType (default: “application/x-www-form-urlencoded”): the Content-Type of the data being posted to the server (this can also be set via headers). Pass false to skip setting the default value. mimeType (default: none): override the MIME type of the response. v1.1+ dataType (default: none): response type to expect from the server. One of json, jsonp, script, xml, html, or text. jsonp (default: “callback”): the name of the JSONP callback query parameter jsonpCallback (default: “jsonp{N}”): the string (or a function […]

html标签大杂烩

翻出来的一个demo页,貌似是把3w上的巨大部分标签全部写了测试,测试代码如下: 有兴趣的朋友可以双击复制,在本地建一个html文件试一下。

JavaScript如何修改伪类样式(转载)

奉上一篇英文文章,原文地址:http://pankajparashar.com/posts/modify-pseudo-elements-css/ 正文内容: 01.May.2014 Modify pseudo element styles with JavaScript Quite often I run into situations where I need to modify the CSS styles of the pseudo elements dynamically. This post shows you different ways in which it can be done! Sample markup and styles to start with, <p class=”red”>Hi, this is a plain-old, sad-looking paragraph tag.</p> .red::before { content: ‘red’; color: red; } Objective – To modify the color of the pseudo element – .red::before from red to green. Method 1 Write separate classes attached with psuedo element for each style and then using JavaScript or jQuery toggle between these classes. .green::before { content: ‘green’; color: green; } $(‘p’).removeClass(‘red’).addClass(‘green’); Method 2 Inject new styles to the existing document stylesheet directly either via JavaScript and the webpage will automatically reflect the new css. document.styleSheets[0].addRule(‘.red::before’,’color: green’); document.styleSheets[0].insertRule(‘.red::before { color: green }’, 0); Method 3 Create a new stylesheet and inject the modified rules to the newly created document stylesheet either via JavaScript or jQuery. // Create a new style tag var style […]

cookie本地文件存储无效

今天在一个项目上用到了cookie,之前都是在http服务之上开发的,这次的项目由于一些原因需要在本地开发,结果在cookie设值时出现问题了,无法设置值,查了资料后发现原来chrome禁止本地(类似这样的file:///D:/cookie.html文件)文件存储cookie,说是为了安全策略…… 无法用cookie那要怎样进行页面信息传递呢?由于此项目最后放置的环境并无http服务,所以服务器端的方法不用想了,只有本地了……其实也很简单,用localStorage就可以,貌似移动端的浏览器应该都支持了。 最后奉送一个localStorage介绍的传送门,地址:http://www.w3schools.com/html/html5_webstorage.asp