Kagol

Appearance

前端实用小技巧总结 ​

1.指定文件兼容性模式

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

在html页面的<head>元素里加入以上代码，用来声明：如果安装了GCF(Google Chrome Frame)，则当前页面使用chrome内核来渲染；如果未安装GCF，则使用IE的Edge版本来渲染。

2.改变input/textarea的placeholder字体的样式

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {/*webkit内核的浏览器*/
    color: #666;
}
input:-moz-placeholder, textarea:-moz-placeholder {/*Firefox版本4-18*/
    color:#666;
}
input::-moz-placeholder, textarea::-moz-placeholder {/*Firefox版本19+*/
    color:#666;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {/*IE浏览器*/
    color:#666;
}

3.输出带样式的文本到浏览器控制台

console.log('%c\nHello World', 'color:red;font-size:24px;')

4.单行文本过长用"..."代替

div { width:100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

5.多行文本过长用"..."代替

.link-name {
    width: 100%;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

6.去掉input元素focus时的边框

input{ outline:none; }

7.回到顶部和回到底部

<a href="javascript:void(0);" onclick="javascript:document.getElementsByTagName('BODY')[0].scrollTop=0;">回到顶部</a>

<a onclick="javascript:document.getElementsByTagName('BODY')[0].scrollTop=document.getElementsByTagName('BODY')[0].scrollHeight;" 
　　href="javascript:void(0);">回到底部</a>

8.将页面变成黑白的

with(document.body.style) {
    var vFilter = "grayscale(100%)";
    if (typeof webkitFilter !== "undefined") {webkitFilter = vFilter}
    else if (typeof MozFilter !== "undefined") {MozFilter = vFilter}
    else if (typeof msFilter !== "undefined") {msFilter = vFilter}
    else if (typeof oFilter !== "undefined") {oFilter = vFilter}
    else if (typeof filter !== "undefined") {filter = vFilter}
}

在浏览器的控制台中运行以上代码即可。

9.目前为止见过的最简洁的求阶乘 n! 的方法

(function (n) {return n > 1 ? n * arguments.callee (n - 1): n} ) (7)

10.目前为止见过的最简洁的数组去重的方法

Array.prototype.unique = function () { return this.filter(function (v, i, m) { return i <= m.indexOf(v);}); }; console.log('result:', [1,2,3,12,3,2,1,2,30].unique());

11.文本框只能输入数字

HTML:

<input type="text" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" />

React:

<input type="text" onKeyUp={ (e) => { e.target.value=e.target.value.replace(/[^0-9]/g,'') } } />

12.修改浏览器默认滚动条样式

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width:8px;
  height:8px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  border-radius:5px;
  background:rgba(0,0,0,0.05);
  -webkit-box-shadow: rgba(0,0,0,0.1);
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius:10px;
  background:rgba(0,0,0,0.1);
  -webkit-box-shadow:rgba(0,0,0,0.2);
}
/*当焦点不在当前区域滑块的状态*/
::-webkit-scrollbar-thumb:window-inactive {
  background:rgba(0,0,0,0.06);
}
/*当鼠标在水平滚动条的状态*/
::-webkit-scrollbar-thumb:hover {
  background:rgba(0,0,0,0.2);
}

13.可计算CSS

.container-widescreen{ max-width: calc(100% - 170px - 20px); } 需要注意的是运算符两边都需要有空格，否则不生效，即：calc(100%-170px)不生效，而calc(100% - 170px)生效

14.修改ng cli默认端口

在angular.json中修改

  "projects": {
    "your-project-name": {
      "architect": {
        "serve": {
          "options": {
            "browserTarget": "ngx-editor:build",
            "port": 4260
          },
        },
      }
    },
  }

15.修改vue cli默认端口

新增vue.config.js文件

module.exports = { devServer: { port: 4260, // 端口 }, lintOnSave: false // 取消 eslint 验证 };

附：

一、设备分辨率总结

PC:

1024X768 - 老机器

1280X800 - MacBook Pro(13寸)

1366X768 - 笔记本

1440X900 - MacBook Air(13)

1920X1080 - 台式机、iMac(21寸)

2304X1440 - MacBook(12)

2560X1440 - iMac(27寸)

2560X1600 - rMBP(13)

2880X1800 - rMBP(15)

5120X2880 - 5K iMac

Pad:(横屏)

1024X768 - iPad1/2/mini

2048X1536 - iPad3/4/mini2

Mobile:(竖屏)(太多了，只总结了iOS的手机)

640X960 - iPhone4/4s

640X1136 - iPhone5/5c/5s/se

750X1334 - iPhone6/6s/7/8

1080X1920 - iPhone6/6s/7/8 plus

1125X2436 - iPhone X
Mobile:(竖屏)(Android手机)

480X854 - 小米1

720X280 - 小米2

1080X1920 - 华为

1080X1800 - 魅族3

1152X1920 - 魅族4

1536X2560 - 魅族4 pro

1440X2560 - 乐视max/三星S6

二、判断浏览器类型

stackoverflow中的方法：

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

// Internet Explorer 6-11
var isIE = false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;

利用正则表达式判断userAgent：

    [ 'edge', /Edge\/([0-9\._]+)/ ],
    [ 'yandexbrowser', /YaBrowser\/([0-9\._]+)/ ],
    [ 'chrome', /(?!Chrom.*OPR)Chrom(?:e|ium)\/([0-9\.]+)(:?\s|$)/ ],
    [ 'crios', /CriOS\/([0-9\.]+)(:?\s|$)/ ],
    [ 'firefox', /Firefox\/([0-9\.]+)(?:\s|$)/ ],
    [ 'opera', /Opera\/([0-9\.]+)(?:\s|$)/ ],
    [ 'opera', /OPR\/([0-9\.]+)(:?\s|$)$/ ],
    [ 'ie', /Trident\/7\.0.*rv\:([0-9\.]+)\).*Gecko$/ ],
    [ 'ie', /MSIE\s([0-9\.]+);.*Trident\/[4-7].0/ ],
    [ 'ie', /MSIE\s(7\.0)/ ],
    [ 'bb10', /BB10;\sTouch.*Version\/([0-9\.]+)/ ],
    [ 'android', /Android\s([0-9\.]+)/ ],
    [ 'ios', /Version\/([0-9\._]+).*Mobile.*Safari.*/ ],
    [ 'safari', /Version\/([0-9\._]+).*Safari/ ]

Opera(OPR)、QQ浏览器(QQBrowser)、360浏览器()、百度浏览器(BIDUBrowser)、猎豹浏览器(LBBROWSER)、搜狗浏览器(SE)、遨游浏览器(Maxthon)、2345浏览器(2345Explorer)

[ "Chrome", ""Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36"" ],
[ "Safari", ""Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2"" ],
[ "Firefox", ""Mozilla/5.0 (Windows NT 6.1; WOW64; rv:53.0) Gecko/20100101 Firefox/53.0"" ],
[ "Opera", ""Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36 OPR/45.0.2552.812"" ],
[ "2345", "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.108 Safari/537.36 2345Explorer/8.6.1.15524" ],
[ "猎豹", ""Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.75 Safari/537.36 LBBROWSER"" ],
[ "UC", ""Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 UBrowser/6.1.2107.204 Safari/537.36"" ],
[ "搜狗", ""Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.221 Safari/537.36 SE 2.X MetaSr 1.0""],
[ "百度", ""Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 BIDUBrowser/8.7 Safari/537.36""],
[ "遨游", ""Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Maxthon/5.0.4.2000 Chrome/47.0.2526.73 Safari/537.36""],
[ "QQ浏览器", ""Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.104 Safari/537.36 Core/1.53.2658.400 QQBrowser/9.6.11018.400""]

发布时间：

Made with ❤ by

Kagol 和 前端开源星球前端开源星球 公众号🌍