前端冷知識

前些天看到一些有趣的冷知識，忍不住感嘆，前端真的是太強大了！

如今就給你們分享分享！

HTML+CSS篇

---

 

1 文字模糊效果

p { color: transparent; text-shadow: #111 0 0 5px;}          

 

 

 

 

 

 

 

 

2 瀏覽器地址欄運行HTML代碼

data:text/html,<h1>Hello, world!</h1>

 

 

 3 鼠標消失

* {cursor: none!important;}

4 實事編輯CSS

在body中設置style標籤的樣式爲display:block;就可讓頁面的style標籤顯示出來，再加上contentEditable屬性後可讓樣式成爲可編輯狀態，而且更改後的樣式效果能夠實事呈現。

<style style="display:block">
    body { color: blue }
</style>

<style style="display:block" contenteditable>
    body { color: blue }
</style>

 

 5 另外，能夠試一試一些屬性設爲負值哦

 

 

JavaScript篇

 

---

 

1 console控制檯模糊效果

重寫掉默認的log方法，把將要log的文字應用上CSS的模糊效果，這樣調用的時候，輸出的就是模糊的文字。

 

<script>
        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);');
        };

        console.log("老余月薪兩萬")
 </script>

 

 

 

2 控制檯輸出表格

將JavaScript關聯數組以表格形式輸出到瀏覽器console

var data = [{'書名': '前端基礎', '數量': 10}, {'書名': 'Java入門', '數量': 20}];
console.table(data);

 

 3 不聲明第三個變量的值交換

交換兩個變量值的常規作法，那就是聲明一箇中間變量來暫存，那麼可不能夠不經過第三個變量來實現呢？下面的代碼實現了這種要求：

 

var a=10,b=20;
a=[b,b=a][0];
console.log(a,b)