智能时代IT科技
快捷导航
您的位置：首页>人工智能>>前端开发中这些小技巧，你知道几个？ >

前端开发中这些小技巧，你知道几个？

  发布时间：2025-11-04 21:56:00   作者：玩站小弟   我要评论
浏览器地址栏运行JavaScript代码javascript:alert(hello!); Firefox不支持； 其他浏览器必须手动输入才可执行； 浏览器地 。

浏览器地址栏运行JavaScript代码

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

浏览器地址栏运行HTML代码

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

浏览器变成文本编辑器

地址栏输入：

data:text/html, <html contenteditable> 

控制台输入：

document.body.contentEditable=true; 

利用a标签自动解析URL

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

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

<!DOCTYPE html> <html> <head>  <title></title> </head> <body> <div id="app">我是企商汇内容</div> <script type="text/javascript">  console.log(app.textContent) // 我是网站模板内容 </script> </body> </html> 

引用CDN文件时，香港云服务器不用HTTP标识

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

利用script标签保存任意信息

<script type="text" id="template">  <h1>This wont display</h1> </script> <script type="text/javascript">  const text = document.getElementById(template).textContent;  console.log(text); // <h1>This wont display</h1> </script> 

 在页面中隐藏鼠标

*{     cursor: none!important; } 

文字模糊效果

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

 实时编辑CSS

<!DOCTYPE html> <html> <head>  <title></title>  <style type="text/css">   style{    display: block;   }  </style> </head> <body>     <style  contentEditable>          body { color: blue }     </style> </body> </html> 

实现长宽比固定区域

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

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

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

生成随机字符串

function generateRandomAlphaNum(len) {     var rdmString = "";     for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));     return rdmString.substr(0,中小知道 len); } 

浮点数转化为整数

console.log(~~1.2); // 1 
  • Tag：

相关文章

最新评论