需求描述求s=a+aa+aaa+aaaa+aa…a的值,其中a是一个数字。例如2+22+222+2222+22222(此时共有5个数相加),几个数相加有用户控制。 需求分析显而易见,题述数据是有规律的,规律在于:整组数据有相同的基数,后一个数是在前一个数的基础上凭借上一个相同的基数,直到数字长度达到用户设定的个数为止,再将这组数据求和输出。这么分析是按照我们的常规思维去书写逻辑,后面会讲到一些投机的方法,请耐心往下看。 程序实现根据需求分析,我们可以使用常规思路,通过循环和拼接字符串的方式得到结果,代码如下:123456789function getResult(num, count) { var res = 0, temp = num; while((temp + "").length <= count){ res += +temp; temp += "" + num } return res;&# ...
阅读全文 »

JavaScript题目 如何将阿拉伯数字每三位一逗号分隔,如:15000000转化为15,000,000。 打印出1-10000之间的所有对称数(如121,1331,2442)。 解答之前古人云“三思而后行”,不管是做事情还是写程序,我们看到了问题,都应该先思考,再执行。写程序,无论是用什么语言,做何种程序开发。我们都需要考虑如何最省代码,性能最优。在JavaScript中,为了做好这些工作,其中一个原则就是推荐尽量使用JavaScript提供的原生方法,避免使用复杂逻辑来实现相同的功能。考虑到这里我们就可以开始考虑如何来分析题目需求了。 分析题目一首先,我们看下题目所述的转化过程。从 15000000 到 15,000,000 的变化,实际可以描述为将一个大数字从末未开始以三位为单位用英文逗号(,)分割。这样一描述,似乎理解成本就减少了不少,我们可以开始琢磨我们的程序实现了。 程序实现最简单的,很多开发者都会迅速想到使用循环,从大数字字符串末尾开始,以三位为单位拼接逗号”,”,代 ...
阅读全文 »

一、常用库 1、MVC 框架:Backbone.js、Angularjs 2、基础库:Zepto.js 3、加载器:seajs、requirejs 4、常用组件:iScroll 二、调试工具 1、weinre 2、MIHTool 3、Chrome DevTools 4、UC 开发者版 5、Safari 远程调试 三、抓包/代理工具 1、Charles 2、HTTP Scoop 3、Fiddler 四、构建、自动化工具 1、yeoman 2、Grunt - Grunt中文社区 五、二维码相关1、扫码 a)、快拍二维码 b)、UC 二维码插件 2、生成二维码 a)、Chrome插件 - UC Qr Code b)、Chrome插件 - 二维码(QR码)生成器 c)、Chrome插件 ...
阅读全文 »

