1.浏览器可编辑
利用H5的contenteditable属性，当元素指定了该属性后，该元素内的内容就变成可编辑状态。
在浏览器的地址栏上输入以下代码，就可以将浏览器变成一个编辑器。
data:text/html, <html contenteditable>
或者在console中输入以下代码，也可以将浏览器变成可编辑的。
document.body.contentEditable='true';
2.关于css
1).木有光标
*{ cursor: none!important; }
2).文字模糊效果
p { color: transparent; text-shadow: #111 0 0 5px; }
效果图：
3).多重边框
利用重复指定bax-shadow来实现
div { /* Borders */ 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); /* Meaningless pretty things */ background: linear-gradient(45deg, powderBlue, ghostwhite); height: 200px; line-height: 200px; font-family: sans-serif; color: MidnightBlue; margin: 100px auto; text-align: center; width: 400px }
效果图：
4).实时编辑CSS
通过设置style标签的display:block;来让style便签显示出来，在设置contentEditable属性，让其变成可编辑状态，更改后的效果也是实时呈现的。
<html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body> </html>
5).创建长宽比固定的元素
通过设置父元素的padding-bottom的属性，可以达到让容器保持一定的长宽比的目的，能够保持元素不变形，在响应式页面比较常用。(这个你们自己看，总感觉不太对)
<div style=" 100%; position: relative; padding-bottom: 20%;"> <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;"> this content will have a constant aspect ratio that varies based on the width. </div> </div>
3.关于JavaScript
1).取整
除了parseInt，还可以用|0和~~ （性能也比较高）
var foo = (12.4 / 4.13) | 0;//结果为3 var bar = ~~(12.4 / 4.13);//结果为3
2).重写alert，可以记录弹出的次数
(function() { var oldAlert = window.alert, count = 0; window.alert = function(a) { count++; oldAlert(a + " You've called alert " + count + " times now. Stop, it's evil!"); }; })(); alert("Hello World");
3).重写console.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);'); };//输出模糊的文字
4).不声明第三个变量，来进行两个值之间的交换
var a=1,b=2;a=[b,b=a][0];
5).if语句的变形
var day=(new Date).getDay()===0; //传统if语句 if (day) { alert('Today is Sunday!'); }; //运用逻辑与代替if day&&alert('Today is Sunday!');
执行多个语句，后面用,隔开
if(conditoin) alert(1),alert(2),console.log(3); conditoin && alert(1),alert(2),console.log(3);
6).禁止别人以iframe加载你的页面
if (window.location != window.parent.location) window.parent.location = window.location;
7).console.table可以输出一个表格(IE不支持)
var data = [{'品名': '饮料', '数量': 4}, {'品名': '蛋糕', '数量': 3}]; console.table(data);
当然这都不是我发现的，都是别人的https://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html