博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端小知识
阅读量:6234 次
发布时间:2019-06-22

本文共 1419 字,大约阅读时间需要 4 分钟。

hot3.png

一、浏览器地址栏运行JavaScript代码

    如果是通过copy paste代码到浏览器地址栏的话,IE及Chrome会自动去掉代码开头的javascript:,所以需要手动添加起来才能正确执行,而Firefox中虽然不会自动去掉,但它根本就不支持在地址栏运行JS代码。

    例如:javascript:alert('hello from address bar :)');

二、浏览器地址栏运行HTML代码

    地址栏输入:data:text/html,<h1>Hello, world!</h1>

三、把浏览器当编辑器

    地址栏输入:data:text/html, <html contenteditable>

四、在浏览器修改页面内容

    console执行:document.body.contentEditable='true';

五、加载CDN文件时,可以省掉HTTP标识

    <script src="//domain.com/path/to/script.js"></script>

六、利用script标签保存任意信息

    <script type="text" id="template">

         <h1>This won't display</h1>

    </script>

    var text = document.getElementById('template').innerHTML

七、文字模糊处理

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

八、垂直居中

    将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle

    .center-vertical { position: relative; top: 50%; transform: translateY(-50%); }

九、多重边框

    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 }

十、CSS中简单运算

    .container{ background-position: calc(100% - 50px) calc(100% - 20px); }

十一、整数的操作

    var foo = (12.4 / 4.13) | 0;//结果为3

    var bar = ~~(12.4 / 4.13);//结果为3

十二、不声明第三个变量的值交换

    var a=1,b=2;a=[b,b=a][0];

    console.log(a)//2

    console.log(b)//3

十三、禁止别人以iframe加载你的页面

    if (window.location != window.parent.location) window.parent.location = window.location;

 

转载于:https://my.oschina.net/huibaifa/blog/1812212

你可能感兴趣的文章
20个Linux服务器安全强化建议(二)
查看>>
php-fpm的启动、配置及常见错误
查看>>
在 Linux 上管理加密密钥的最佳体验
查看>>
值得学习的C语言开源项目
查看>>
SYSTEMTAP -ORACLE
查看>>
[唐诗]183清平调词三首-李白
查看>>
深入敌后,揭开骇客真面目
查看>>
使用 Drag and Drop 给Web应用提升交互体验
查看>>
Flutter 三探
查看>>
一道java面试题分析及思考
查看>>
全栈 - 12 数据库 用Python操作MySQL
查看>>
假如有一天,人工智能用于相亲
查看>>
0227 - 简单了解了 ETH 挖矿
查看>>
技术问答集锦(14)ThreadPoolExecutor
查看>>
macOS Charles 4.x版本的安装及使用(含破解激活)
查看>>
InnoDB透明页压缩与稀疏文件
查看>>
阅读SSM项目之scm【第二篇】
查看>>
聊聊springmvc中controller的方法的参数注解
查看>>
AspectJ 学习笔记
查看>>
GRU神经网络
查看>>