目的:简单高效的获得包含20个”<li></li>”的方法。 当我听到这个需求的时候,我脑海中很快出现了下面这个方法:1234567function getHtmlByString(len) { var html = ""; for (var i = 0; i < len; i++) { html += "<li></li>"; } return html;} 然而,既然姑娘是有意提问,想必答案不会如此简单。于是我又换了个角度,得出了以下这个方法:1234567function getHtmlByLoop(len) { var arr = []; for (var i = 0; i < len; i++) { arr.push("<li></li>"); } r ...
阅读全文 »

1、JS获取两个字符串数组的差集1234567var dirs = ["a", "b", "c", "d", "e"];var ignores = ["c", "e"], iglen = ignores.length;for (var ig = 0; ig < iglen; ig++) { var sReg = new RegExp("^" + ignores[ig] + ",|," + ignores[ig] + "(?=,)|," + ignores[ig] + "$", "g"); dirs = dirs.join(",").replace(sReg, "").split(",");}// dirs = ["a", "b", "d"] 2、在浏览器Console中打印二维码,主要是为了方便移动开发,不用手动输入长长的url链接1console.log("%c ","background-image:url('http://www.liantu.com/ ...
阅读全文 »

CSS3D旋转立方体绝对是能充分代表这些年CSS发展新高度的典型案例。从一种只是简单的颜色和尺寸渲染的标记符,CSS现在已经变成了一种能够创造出复杂的、具有艺术感染力的视觉效果的编程语言。动画效果的生成变得非常的简单易行。 遗憾的是,目前网上的关于CSS立方体的制作教程都有些复杂,在立方体的基础上混合了其它视觉效果,所以,我决定写这篇文章,只涉及如何创造出基本的CSS立方体的讲解。这篇文章中使用的例子来自于CodePen上Mircea Georgescu的漂亮杰作。 观看演示 HTML这个立方体首先是包裹在一个div里:12345678910<div> <div> <div>前</div> <div>后</div> <div>上</div> <div>下</div> <div>左</div> <div>右</div ...
阅读全文 »

Flexible栅格正如该系列前几部分内容所讨论的,栅格系统设计涉及固定的测量结果 - 媒体尺寸,字体大小以及最终的栅格大小。它们都是固定的。因此,随之而来的Web和挑战理论已经困扰了几代开发者。突然之间,读者可以改变它们的媒体,改变字体大小,它们可以做到以前设计师从没去想的所有这些东西。设计师们不得不去适应媒体提供的技术和机遇。 在过去的几周里,我已经对弹性布局做出了很多思考,为编写这篇文章做准备。我能看出它们各自的优势,但是我一直在尝试基于我最近思考的最纯净的栅格理论。怎样将这个理论转换为弹性栅格设计?我认为答案其实相当不错。 自适应栅格系统理论上,栅格系统的设计应该依赖字体大小。列宽和测量应该建立在一个以基于字符数(你可以在我的《五个简单步骤实现更好的排版》中阅读更多内容)的方式来最大限度的提高内容可读性的基础上。如果测量单位是固定的,这一切将是极好的,但是如果他们能被改变,那意味着什么? 用户可以改变字体大小 用户可以改变浏览器窗口 用户可以调节他们的分辨率用户当然可以在所有的 ...
阅读全文 »

aron Gustafson介绍了如何建立一个逐步增强且基于CSS的下拉菜单,并让它作为响应式设计的一部分工作。  为移动设备找出最好的方法来优化导航是一项充满挑战的工作。我们的社区已经想出了各种各样不同的方法来解决这个问题,每一个方法都有其优点和缺点。 在过去,我经常提倡在移动设备上将传统的基于列表的导航转换为一个下拉控件(看下面这个例子)。这是一个很简单的方式,他很容易实现,并且我喜欢这种优雅的做法,但事实上,你必须依赖JavaScript来使其可用,这并不是我认为的最佳实现。作为一个热衷于渐进增强的开发者,我知道必须有一个更好的解决办法。   我一直倾心于传统的纯CSS的下拉菜单,但他们通常依赖:hover。正如你知道的那样,hover在基于触屏的情况下是无效的,因此这似乎是一个死胡同。但是后来我恍然大悟,:target就是我的救世主。 你可能知道,目标伪类选择器(:target)允许你为一个URL中引用的标志片段套用样式。例如:1http://websit ...
阅读全文 »

目录 远程调试概述 使用 Chrome 的 ADB 扩展进行远程调试 1. 安装 ADB 扩展 2. 启用你的移动设备上的 USB 调试功能 3. 通过 USB 连接你的 PC 和移动设备 4. 开始使用 ADB 扩展进行调试 5. 调试你的应用程序 注意 端口反向转发(实验) 1. 连接你的移动设备 2. 启用端口反向转发 3. 添加一个端口转发规则 4. 利益 注意: 我们在远程调试中使用的交互协议信息,请参阅调试协议文档和chrome.debugger。 远程调试概述网页内容在移动设备上的用户体验与桌面型的相比有很大的区别。Google Chrome DevTools 有一整套你已经熟悉的工具允许你用来 inspect, debug, 以及 analyze 在移动设备上的网页,这意味着你可以使用你的开发机器上的Chrome DevTools来调试一个移动设备上打开的页面。 只要你的移动设备通过 USB 连接到开发机器,你就可以开始调试,你可以查看甚至修改结构,脚本和 ...
阅读全文 »

当响应式设计到来的时候,我们就拥有了很多有关如何更好的改善我们在小屏幕设备上导航菜单的技术方案。并且资源似乎是无穷无尽的。这也是为什么我要给大家展示四个主要的响应式设计概念(个人觉得理解为实现方式可能更合适),并且讨论他们各自的优缺点。 其中,有三个是使用纯CSS技术实现,另一个使用了一行JavaScript。 在我们开始之前在本文中介绍的代码,我没有使用浏览器前缀来让CCS更容易查看和理解。更为复杂的CSS样式我使用SCSS编写。每一个案例都托管在CodePen上,在那儿你可以查看编译后的CSS。 本文中的所有菜单概念,都基于一个我把它叫做基础菜单的普通HTML结构。role属性用于指定特定的概念(占据一行,选择控件,自定义下拉和关闭画布)。123456789<nav role=""> <ul> <li><a href="#">Stream</a></li> <li>& ...
阅读全文 »