前端开发中这些小技巧,你知道几个?

开发 前端
本篇就给你介绍一下前端开发中的这些技巧,以及相关的工具,希望对你有所帮助!

[[402834]]

浏览器地址栏运行JavaScript代码

  1. javascript:alert('hello!'); 
  • Firefox不支持;
  • 其他浏览器必须手动输入才可执行;

浏览器地址栏运行HTML代码

  1. data:text/html,<h1>Hello, world!</h1> 
  • 在非IE浏览器可以运行

浏览器变成文本编辑器

地址栏输入:

  1. data:text/html, <html contenteditable> 

控制台输入:

  1. document.body.contentEditable='true'

利用a标签自动解析URL

  1. var a = document.createElement('a'); 
  2. a.href = 'https://www.maomin.club'
  3. console.log(a.host); // www.maomin.club 

页面拥有ID的元素会创建全局变量

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.  <title></title> 
  5. </head> 
  6. <body> 
  7. <div id="app">我是内容</div> 
  8. <script type="text/javascript"
  9.  console.log(app.textContent) // 我是内容 
  10. </script> 
  11. </body> 
  12. </html> 

引用CDN文件时,不用HTTP标识

  1. <script src="//cdn.bootcdn.net/ajax/libs/vue/3.0.11/vue.cjs.js"></script> 

利用script标签保存任意信息

  1. <script type="text" id="template"
  2.  <h1>This won't display</h1> 
  3. </script> 
  4. <script type="text/javascript"
  5.  const text = document.getElementById('template').textContent; 
  6.  console.log(text); // <h1>This won't display</h1> 
  7. </script> 

 在页面中隐藏鼠标

  1. *{ 
  2.     cursor: none!important; 

文字模糊效果

  1. p { 
  2.     color: transparent; 
  3.     text-shadow: #111 0 0 5px; 

 实时编辑CSS

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.  <title></title> 
  5.  <style type="text/css"
  6.   style{ 
  7.    display: block; 
  8.   } 
  9.  </style> 
  10. </head> 
  11. <body> 
  12.     <style  contentEditable> 
  13.          body { color: blue } 
  14.     </style> 
  15. </body> 
  16. </html> 

实现长宽比固定区域

  1. <div style="width: 100%; position: relative; padding-bottom: 56.25%;"
  2.     <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;"
  3.         this content will have a constant aspect ratio that varies based on the width. 
  4.     </div> 
  5. </div> 

禁止他人使用iframe标签引用网址

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

生成随机字符串

  1. function generateRandomAlphaNum(len) { 
  2.     var rdmString = ""
  3.     for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2)); 
  4.     return rdmString.substr(0, len); 

浮点数转化为整数

  1. console.log(~~1.2); // 1 

 

责任编辑:姜华 来源: 前端历劫之路
相关推荐

2019-07-25 10:45:05

GitHub技巧网站

2021-10-25 14:55:38

Linux技巧命令

2022-05-05 12:02:45

SCSS函数开发

2021-02-27 17:13:21

前端代码逻辑

2020-10-28 11:20:55

vue项目技

2024-01-29 00:51:39

前端开发利器

2020-02-23 23:29:07

Python编程开发

2022-09-15 07:05:09

Windows电脑技巧

2024-02-26 00:00:00

前端工具Space.js

2022-04-28 12:17:26

浏览器连字符hyphens

2019-09-25 09:05:52

Python 机器学习编程语言

2018-09-20 17:05:01

前端程序员JavaScript

2022-09-06 08:07:24

SQL语句查询

2023-11-23 10:21:37

2023-12-15 10:42:05

2013-04-09 11:26:55

WindowsPhon

2019-10-29 08:44:47

Java数据库实体

2022-04-06 07:32:41

Java运算符变量

2022-04-15 09:01:18

前端工具UTF8编码

2018-05-20 11:01:47

Siri语音助手手机
点赞
收藏

51CTO技术栈公众号