前端实用冷知识锦集

日志记录 1 评论 • 2100 阅读

前言

前端实用代码有不少!像console.log()可以向控制台输出图片等已经不是什么新鲜的了,一些实用的前端冷知识,对平时有帮助的,现在整理出来分享给大家,代码内容基本都是搜集积累的。

正文

HTML部分

浏览器地址栏运行HTML代码
在非IE内核的浏览器地址栏可以直接运行HTML代码,比如在地址栏输入以下代码然后回车运行,会出现指定的页面内容。

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

HTML
网页内容可编辑
现在很多网页不可复制,但HTML5中新加的contenteditable属性,当元素指定了该属性后,元素的内容成为可编辑状态。将以下代码放到console(控制台)执行后,整个页面将变得可编辑,可任意复制了。

document.body.contentEditable='true';

网页可编辑
加载CDN文件时,可以省掉HTTP标识
现在很流行的CDN即从专门的服务器加载一些通用的JS和CSS文件,出于安全考虑有的CDN服务器使用HTTPS方式连接,而有的是传统的HTTP,其实我们在使用时可以忽略掉这个,将它从URL中省去。

<script src="//baidu.com/js/to/go.js"></script>

CSS部分

关于CSS的恶作剧
相信你看完以下代码后能够预料到会出现什么效果。

*{
    cursor: none!important;
}

简单的文字模糊效果
以下两行简单的CSS3代码可达到将文字模糊化处理的目的,出来的效果有点像使用PS的滤镜,so cool!

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

多重边框
利用重复指定box-shadow来达到多个边框的效果。

/*CSS Border with Box-Shadow Example*/
div {
    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);
    height: 200px;
    margin: 50px auto;
    width: 400px
}

多层变框

JavaScript部分

对经常使用IE、chorme的朋友,可能喜欢在地址栏中输入一些Javascript代码来实现一些特定的功能。比如,测试一段Javascript代码是否正确,提取网页中的所有图片等等。方法:将给出的代码复制到浏览器地址栏(要注意的是如果是通过复制代码到浏览器地址栏的话,IE及Chrome会自动去掉代码开头的javascript:,所以需要手动添加起来才能正确执行)然后回车就行了。
在任意网站上随意涂鸦

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

这是一段神奇的代码,只要你在IE浏览器任意打开一个网站,然后在浏览器上输入前面这段代码然后回车,你就可以随心所欲的修改这个网站啦!输入如下代码,将退出编辑状态:javascript:document.body.contentEditable='false'; void 0
解除右健锁定

javascript:function document.oncontextmenu(){return true;} function document.onselectstart(){return true;} function document.onsdragstart(){return true;}

显示网页中的所有图片

javascript:Ai7Mg6P='';for%20(i7M1bQz=0;i7M1bQz<document.images.length;i7M1bQz++){Ai7Mg6P+='<img%20src='+document.images[i7M1bQz].src+'><br>'};if(Ai7Mg6P!=''){document.write('<center>'+Ai7Mg6P+'</center>');void(document.close())}else{alert('No%20images!')}

显示网页中除图片的其他

javascript:for(jK6bvW=0;jK6bvW<document.images.length;jK6bvW++){void(document.images[jK6bvW].style.visibility='hidden')}

显示网页源代码(对于加密过的可以直接显示其加密前的源代码)

javascript:s=document.documentElement.outerHTML;document.write('<body></body>');document.body.innerText=s;

网页放大1.5倍

javascript:void(s=document.body.style);void(z=s.getAttribute('zoom'));if(z){s.setAttribute('zoom',(parseInt(z)+50)+'%');}else s.setAttribute('zoom','150%')

把隐藏的表单显示出来

javascript:for(i=0;i<document.all.length;i++){document.body.all[i].maxLength=2147483647;document.body.all[i].outerHTML =document.body.all[i].outerHTML.replace(/type=(radio)|(hidden)|(checkbox)/i,'type=text');}void 0

结语

这些前端冷知识代码部分来自(一直在积累):
http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html

添加新评论
  1. 蓝奏

    用到了一个,好用!

    回复
二维码
评论留言