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/api.php?bg=ffffff&fg=000000&gc=000000&el=L&text=" + encodeURIComponent(location.href) + "');background-size:contain;font-size:2500%;") 3、当input中有值时,input.focus() 如何保证光标在字符串最末1234var input = document.getElementById("demoInput");var val = input.value;input.value = "";input.value = val;  
阅读全文 »

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

Flexible栅格正如该系列前几部分内容所讨论的,栅格系统设计涉及固定的测量结果 - 媒体尺寸,字体大小以及最终的栅格大小。它们都是固定的。因此,随之而来的Web和挑战理论已经困扰了几代开发者。突然之间,读者可以改变它们的媒体,改变字体大小,它们可以做到以前设计师从没去想的所有这些东西。设计师们不得不去适应媒体提供的技术和机遇。 在过去的几周里,我已经对弹性布局做出了很多思考,为编写这篇文章做准备。我能看出它们各自的优势& ...
阅读全文 »

aron Gustafson介绍了如何建立一个逐步增强且基于CSS的下拉菜单,并让它作为响应式设计的一部分工作。  为移动设备找出最好的方法来优化导航是一项充满挑战的工作。我们的社区已经想出了各种各样不同的方法来解决这个问题,每一个方法都有其优点和缺点。 在过去,我经常提倡在移动设备上将传统的基于列表的导航转换为一个下拉控件(看下面这个例子)。这是一个很简单的方式,他很容易实现,并且我喜欢这种优雅的做法,但事实上,你必须依赖JavaScript来 ...
阅读全文 »

目录 远程调试概述 使用 Chrome 的 ADB 扩展进行远程调试 1. 安装 ADB 扩展 2. 启用你的移动设备上的 USB 调试功能 3. 通过 USB 连接你的 PC 和移动设备 4. 开始使用 ADB 扩展进行调试 5. 调试你的应用程序 注意 端口反向转发(实验) 1. 连接你的移动设备 2. 启用端口反向转发 3. 添加一个端口转发规则 4. 利益 注意: 我们在远程调试中使用的交互协议信息,请参阅调试协议文档和chrome.debugger。 远程调试概述网页内容在移动设备上的用户体验与桌面型的相比有很大的区别。Google Chrome DevTools 有一整套你已经熟悉的工具&# ...
阅读全文 »

当响应式设计到来的时候,我们就拥有了很多有关如何更好的改善我们在小屏幕设备上导航菜单的技术方案。并且资源似乎是无穷无尽的。这也是为什么我要给大家展示四个主要的响应式设计概念(个人觉得理解为实现方式可能更合适),并且讨论他们各自的优缺点。 其中,有三个是使用纯CSS技术实现,另一个使用了一行JavaScript。 在我们开始之前在本文中介绍的代码,我没有使用浏览器前缀来让CCS更容易查看和理解。更为复杂的CSS样式我使用SCSS编写。每一个案 ...
阅读全文 »

一、编写JavaScript库要注意的问题 为了让自己的JS库构建的更加优雅、合理,我们编写JS库时要注意两方面的内容: 1、不要使用版本检测,而要使用能力检测 由于浏览器的类型和版本太多,以及不断的新的浏览器出现,我们不可能投入大量的时间和成本去实践检测各种版本的浏览器。”浏览器检测”也叫”版本检测”通常被认为是一种错误的做法,浏览器检测的最佳实践是能力检测,通常也被称为对象检测,指的是在代码执行之前检测某个脚本对象or方法是否 ...
阅读全文 »

在这个迷你系列的第一部分中我们看到,为您的网站的移动导航创建一个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方面与你的想法有差异,但是我确定你知道怎么做,如果没有内容,给它添加一些东西。你 ...
阅读全文 »

众所周知,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})(); 这个测试代码测试了很多东西。闭包中第一行给e赋值时这个e是局部还是全局的?由于var在catch的语句块中,如果catch语句块是个块作用域&# ...
阅读全文 »

本地存储解决方案很多,比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。借用网上的一张图来看下目前主流的本地存储方案: Cookie**: **在web中得到广泛应用,但局限性非常明显,容量太小,有些站点会因为出于安全的考虑而禁用cookie,cookie没有想象中的那么安全,Cookie 的内容会随着页面请求一并发往服务器。 Flash SharedObject**: **使用的是kissy的store模块来调用Flash SharedObject。Flash SharedObject的优点是容量适中,基本上不存在兼容性问题,缺点是要在页面中引入特定的swf和js文件,增加额外负担,处݀ ...
阅读全文 »