学前端

1. 取整同时转成数值型：

’10.567890′|0
结果: 10
’10.567890′^0
结果: 10
-2.23456789|0
结果: -2
~~-2.23456789
结果: -2

2. 日期转数值：
var d = +new Date(); //1295698416792

3. 类数组对象转数组：
var arr = [].slice.call(arguments)

4. 漂亮的随机码：
Math.random().toString(16).substring(2); //14位
Math.random().toString(36).substring(2); //11位

5. 合并数组：
var a = [1,2,3];
var b = [4,5,6];
Array.prototype.push.apply(a, b);
uneval(a); //[1,2,3,4,5,6]

6. 用0补全位数：
function prefixInteger(num, length) {
return (num / Math.pow(10, length)).toFixed(length).substr(2);
}

7. 交换值：
a= [b, b=a][0];

8. 将一个数组插入另一个数组的指定位置：
var a = [1,2,3,7,8,9];
var b = [4,5,6];
var insertIndex = 3;
a.splice.apply(a, Array.concat(insertIndex, 0, b));
// a: 1,2,3,4,5,6,7,8,9

9. 删除数组元素：
var a = [1,2,3,4,5];
a.splice(3,1);

10. 快速取数组最大和最小值
Math.max.apply(Math, [1,2,3]) //3
Math.min.apply(Math, [1,2,3]) //1
(出自http://ejohn.org/blog/fast-javascript-maxmin/)

11. 条件判断：
var a = b && 1;
相当于
if (b) {
a = 1
}

var a = b || 1;
相当于
if (b) {
a = b;
} else {
a = 1;
}

12. 判断IE:
var ie = /*@cc_on !@*/false;

还有吗？欢迎回应

转载自：http://site.douban.com/widget/notes/22456/note/142716442/

尽管人们期望在屏幕上有些改变，但是CSS和HTML对页面中的交互能做的实在太少了，而那些还需要用代码来实现。

比如一个链接要么是这个颜色，要么是那个颜色；一个文本区域要么这么大，要么那么大；一张图片要么是透明的要么是不透明的；它们是从一个状态直接变到另一个状态——中间并没有过渡。

这导致大部分网页有些生硬，因为元素只会很死板的切换或改变。

是的，你可以使用DHTML、jQuery或者自己编写JS来实现过度，但是这需要更多的代码来实现本应该非常简单的功能。

我们需要的是快速而简单的方法来给页面添加简单的变换(transition)效果。在本文中，你会发现很有用的关于CSS变换(transition)以及如何使用它们的信息。

几个月之前，我就建议设计师应该开始使用新的CSS 3 技术来实现一些它们渴求已久的基本的功能了——唯一的问题就是，这些技术没有一个能在IE中可用，包括IE8。

一些读者认为的那些技术将会有75%的用户看不到的观点是不靠谱的。

对那些读者我想说，“坐稳了”，因为我将要向你介绍另一个新的CSS属性，它允许你通过简单的几行代码来为任意元素添加很酷的变换效果。

CSS 变换刚刚在CSS 3中被引入，但是已经被添加为webkit的扩展了。也就是说，现在它们只能用于基于webkit内核的浏览器，包括Apple Safari和Google Chrome。不过从Opera 10.5 pre-Alpha版本来看，Opera将在下一个10.5中支持CSS 3变换。所以要看到本文中提到的实际效果，强烈建议你使用Chrome或者Safari 4来查看本文。

CSS变换从哪里来？

变换曾经只是Webkit的一部分，而且是Safari UI能做而其它浏览器不能实现的一些很酷的东东的基础。

但是W3C CSS工作组曾经拒绝将变换添加到它的官方特性里面，一些成员坚持认为变换并非CSS属性而通过脚本来处理会更好。(内牛满面啊，我前一段也有类似的观点，也和高温讨论过，我认为CSS动画超出了表现的范围，交互的东西应该有脚本来实现，不过后来在鬼哥的点拨下，才开始有了新的认识——神飞)

但是很多设计师和开发人员，包括我自己，坚持认为这确实是样式——只是动态样式，而不是我们日常使用的传统的静态样式。

幸运的是，关于动态样式的争论已经成为过去。去年三月份，来自Apple和Mozilla的代表们开始将CSS变换模块添加到CSS 3特性里面，非常接近Apple已经添加到webkit中的表现。

关于设计增强的一个简要介绍

在我们继续之前，让我强调一点：永远不要让网站的功能依赖样式，如果该样式不是浏览器通用的话(也就是说，所有的常用浏览器都支持)。

对错过的同学再一次强调：永远不要让网站的功能依赖样式，如果该样式不是浏览器通用的话。

这也就是说，你可以使用样式，比如变换，作为设计增强以提高用户体验——在不牺牲看不到它们的用户的可用性的前提下。如果你不用CSS变换照样能用而且用户依然能够完成他们的任务，就没问题，你就可以使用CSS变换。

首先，一些变换的想法

CSS变换将不会替代所有的DHTML，不过它会提供一些支持过渡的方法来提高您在浏览器中的设计。

你需要到下载Apple Safari 3+或Google Chrome浏览器来查看这些变换效果。这两个浏览器都支持Mac和PC系统。

滚动效果

变换最常见的用法就是当用户的鼠标悬放到元素上的时候将元素高亮(无论是链接、表格、表单还是其它的什么元素)，变换是为页面添加平滑的界面的非常棒的方法。

例一

下拉菜单

纯CSS菜单比较容易实现，而变换还可以让你给菜单添加下拉和高亮效果。

例二

动画

你可以在页面上的两点之间移动一个对象，然后使用变换给它添加动画效果。

例三

点击一下，不要放开!

变换、状态与动作

但是请稍等一下。在深入了解变换之前，我们需要理解一个元素能变换的不同的状态。

状态定义当前页面中相应的元素如何与用户进行交互，它们在CSS中通过伪类来定义，比如当用户的鼠标经过一个元素的时候，那个元素就会被hover伪类控制。

变换通过改变不同元素状态之间的一个时间段内的样式来起作用。比如，一个元素的默认状态的颜色值将会在呈现hover状态的色彩值之前逐渐显示色盘中的中间颜色。

一个简单的变换

让我们假设一个简单的变换，在用户的鼠标经过一个链接的时候，将颜色从一个变换成另外一个。与其它CSS属性一样，变换也是直接添加到要使用它的选择器中。该属性可以采用下面的4个值。

CSS property

被变换的属性(比如, color)。看一下下面的表格了解所有可以被变换的CSS属性列表。

Duration

变换持续的时间，通常以秒来计算(比如, .25s).

Timing function

允许你控制持续的时间的计算方式。与其使用一个简单的线性计算，你可以使变换加速(渐入)或者减速(淡出)，或者甚至specify a beat or count (比如，linear). More on this later in the article.

Delay

在动作和变换开始之间等待多久，通常用秒来表示(比如, .1s)。如果你不想延迟，该值可省略。

因为变换属性始于Webkit扩展，我们不得不同时使用transition 和-webkit-transition 属性以向后兼容。

让我们首先提阿贾这这些属性到:hover 伪类中:

1
2
3
4
5

a:hover {color:red;
   -webkit-transition:color .25s linear;
   transition:color .25s linear;}

那么现在，当鼠标经过一个链接，不会直接从蓝色跳转到红色，而是用四分之一秒的时间逐渐变换它们的中间颜色(过渡颜色)。

当然，我们也希望变换回到默认的链接颜色，那么我们可以添加一个变换到:link (以及:visited)伪类上，并在它褪去之前添加一个简单的延迟(十分之一秒) :

1
2
3
4
5

a:link, a:visited {color:blue;
   -webkit-transition:color .25s linear .1s;
   transition:color .25s linear .1s;}

添加多重变换

因为一个变换就是一个CSS属性，如果你在同一个CSS规则中添加多个变换的实例，那么最后的那个将会覆盖前面的，而不是添加它们。所以在下面的规则中，唯一的变换将是背景色彩：

1
2
3
4
5
6
7
8

a:hover {color:red;background-color:rgb(235,235,185);
  -webkit-transition:color .25s linear;
  transition:color .25s linear;
  -webkit-transition:background-color .15s linear .1;
  transition:background-color .15s linear .1;}

当然，这并不是说，不能添加多重变换——多重变换可以在同一个变换属性定义中用逗号隔开：

1
2
3
4
5
6

a:hover {color:red;background-color:rgb(235,235,185);
   -webkit-transition:color .25s linear,background-color .15s linear .1s;
  transition:color .25s linear,background-color .15s linear .1s;}

这条定义将产生色彩和背景色的双重变换。

什么可以被变换？

几乎所有的有色彩、大小或位置等组件的CSS属性，包括许多新添加的CSS 3属性， 都可以应用变换。一个值得注意的例外是box-shadow。

来自W3C的变换的说明，这里是一个可以赋予变换的CSS属性的列表，附带转变的对象，我也高亮了一些比较有用的属性。

变换计时与延迟

使用变换，你可以改变变换的速率，在开始的时候较慢然后在结束的时候加速，反之亦然，或者之间的任何事情。CSS变换有5个计时的关键词，同时也允许你自己定义你自己的计时曲线。

全部变换？

变换将很快成为所有网站的标准操作方式，从而增强用户界面的体验。

为了给你的整个网站添加一个普遍的变换，一个做法就是添加一个变换到全体选择器，类似CSS reset。下面的代码会给页面中的所有元素添加一个默认的变换，从而允许你保持一个统一的变换效果：

1
2
3
4
5
6
7
8
9
10

*:link, *:visited, *:hover, *:active, *:focus {
-webkit-transition:
	color .25s linear,
	background-color .25s linear,
	border-color .25s linear;
transition:
	color .25s linear,
	background-color .25s linear,
	border-color .25s linear;
}

一个反对全部变换，同时明确反对使用全体选择器作为CSS reset的争论是，将一个样式用到页面的所有元素会减缓页面的渲染。然而，我并没有发现任何有关与此的证据。有人知道吗？

OK，其实CSS 变换就这么简单，它并不难理解，而且你也不用些大量的JS脚本来实现它，这很方便实用，多做几次练习，你就可以熟练的使用它了。

来源：http://www.qianduan.net/css-transitions-101.html

大家已经开始在项目中使用一些CSS3动画效果了吧，这让网站在高端浏览器上看起来很上流。animate.css是一个老外做的各种CSS3动画的合集，比较全，也很炫，大家可以参考学习一下。

• 项目主页：http://daneden.me/animate/
• 自定义下载样式：http://daneden.me/animate/build/
• git地址：https://github.com/daneden/animate.css

LAMP（Linux + Apache + MySQL + PHP）架构是目前世界上最流行的中小型网站服务的采用的环境，其易用性、安全性得到了广大用户的认可。在广大 Windows 操作系统的使用者中，不乏想要要采用“AMP”服务器环境的 Web 开发者，本文将详细介绍如何在 Windows 系统下安装 Apache、MySQL、PHP 服务器环境。 阅读全文…

问题的提出

首先看一个例子:

   var name = 'laruence';
function echo() {
         alert(name);
         var name = 'eve';
         alert(name);
         alert(age);
    }

    echo();

运行结果是什么呢?

上面的问题, 我相信会有很多人会认为是:

    laruence
    eve
    [脚本出错]

因为会以为在echo中, 第一次alert的时候, 会取到全局变量name的值, 而第二次值被局部变量name覆盖, 所以第二次alert是’eve’. 而age属性没有定义, 所以脚本会出错. 阅读全文…

Javascript是一种很灵活的语言, 而This关键字又是灵活中的灵活, 但是因为它的灵活, 也注定了它的难用.

以前我用this的时候, 都会觉得不踏实, 老是担心它不知道怎么地就会指到另外的什么地方.

其实, 这都是因为, 我们对它的不了解.

刚好最近再给百度学院做《Javascript高级-作用域/原型链》的ppt, 而swit1983网友也刚好提这个问题, 索性就把这部分内容独立总结出来, 与大家分享.

首先, 我先抛出一个定论:”在Javascript中,This关键字永远都指向函数(方法)的所有者”. 阅读全文…

易欺骗别人感情的JavaScript定时器

JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如

setTimeout(function() {

alert(‘你好!’);

}, 0);

setInterval(callbackFunction, 100);

认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaScript API文档明确定义第二个参数意义为隔多少毫秒后,回调方法就会被执行. 这里设成0毫秒,理所当然就立即被执行了. 阅读全文…

作为入门者来说，了解JavaScript中timer的工作方式是很重要的。通常它们的表现行为并不是那么地直观，而这是因为它们都处在一个单一线程中。让我们先来看一看三个用来创建以及操作timer的函数。

• var id = setTimeout(fn, delay); – 初始化一个单一的timer，这个timer将会在一定延时后去调用指定的函数。这个函数（setTimeout）将返回一个唯一的ID，我们可以通过这个ID来取消timer。
• var id = setInterval(fn, delay); – 与setTimeout类似，只不过它会持续地调用指定的函数（每次都有一个延时），直到timer被取消为止。
• clearInterval(id);, clearTimeout(id); – 接受一个timer的ID（由上述的两个函数返回的），并且停止timer的回调事件。 阅读全文…

随着Google的Android手机和苹果的iPhone手机的逐渐普及，越来越多开发者加入到移动应用开发的大军当中。目前移动终端中的冠亚军Android，应用是基于Java语言基础上进行开发的；而苹果公司的iPhone则是基于C语言开发的。如果开发者编写的应用需要同时在不同的移动设备上运行的话，则必须要掌握多种开发语言，这已经成为开发团队的一大难题，在51CTO专访国内著名移动软件尚邮的首席架构师时也提到过跨平台软件开发的困难。而为了进一步简化移动应用的编程，很多公司推出解决方案，Adobe推出的“AIR for Android”，使Flash为Android开发本地应用成为可能。而Nitobi公司推也出了一套开源的移动应用解决方案PhoneGap。 阅读全文…