Interesting effects

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="width: 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 + "\n 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

1.浏览器可编辑

2.关于css

3.关于JavaScript

猜你喜欢