web前端几个小知识点笔记

1、css实现宽度是百分比的盒子为正方形

<div style="width:50%;padding-bottom:50%;height:0px;background:#ccc;"></div>

只需要保证width的百分比值和padding-bottom的百分比值一样即可

2、手机端判断是横屏还是竖屏

function checkOrient() {

    if (window.orientation == 0 || window.orientation == 180){

        alert('竖屏');

    }else if (window.orientation == 90 || window.orientation == -90){

        alert('横屏');

    }
}
// 添加事件监听

addEventListener('load', function(){

    checkOrient();

});

3、不固定行数的文字垂直居中

需求：一个盒子div中有一段文字，文字行数不确定，如何实现该段文字在盒子内垂直居中
方法1：
在div盒子上使用两个css属性：display:table-cell;vertical-align:middle;
方法2：
在div盒子内部放置另外一个盒子p元素，把文字放置到p元素中，
然后div盒子设置：position:relative;
p元素设置：position:absolute;top:50%;transform:translate(-50%);

4、动态正则校验

function dynamicReg(text) {
    
　　eval("var reg = /^" + text + "$/;");
    
　　console.log(reg);
    
　　console.log(reg.test('123456'));

}


dynamicReg('34');   //false

dynamicReg('123456');   //true

5、不固定宽高的盒子水平垂直居中

.parent {
    width: 60%;
    height: 500px;
    position: relative;
    border: 1px solid #000;
}
.box{
    width: 30%;
    height: 20%;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
    background-color: blue;
}

<div class="parent">
    <div class="box"></div>
</div>

6、移动设备上实现滚动回弹效果

-webkit-overflow-scrolling: touch; //手指离开屏幕后，还会滚动一段距离
-webkit-overflow-scrolling: auto;    //手指离开屏幕后，立即停止滚动

7、盒子四周阴影效果

div {
    box-shadow: 0px 0px 15px #000;
}

8、正则表达式

1、正则校验是否是汉字或全角
/[^\x00-\xff]/g.test('abc')   //false

/[^\x00-\xff]/g.test('表达') 　//true
/[^\x00-\xff]/g.test('.') 　　 //false
/[^\x00-\xff]/g.test('。') 　　//true

2、密码校验：必须包含数字、英文、符号中的至少两种：
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z~!@#$%^&*()_+<>?.,]{8,20}$/

3、密码校验：必须包含数字、英文字母、特殊符号且大于等于8位：（特殊字符只能为 ~!@#$%^&*()_+<>?., 中的一种或几种）
var reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*()_+<>?.,])[\da-zA-Z~!@#$%^&*()_+<>?.,]{8,}$/;

4、密码校验：必须包含数字，大写字母，小写字母，特殊字符中的至少三种：（特殊字符只能为 ~!@#$%^&*()_+<>?., 中的一种或几种）
var reg = new RegExp('^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W~!@#$%^&*()_+<>?.,]+$)(?![a-z0-9]+$)(?![a-z\W~!@#$%^&*()_+<>?.,]+$)(?![0-9\W~!@#$%^&*()_+<>?.,]+$)[a-zA-Z0-9\W~!@#$%^&*()_+<>?.,]{8,20}$');

9、获取浏览器相关信息

/**获得屏幕宽度**/
function getScreenWidth () {
    return window.screen.width;
}

/**获得屏幕高度**/
function getScreenHeight() {
    return window.screen.height;
}

/**获得浏览器***/
function getBrowse() {
    var browser = {};
    var userAgent = navigator.userAgent.toLowerCase();
    var s;
    (s = userAgent.match(/msie ([\d.]+)/)) ? browser.ie = s[1] : (s = userAgent.match(/firefox\/([\d.]+)/)) ? browser.firefox = s[1] : (s = userAgent.match(/chrome\/([\d.]+)/)) ? browser.chrome = s[1] : (s = userAgent.match(/opera.([\d.]+)/)) ? browser.opera = s[1] : (s = userAgent.match(/version\/([\d.]+).*safari/)) ? browser.safari = s[1] : 0;
    var version = "";
    if (browser.ie) {
        version = 'IE ' + browser.ie;
    }
    else {
        if (browser.firefox) {
            version = 'firefox ' + browser.firefox;
        }
        else {
            if (browser.chrome) {
                version = 'chrome ' + browser.chrome;
            }
            else {
                if (browser.opera) {
                    version = 'opera ' + browser.opera;
                }
                else {
                    if (browser.safari) {
                        version = 'safari ' + browser.safari;
                    }
                    else {
                        version = '未知浏览器';
                    }
                }
            }
        }
    }
    return version;
}

/**获得操作系统***/
function getClientOs() {
    var sUserAgent = navigator.userAgent;
    var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
    var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
    if (isMac)
        return "Mac";
    var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
    if (isUnix)
        return "Unix";
    var isLinux = (String(navigator.platform).indexOf("Linux") > -1);
    if (isLinux)
        return "Linux";
    if (isWin) {
        var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1;
        if (isWin2K)
            return "Win2000";
        var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;
        if (isWinXP)
            return "WinXP";
        var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
        if (isWin2003)
            return "Win2003";
        var isWinVista = sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
        if (isWinVista)
            return "WinVista";
        var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
        if (isWin7)
            return "Win7";
    }
    return "other";
}

10、生成唯一的uuid

function guid() {
    function S4() {
       return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    }
    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}

function guid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
        return v.toString(16);
    });
}

