前端冷知识
前端中有很多冷知识,但都非常有意思,下面我们一起来看一看吧。
HTML中的冷知识
浏览器地址栏运行JavaScript代码
直接在浏览器地址栏中输入 javascript:alert("hello") 就可以发现弹框出现。 _注意_:不能直接将这句复制粘贴,必须手打进去才可以。
浏览器地址栏运行HTML代码
直接在地址栏中输入 data:text/html,<h1>Hello,world!</h1> 就可以发现页面中出现了Hello,world!的内容。
浏览器变成编辑器
直接在浏览器地址啊中输入 data:text/html,<html contenteditable> 这时就可以在页面中输入任何文字了。 _注意_:其中HTML5中的属性contenteditable使得html可编辑。
编辑页面
在console控制台输入 document.body.contentEditable="true";即可使得整个页面可编辑。
页面拥有ID的元素会创建全局变量
在一张HTML页面中,所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量。于是:页面中若有<div id="example"></div>那么我们就可以在script中直接`console.log(example)`.
利用script标签保存任意信息
将script标签设置为 type=text 并在里面保存任意信息,然后我们就可以在JavaScript中很方便的获取。
><script type="text" id="template">
><h1> This won't display </h1>
></script>
> var text = document.getElementById("template").innerHTML;
CSS中的冷知识
*{cursor :none!important}
相信你知道这是什么。
实时编辑style标签的display:block样式可以让页面的style标签显示出来,并且加上contentEditable属性后可以让样式成为可编辑状态。注意:将style放在body中。
JS中的冷知识
整数的操作
Javascript中是没有整数概念的,但是利用好操作符可以轻松处理,同时获得效率上的提升。 |0和~~是很好的例子,使用这两者将浮点转化成整形效率比parseInt和Math.round要快。
如: >console.log((9/5)|0); // 1
>console.log((6/5)|0);// 1
>console.log(~~(9/5)); //1
>console.log(~~(6/5)); //1