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、正则验证是否是汉字或全角

/[^\x00-\xff]/g.test('abc')   //false

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

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、字体

宋体    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”。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Silverlight:MouseDragElementBehavior无法应用于ListBox的变相解决办法

Blend自带的行为MouseDragElementBehavior应用到ListBox后,如果用鼠标按住列表列拖动,没有任何效果,在多次尝试中意外发现,如果将...

23680
来自专栏向治洪

9.png

 一、什么是9.png:         可能做过任务栏美化的同学都会知道,我靠,framework-res.apk\res\drawable-hdpi 目...

251100
来自专栏Windows Community

Windows Community Toolkit 3.0 - InfiniteCanvas

InfiniteCanvas 是一个 Canvas 控件,它支持无限画布的滚动,支持 Ink,文本,格式文本,画布缩放操作,撤销重做操作,导入和导出数据。

8130
来自专栏游戏杂谈

as3与php 上传多张图片demo

2、在一次添加的图片中如果超出最大上传数,忽略本次选中的所有图片(又得重新选一次,此现象普通存在于目前各大网站的flash批量上传中)

21220
来自专栏微信终端开发团队的专栏

iOS 事件处理机制与图像渲染过程

致歉声明: Peter在开发公众号功能时触发了一个bug,导致群发错误。对此我们深表歉意,并果断开除了Peter。以下交回给正文时间: iOS 事件处理机制与...

1.2K90
来自专栏用户2442861的专栏

HTML中使背景图片自适应浏览器大小

1、图片不够大,又background属性不能拉伸图片; 2、只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<...

1.5K10
来自专栏菩提树下的杨过

fms4 p2p:图片分享

这其实是http://www.flashrealtime.com/file-share-object-replication-flash-p2p/ 中关于文件分...

21770
来自专栏Windows Community

New UWP Community Toolkit - DropShadowPanel

概述 UWP Community Toolkit  中有一个为 Frmework Element 提供投影效果的控件 - DropShadowPanel,本篇我...

39470
来自专栏AhDung

【C#】分享一个可携带附加消息的增强消息框MessageBoxEx

--------------201806111122更新---------------

17510
来自专栏xingoo, 一个梦想做发明家的程序员

快捷键整理

Eclipse 跳转到指定行:ctrl+l 1几个最重要的快捷键 代码助手:Ctrl+Space(简体中文操作系统是Alt+/) 快速修正:Ctrl+1 单词补...

19490

扫码关注云+社区

领取腾讯云代金券