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

浏览器地址栏运行JavaScript代码

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

浏览器地址栏运行HTML代码

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

浏览器变成文本编辑器

地址栏输入：

 
 
 
    
  
  
  
  1. data:text/html, 
    2.

控制台输入：

 
 
 
    
  
  
  
  1. document.body.contentEditable='true';
    2.

利用a标签自动解析URL

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

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

 
 
 
    
  
  
  
  1. 
  
  
  
  2. 
  
  
  
  3. 
  
  
  
  4.  
    5. 
  
  
  
  5. 
  
  
  
  6. 
  
  
  
  7. 我是内容
  •  console.log(app.textContent) // 我是内容

  • 引用CDN文件时，不用HTTP标识

     
 
 
      
  
  
  
      2.

    利用script标签保存任意信息

     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      This won't display
      3. 
  
  
  
    3. 
  
  
  
      5. 
  
  
  
    5.  const text = document.getElementById('template').textContent;
      6. 
  
  
  
    6.  console.log(text); // 
      This won't display
      7. 
  
  
  
    7.

     在页面中隐藏鼠标

     
 
 
      
  
  
  
    1. *{
      2. 
  
  
  
    2.     cursor: none!important;
      3. 
  
  
  
    3. }
      4.

    文字模糊效果

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

     实时编辑CSS

     
 
 
      
  
  
  
    1. 
  
  
  
    2. 
  
  
  
    3. 
  
  
  
    4.  
      5. 
  
  
  
    5.  
      6. 
  
  
  
    6.   style{
      7. 
  
  
  
    7.    display: block;
      8. 
  
  
  
    8.   }
      9. 
  
  
  
    9.  
      10. 
  
  
  
    10. 
  
  
  
    11. 
  
  
  
    12.     
      13. 
  
  
  
    13.          body { color: blue }
      14. 
  
  
  
    14.     
      15. 
  
  
  
    15. 
  
  
  
    16.

    实现长宽比固定区域

     
 
 
      
  
  
  
      2. 
  
  
  
    2.     
      3. 
  
  
  
    3.         this content will have a constant aspect ratio that varies based on the width.
      4. 
  
  
  
    4.     

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

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

    生成随机字符串

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

    浮点数转化为整数

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

    本文名称：前端开发中这些小技巧，你知道几个？
    网站链接：http://www.csdahua.cn/qtweb/news12/449912.html

    网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

    成都快上网为您推荐相关内容

    python知识

    分类信息网站

    温江网站设计　　 　成都定制网站　　 　建站公司　　 　内江智速网站建设　　 　内江托管服务器　　 　东方电机技改服务有限公司　　 　高防机房　　 　服务器租用　　 　传美奇电气　　 　吉安网站建设　　 　手机网站开发　　 　成都ssl证书申请　　 　重庆网站建设　　 　响应式网站建设　　 　成都网站推广　　 　企业微信定制　　 　中国（西部）云计算中心　　 　vi形象设计　　 　csruizhi.cn　　 　B2C电商系统