目的:简单高效的获得包含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>& ...
阅读全文 »

一、编写JavaScript库要注意的问题 为了让自己的JS库构建的更加优雅、合理,我们编写JS库时要注意两方面的内容: 1、不要使用版本检测,而要使用能力检测 由于浏览器的类型和版本太多,以及不断的新的浏览器出现,我们不可能投入大量的时间和成本去实践检测各种版本的浏览器。”浏览器检测”也叫”版本检测”通常被认为是一种错误的做法,浏览器检测的最佳实践是能力检测,通常也被称为对象检测,指的是在代码执行之前检测某个脚本对象or方法是否存在,而不是依赖于你对哪个浏览器具有哪些特定的了解。如果必须的对象和方法存在,那么说明浏览器能够使用它,而且代码也可以按照预期执行。能力检测使用<if(xxx.xxxx)>的方式1234// JavaScript Document if(document.body && document.body.getElementsByTagName){ //使用document.body.getElementsByTagN ...
阅读全文 »

在这个迷你系列的第一部分中我们看到,为您的网站的移动导航创建一个icon图标,是一个最好的解决方案。 其结果是通过一个HTML元素创建一个icon图标,结构如下: HTML1<div id="nav-btn"></div> 然后给它添加如下css样式: CSS1234567#nav-btn { background: transparent;  border-bottom: 23px double #121212;  border-top: 8px solid #121212; height: 7px;  width:37px;} 结果如下: 制作一个案例我们开始快速创建一个包含一些通过这个icon按钮去控制这些连接的案例页面。我可能在HTML和CSS方面与你的想法有差异,但是我确定你知道怎么做,如果没有内容,给它添加一些东西。你可以在下面的JSFiddle中看到这个结果: 检测您的用户的VIEWPORT ...
阅读全文 »

众所周知,JavaScript不使用块作用域。但是在try语句的catch部分有个奇怪的情况。catch是带一个参数的,它并没有使用闭包,却不会影响所在作用域中的同名变量。但是在catch的语句块中声明的变量却又完全遵循普通语句块的规则,只有catch的参变量特殊。123456789101112131415(function(){ e="default"; try{ throw "test"; }catch(e){ var e,x=123; console.log(e); //test console.log(delete e); //false e=456; console.log(e); //456 }; console.log(x); //123 console.log(e); //default console.log(window.e); //undefined})() ...
阅读全文 »