当前位置: 首页 > news >正文

前端小知识

2019独角兽企业重金招聘Python工程师标准>>> 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

相关文章:

  • 测试的方法!
  • springboot 项目mybatis plus 设置 jdbcTypeForNull (oracle数据库需配置JdbcType.NULL, 默认是Other)...
  • redis学习之redis的安装(linux)
  • Maven项目如何将自定义文件添加到META-INF目录下
  • 弹键盘动画
  • PHP 数据排序
  • 远程桌面,身份验证错误:要求的函数不正确等解决办法
  • vue项目引入jquery
  • 使用豆瓣的pip源安装python模块
  • 比特币源码分析--端口映射
  • 61.mysql主从相关(二)
  • [转]携程大数据实践:高并发应用架构及推荐系统案例
  • 01-html介绍和head标签
  • xtrabackup 使用说明(续)
  • 可能是最漂亮的Spring事务管理详解 专题
  • 【跃迁之路】【444天】程序员高效学习方法论探索系列(实验阶段201-2018.04.25)...
  • 【跃迁之路】【477天】刻意练习系列236(2018.05.28)
  • Brief introduction of how to 'Call, Apply and Bind'
  • CAP理论的例子讲解
  • CentOS 7 防火墙操作
  • Computed property XXX was assigned to but it has no setter
  • EventListener原理
  • JS实现简单的MVC模式开发小游戏
  • pdf文件如何在线转换为jpg图片
  • Spark VS Hadoop:两大大数据分析系统深度解读
  • 更好理解的面向对象的Javascript 1 —— 动态类型和多态
  • 关于Java中分层中遇到的一些问题
  • 基于webpack 的 vue 多页架构
  • 配置 PM2 实现代码自动发布
  • 漂亮刷新控件-iOS
  • 吐槽Javascript系列二:数组中的splice和slice方法
  • 推荐一个React的管理后台框架
  • 硬币翻转问题,区间操作
  • 用Python写一份独特的元宵节祝福
  • MiKTeX could not find the script engine ‘perl.exe‘ which is required to execute ‘latexmk‘.
  • 测评:对于写作的人来说,Markdown是你最好的朋友 ...
  • ​ssh-keyscan命令--Linux命令应用大词典729个命令解读
  • ​中南建设2022年半年报“韧”字当头,经营性现金流持续为正​
  • #define 用法
  • #NOIP 2014# day.1 生活大爆炸版 石头剪刀布
  • (10)ATF MMU转换表
  • (4)Elastix图像配准:3D图像
  • (52)只出现一次的数字III
  • (Note)C++中的继承方式
  • (附源码)spring boot北京冬奥会志愿者报名系统 毕业设计 150947
  • (附源码)ssm户外用品商城 毕业设计 112346
  • (六)激光线扫描-三维重建
  • (论文阅读笔记)Network planning with deep reinforcement learning
  • (十)【Jmeter】线程(Threads(Users))之jp@gc - Stepping Thread Group (deprecated)
  • (一)认识微服务
  • (转)Linux整合apache和tomcat构建Web服务器
  • (转)socket Aio demo
  • (转载)Google Chrome调试JS
  • .gitignore文件---让git自动忽略指定文件
  • .net 7 上传文件踩坑