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 0010s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01s[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”。
轉載于:https://www.cnblogs.com/libo0125ok/p/8303686.html
總結
以上是生活随笔為你收集整理的web前端几个小知识点笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [转载]李开复针对马加爵事件写给中国学生
- 下一篇： python栈的实现与应用