CSS中也可以做简单运算

通过CSS中的calc方法可以进行一些简单的运算，从而达到动态指定元素样式的目的。

.container{	background-position: calc(100% - 50px) calc(100% - 20px);}

JavaScript篇

生成随机字符串

利用Math.random和toString生成随机字符串，来自前一阵子看到的一篇博文。这里的技巧是利用了toString方法可以接收一个基数作为参数的原理，这个基数从2到36封顶。如果不指定，默认基数是10进制。略屌！    

function generateRandomAlphaNum(len) {    var rdmString = "";    for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));    return rdmString.substr(0, len);}

Math.floor的高效替代方案

利用好位操作符可以让我们获得效率上的提升，同时显得高端大气上档次。

|0和~~是很好的一个例子，使用这两者可以完美替代Math.floor。在处理像素及动画位移等效果的时候会很有用，因为我们需要整数，而此方法比Math.floor或parseInt效率都要高。性能比较见此。

var foo = (12.4 / 4.13) | 0;//结果为3var bar = ~~(12.4 / 4.13);//结果为3

 顺便说句，!!将一个值方便快速转化为布尔值 !!window===true 。

重写原生浏览器方法以实现新功能

下载的代码通过重写浏览器的alert让它可以记录弹窗的次数。

(function() {    var oldAlert = window.alert,        count = 0;    window.alert = function(a) {        count++;        oldAlert(a + "\n You've called alert " + count + " times now. Stop, it's evil!");    };})();alert("Hello World");

关于console的恶作剧

关于重写原生方法，这里有个恶作剧大家可以拿去寻开心。Chrome的console.log是支持对文字添加样式的，甚至log图片都可以。于是可以重写掉默认的log方法，把将要log的文字应用到CSS的模糊效果，这样当有人试图调用console.log()的时候，出来的是模糊不清的文字。好冷，我表示没有笑。

是从这篇G+帖子的评论里看到的。使用之后的效果是再次调用log会输出字迹模糊不清的文字。

var _log = console.log;console.log = function() {  _log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');};

不声明第三个变量的值交换

我们都知道交换两个变量值的常规做法，那就是声明一个中间变量来暂存。但鲜有人去挑战不声明中间变量的情况，下面的代码给出了这种实现。蛮有创意 的。

var a=1,b=2;a=[b,b=a][0];

万物皆对象

在JavaScript的世界，万物皆对象。除了null和undefined，其他基本类型数字，字符串和布尔值都有对应有包装对象。对象的一个特征是你可以在它身上直接调用方法。对于数字基本类型，当试图在其身上调用toString方法会失败，但用括号括起来后再调用就不会失败了，内部实现是用相应的包装对象将基本类型转为对象。所以(1).toString()相当于new Number(1).toString()。因此，你的确可以把基本类型数字，字符串，布尔等当对象使用的，只是注意语法要得体。

同时我们注意到，JavaScript中数字是不分浮点和整形的，所有数字其实均是浮点类型，只是把小数点省略了而以，比如你看到的1可以写成1.，这也就是为什么当你试图1.toString()时会报错，所以正确的写法应该是这样：1..toString()，或者如上面所述加上括号，这里括号的作用是纠正JS解析器，不要把1后面的点当成小数点。内部实现如上面所述，是将1.用包装对象转成对象再调用方法。

If语句的变形

当你需要写一个if语句的时候，不妨尝试另一种更简便的方法，用JavaScript中的逻辑操作符来代替。

var day=(new Date).getDay()===0;//传统if语句if (day) {	alert('Today is Sunday!');};//运用逻辑与代替ifday&&alert('Today is Sunday!');

比如上面的代码，首先得到今天的日期，如果是星期天，则弹窗，否则什么也不做。我们知道逻辑操作存在短路的情况，对于逻辑与表达式，只有两者都真才结果才为真，如果前面的day变量被判断为假了，那么对于整个与表达式来说结果就是假，所以就不会继续去执行后面的alert了，如果前面day为真，则还要继续执行后面的代码来确定整个表达式的真假。利用这点达到了if的效果。

对于传统的if语句，如果执行体代码超过了1 条语句，则需要加花括号，而利用逗号表达式，可以执行任意条代码而不用加花括号。

if(conditoin) alert(1),alert(2),console.log(3);

上面if语句中，如果条件成立则执行三个操作，但我们不需要用花括号将这三句代码括起来。当然，这是不推荐的，这里是冷知识课堂:)

禁止别人以iframe加载你的页面

下面的代码已经不言自明并，没什么好多说的。

if (window.location != window.parent.location) window.parent.location = window.location;

console.table

Chrome专属，IE绕道的console方法。可以将JavaScript关联数组以表格形式输出到浏览器console，效果很赞，界面很美观。

//采购情况var teams_data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}];console.table(teams_data);

REFERENCE

What are the most interesting HTML/JS/DOM/CSS hacks that most web developers don't know about?

45 Useful JavaScript Tips, Tricks and Best Practices

10 Small Things You May Not Know About Javascript