丧心病狂的前端冷知识

前些天看到一些有趣的冷知识，有些是闻所未闻，有些是丧心病狂，忍不住感叹，前端真的是太强大了！

现在就给大家分享分享！

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>

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)

转载于:https://www.cnblogs.com/yuwenxiang/p/11478338.html

丧心病狂的前端冷知识相关推荐

这些鲜为人知的前端冷知识，你都GET了吗？
来源:猴哥说前端‍‍‍‍‍‍ 背景最近公司项目不多,比较清闲,划水摸鱼混迹于各大技术博客平台,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来,不由的发出一声感 ...
前端里的button怎么去除点击自带边框_前端不为人知的一面--前端冷知识集锦
前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...
前端不为人知的一面--前端冷知识集锦
转自:http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html 前端已经被玩儿坏了!像console.log()可 ...
前端wxml取后台js变量值_这些鲜为人知的前端冷知识，你都GET了吗？
背景最近公司项目不多,比较清闲,划水摸鱼混迹于各大技术博客平台,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来,不由的发出一声感叹! 前端可真是博大精深于是 ...
excel判断字符串包含另一个字符串_【前端冷知识】如何正确判断一个字符串是数值？...
在网页中,我们从用户输入的内容中获取的值通常是字符串,但是有时候我们希望用户输入的内容一定要能转成数值: <input id="userInput"> userInpu ...
一个对象的属性_【前端冷知识】如何判断一个对象的某个属性是可写的？
这是一个咋一听好像很简单,但是实际上却没那么简单,而且是很有趣的问题. 我们先来看一下什么情况下一个对象的属性是可写的. "属性可写"这个概念并没有严谨的定义,我们这里先来规定一下 ...
css border 虚线间距_【前端冷知识】CSS如何实现虚线框动画
我们知道,CSS支持将元素的border属性设为虚线,例如: <h1>君喻学堂h1> h1 { border: dashed 1px; } 但是,CSS的虚线样式是固定的,如果我 ...
canvas需要gpu_【前端冷知识】你了解Canvas的渲染上下文吗？
做前端的同学应该都知道,Canvas是浏览器中很重要的一个绘图元素,使用它可以绘制2D图形或者3D图形,要绘制2D或3D图形时,需要获取不同的上下文,最常用的两个上下文是2d上下文和webgl上下文. ...
canvas刷新_【前端冷知识】Canvas 滤镜的性能优化
最近几天没有及时更新,是因为这几天在忙一个项目mesh.js,这个项目是一个基于Canvas2D和WebGL的跨平台图形系统,提供底层的高性能API,同时也将是未来新版SpriteJS的底层渲染引擎. ...
bootstrap 轮播控制时间_【前端冷知识】如何封装一个图片轮播组件
组件封装是一个前端工程师进阶的必经之路.组件封装是指Web页面上抽出来一个个包含模版(HTML).功能(Javascript)和样式(CSS)的单元.所以,今天的内容,我们将带你了解组件封装的开发思路 ...

丧心病狂的前端冷知识

丧心病狂的前端冷知识相关推荐

最新文章

热门文章