浏览器地址栏运⾏JavaScript代码
这个很多⼈应该还是知道的，在浏览器地址栏可以直接运⾏JavaScript代码，做法是以javascript：开头后跟要执⾏的语句。⽐如：
javascript:alert('hello from address bar :)');
将以上代码贴到浏览器地址栏回车后alert正常执⾏，⼀个弹窗神现。
需要注意的是如果是通过copy paste代码到浏览器地址栏的话，IE及Chrome会⾃动去掉代码开头的javascript:，所以需要⼿动添加起来才能正确执⾏，⽽Firefox中虽然不会⾃动去掉，但它根本就不⽀持在地址栏运⾏JS代码，sigh~
这⼀技术在我的另⼀篇博⽂《》中有使⽤到，利⽤在浏览器地址栏中执⾏JavaScript代码将Gmail设置为系统的邮件接管程序。
浏览器地址栏运⾏HTML代码
如果说上⾯那条⼩秘密知道的⼈还算多的话，这条秘笈知道的⼈就要少⼀些了，在⾮IE内核的浏览器地址栏可以直接运⾏HTML代码！
⽐如在地址栏输⼊以下代码然后回车运⾏，会出现指定的页⾯内容。
data:text/html,<h1>Hello, world!</h1>
你造么，可以把浏览器当编辑器
还是浏览器地址栏上做⽂章，将以下代码贴到地址栏运⾏后浏览器变成了⼀个原始⽽简单的编辑器，与Windows⾃带的notepad⼀样，吼吼。
data:text/html, <html contenteditable>
归根结底多亏了HTML5中新加的contenteditable属性，当元素指定了该属性后，元素的内容成为可编辑状态。
推⽽⼴之，将以下代码放到console执⾏后，整个页⾯将变得可编辑，1000踏吧~
tEditable='true';
利⽤a标签⾃动解析URL
很多时候我们有从⼀个URL中提取域名，查询关键字，变量参数值等的需要，⽽万万没想到可以让浏
览器⽅便地帮我们完成这⼀任务⽽不⽤我们写正则去抓取。⽅法就在JS代码⾥先创建⼀个a标签然后将需要解析的URL赋值给a的href属性，然后就得到了⼀切我们想要的了。
var a = ateElement('a');
a.href = 'wwwblogs/wayou/p/';
console.log(a.host);
利⽤这⼀原理，稍微扩展⼀下，就得到了⼀个更加健壮的解析URL各部分的通代码来⾃。
function parseURL(url) {
var a =  ateElement('a');
a.href = url;
return {
source: url,
protocol: place(':',''),
host: a.hostname,
port: a.port,
query: a.search,
params: (function(){
var ret = {},
seg = place(/^\?/,'').split('&'),
len = seg.length, i = 0, s;
for (;i<len;i++) {
if (!seg[i]) { continue; }
s = seg[i].split('=');
ret[s[0]] = s[1];
}
return ret;
})(),
file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
hash: place('#',''),
path: place(/^([^\/])/,'/$1'),
relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
segments: place(/^\//,'').split('/')
};}
页⾯拥有ID的元素会创建全局变量
在⼀张HTML页⾯中，所有设置了ID属性的元素会在JavaScript的执⾏环境中创建对应的全局变量，这
意味着ElementById像⼈的阑尾⼀样显得多余了。但实际项⽬中最好⽼⽼实实该怎么写就怎么写，毕竟常规代码出乱⼦的机会要⼩得多。
<div id="sample"></div><script type="text/javascript">
console.log(sample);</script>
加载CDN⽂件时，可以省掉HTTP标识
现在很流⾏的CDN即从专门的服务器加载⼀些通⽤的JS和CSS⽂件，出于安全考虑有的CDN服务器使⽤HTTPS⽅式连接，⽽有的是传统的HTTP，其实我们在使⽤时可以忽略掉这个，将它从URL中省去。
<script src="//domain/path/to/script.js"></script>
这⼀点在之前⼀篇译⽂博客《》中也有提到。
利⽤script标签保存任意信息
将script标签设置为type='text'然后可以在⾥⾯保存任意信息，之后可以在JavaScript代码中很⽅便地获取。
<script type="text" id="template">
<h1>This won't display</h1></script>
var text = ElementById('template').innerHTML
CSS篇
关于CSS的恶作剧
相信你看完以下代码后能够预料到会出现什么效果。
*{
cursor: none!important;}
简单的⽂字模糊效果
以下两⾏简单的CSS3代码可达到将⽂字模糊化处理的⽬的，出来的效果有点像使⽤PS的滤镜，so cool!
p {
color: transparent;
text-shadow: #111 0 0 5px;}
垂直居中javascript全局数组
有好多次博主都有这样的需求，垂直居中显⽰某个DIV，我们知道CSS中天然有⽔平居中的样式text-align:center。唯独这个垂直居中⽆解。
当然你可以将容器设置为display:table，然后将⼦元素也就是要垂直居中显⽰的元素设置为display:table-cell，然后加上vertical-align:middle 来实现，但此种实现往往会因为display：table⽽破坏整体布局，那还不如直接⽤table标签了呢。
下⾯这个样式利⽤了translate来巧妙实现了垂直居中样式，需IE9+。
.center-vertical {
position: relative;
top: 50%;
transform: translateY(-50%);}
相⽐⽽⾔，⽔平居中要简单得多，像上⾯提到的text-align:center，经常⽤到的技巧还有margin:0 auto。但对于margin⼤法也只在⼦元素宽度⼩于容器宽度时管⽤，当⼦元素宽度⼤于容器宽度时此法失效。
如法炮制，利⽤left和transform同样可实现⽔平居中，不过意义不⼤，毕竟text-align和margin差不多满⾜需求了。
.center-horizontal {
position: relative;
left: 50%;
transform: translateX(-50%); }
多重边框
利⽤重复指定box-shadow来达到多个边框的效果
/
*CSS Border with Box-Shadow Example*/div {
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
height: 200px;
margin: 50px auto;
width: 400px}
实时编辑CSS
通过设置style标签的display:block样式可以让页⾯的style标签显⽰出来，并且加上contentEditable属性后可以让样式成为可编辑状态，更改后的样式效果也是实时更新呈现的。此技巧在IE下⽆效。拥有此技能者，逆天也！
<!DOCTYPE html><html>
<body>
<style  contentEditable>
body { color: blue }
</style>
</body></html>
创建长宽⽐固定的元素
通过设置⽗级窗⼝的padding-bottom可以达到让容器保持⼀定的长度⽐的⽬的，这在响应式页⾯设计中⽐较有⽤，能够保持元素不变形。
<div >
<div >
this content will have a constant aspect ratio that varies based on the width.    </div></div>
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);}
整数的操作
JavaScript中是没有整型概念的，但利⽤好位操作符可以轻松处理，同时获得效率上的提升。
|0和~~是很好的⼀个例⼦，使⽤这两者可以将浮点转成整型且效率⽅⾯要⽐同类的und 要快。在处理像素及动画位移等效果的时候会很有⽤。性能⽐较。
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 data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}];console.table(data);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。