function uuid() {
    var s = [];
    var hexDigits = "0123456789abcdef";
    for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
    s[8] = s[13] = s[18] = s[23] = "-";

    var uuid = s.join("");
    return uuid;
}

11、字体

宋体    SimSun
黑体    SimHei
微软雅黑    Microsoft YaHei
微软正黑体    Microsoft JhengHei
新宋体    NSimSun
新细明体    PMingLiU
细明体    MingLiU
标楷体    DFKai-SB
仿宋    FangSong
楷体    KaiTi
仿宋_GB2312    FangSong_GB2312
楷体_GB2312    KaiTi_GB2312
宋体：SimSuncss中中文字体（font-family）的英文名称

Mac OS的一些：
华文细黑：STHeiti Light [STXihei]
华文黑体：STHeiti
华文楷体：STKaiti
华文宋体：STSong
华文仿宋：STFangsong
儷黑 Pro：LiHei Pro Medium
儷宋 Pro：LiSong Pro Light
標楷體：BiauKai
蘋果儷中黑：Apple LiGothic Medium
蘋果儷細宋：Apple LiSung Light

Windows的一些：
新細明體：PMingLiU
細明體：MingLiU
標楷體：DFKai-SB
黑体：SimHei
新宋体：NSimSun
仿宋：FangSong
楷体：KaiTi
仿宋_GB2312：FangSong_GB2312
楷体_GB2312：KaiTi_GB2312
微軟正黑體：Microsoft JhengHei
微软雅黑体：Microsoft YaHei

装Office会生出来的一些：
隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei

Windows 中的中文字体。
在默认情况下，也就是未自行安装新字体或者 Office 等文字处理软件的情况下，Windows 默认提供下列字体：
Windows 95/98/98SE 宋体、黑体、楷体_GB2312、仿宋_GB2312
Windows XP/2000/2003/ME/NT 宋体/新宋体、黑体、楷体_GB2312、仿宋_GB2312 (Windows XP SP3 宋体-PUA)
Windows Vista/7/2008 宋体/新宋体、黑体、楷体、仿宋、微软雅黑、SimSun-ExtB

那么每种字体能显示那些汉字呢？
Vista 之前的 Windows 中宋体/新宋体、黑体支持 GBK 1.0 字符集，
楷体_GB2312、仿宋_GB2312 支持 GB2312-80 字符集。
（注：Windows 3.X 只能支持 GB2312-80 字符集）

Vista 及之后的 Windows 中宋体/新宋体、黑体、楷体、仿宋、微软雅黑支持 GB18030-2000 字符集，
SimSun-ExtB 只支持 GB18030-2005 字符集扩展 B 部分。
下面对字符集进行简单的介绍：

GB2312-80 < GBK 1.0 < GB18030-2000 < GB18030-2005
GB2312-80 中的字符数量最少，GB18030-2005 字符数量最多。
GB2312-80 是最早的版本，字符数比较少；
GBK 1.0 中的汉字大致与 Unicode 1.1 中的汉字数量相同；
GB18030-2000 中的汉字大致与 Unicode 3.0 中的汉字数量相同，主要增加了扩展 A 部分；
GB18030-2005 中的汉字大致与 Unicode 4.1 中的汉字数量相同，主要增加了扩展 B 部分；
由于 Unicode 5.2 的发布，估计 GB18030 会在近期发布新版本，增加扩展 C 部分。

需要说明的是在 GB18030 中扩展 B 部分并不是强制标准。
如果想查看 GB18030 的标准文本，请访问 http://www.gb168.cn 中的强标阅读。
如果想了解 Unicode 的内容，请访问 http://www.unicode.org。

现在纠正网上普遍的一个错误：
GB18030-2000 和 GB18030-2005 都不支持单字节的欧元符号

与简体中文有关的代吗页如下：
936 gb2312 简体中文(GB2312)————其实是GBK
10008 x-mac-chinesesimp 简体中文(Mac)
20936 x-cp20936 简体中文(GB2312-80)
50227 x-cp50227 简体中文(ISO-2022)
51936 EUC-CN 简体中文(EUC)
52936 hz-gb-2312 简体中文(HZ)
54936 GB18030 简体中文(GB18030)

补充：
使用楷体_GB2312、仿宋_GB2312后，在 Windows 7/Vista/2008 中可能不再显示为对应的字体。
这是因为 Windows 7/Vista/2008 中有楷体、仿宋，默认情况下没有楷体_GB2312、仿宋_GB2312，字体名称相差“_GB2312”。