我的移動端media
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}複製程式碼forEach()與map()方法
一個陣列組成最大的數：
對localStorage的封裝，使用更簡單
//在get時，如果是JSON格式，那麼將其轉換為JSON，而不是字串。以下是基礎程式碼：
var Store = {
get: function(key) {
var value = localStorage.getItem(key);
if (value) {
try {
var value_json = JSON.parse(value);
if (typeof value_json === 'object') {
return value_json;
} else if (typeof value_json === 'number') {
return value_json;
}
} catch(e) {
return value;
}
} else {
return false;
}
},
set: function(key, value) {
localStorage.setItem(key, value);
},
remove: function(key) {
localStorage.removeItem(key);
},
clear: function() {
localStorage.clear();
}
};
複製程式碼在此基礎之上，可以擴充套件很多方法，比如批量儲存或刪除一些資料：
// 批量儲存，data是一個字典
Store.setList = function(data) {
for (var i in data) {
localStorage.setItem(i, data[i]);
}
};
// 批量刪除，list是一個陣列
Store.removeList = function(list) {
for (var i = 0, len = list.length; i < len; i++) {
localStorage.removeItem(list[i]);
}
};複製程式碼js判斷滾動條是否到底部：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src=""></script>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#main {
width: 100%;
height: 2000px;
background: pink;
}
</style>
<script type="text/javascript">
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
var docHeight = $(document).height();
var windowHeight = $(this).height();
var scrollHeight=document.body.scrollHeight;
console.log("scrollTop:"+scrollTop);
console.log("scrollbottom:"+(docHeight-scrollTop-windowHeight));
if(scrollTop + windowHeight == docHeight) {
alert("已經到最底部了！");
}
});
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>
複製程式碼js操作cookie
JS設定cookie:
假設在A頁面中要儲存變數username的值("jack")到cookie中,key值為name，則相應的JS程式碼為：
document.cookie="name="+username;
JS讀取cookie:
假設cookie中儲存的內容為：name=jack;password=123
則在B頁面中獲取變數username的值的JS程式碼如下：
var username=document.cookie.split(";")[0].split("=")[1];
//JS操作cookies方法!
//寫cookies
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//讀取cookies
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
//刪除cookies
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//使用示例
setCookie("name","hayden");
alert(getCookie("name"));
//如果需要設定自定義過期時間
//那麼把上面的setCookie 函式換成下面兩個函式就ok;
//程式程式碼
function setCookie(name,value,time)
{
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec*1);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getsec(str)
{
alert(str);
var str1=str.substring(1,str.length)*1;
var str2=str.substring(0,1);
if (str2=="s")
{
return str1*1000;
}
else if (str2=="h")
{
return str1*60*60*1000;
}
else if (str2=="d")
{
return str1*24*60*60*1000;
}
}
//這是有設定過期時間的使用示例：
//s20是代表20秒
//h是指小時，如12小時則是：h12
//d是天數，30天則：d30
setCookie("name","hayden","s20");
/***************************************/
function getCookie(name){
if(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return (decodeURIComponent(arr[2]));
else
return null;
}
return null;
};
function setCookie(name,value,Days){
if(!Days)Days=3000;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000000);
document.cookie = name + "="+ encodeURIComponent(value) + ";domain=weshare.com.cn;expires=" + exp.toGMTString() + ";path=/";
};
複製程式碼獲取URL引數：
function GetURLlist(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null) return unescape(r[2]);
return null;
};
複製程式碼IOS和安卓判斷：
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android終端或者uc瀏覽器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if(isAndroid){
$(".down0").css('display','none')
}else if(isiOS){
$(".down").css('display','none')
}
else{
return false;
}
複製程式碼判斷微信：
function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}
複製程式碼var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1|| u.indexOf('MI') > -1|| <br>u.indexOf('XiaoMi') > -1; //android終端或者uc，小米等奇葩瀏覽器
if(!isAndroid) {}
if(isAndroid) {}複製程式碼判斷頁面滾動方向：
<script type="text/javascript">
$(function() {
function scroll(fn) {
var beforeScrollTop = document.body.scrollTop,
fn = fn || function() {};
window.addEventListener("scroll", function() {
var afterScrollTop = document.body.scrollTop,
delta = afterScrollTop - beforeScrollTop;
if(delta === 0) return false;
fn(delta > 0 ? "down" : "up");
beforeScrollTop = afterScrollTop;
}, false);
}
scroll(function(direction) {
if(direction == "down") {
console.log("向下滾");
} else {
console.log("向上滾");
}
});
});
</script>
複製程式碼 <script type="text/javascript">
var windowHeight = $(window).height();
$("body").css("height", windowHeight);
var startX, startY, moveEndX, moveEndY, X, Y;
$("body").on("touchstart", function(e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function(e) {
e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX, moveEndY = e.originalEvent.changedTouches[0].pageY, X = moveEndX - startX, Y = moveEndY - startY;
if (Math.abs(X) > Math.abs(Y) && X > 0) {
alert("left to right");
} else if (Math.abs(X) > Math.abs(Y) && X < 0) {
alert("right to left");
} else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
alert("top to bottom");
} else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
alert("bottom to top");
} else {
alert("just touch");
}
});
</script>複製程式碼排序
<script type="text/javascript">
var a = [1, 18, 23, 9, 16, 10, 29, 17];
var t = 0;
for(var i = 0; i < a.length; i++) {
for(var j = i + 1; j < a.length; j++) {
if(a[i] > a[j]) {
t = a[i];
a[i] = a[j];
a[j] = t;
}
}
}
console.log(a); //[1, 9, 10, 16, 17, 18, 23, 29]
</script>
複製程式碼倒數計時：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下班倒數計時</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
text-align: center;
font-family: arial;
}
.time {
margin-top: 10px;
border: 1px solid red;
height: 30px;
padding: 2px;
line-height: 30px;
}
</style>
</head>
<body>
<div class="time">
<span id="t_d">00天</span>
<span id="t_h">00時</span>
<span id="t_m">00分</span>
<span id="t_s">00秒</span>
</div>
<script>
setInterval(function() {
var EndTime = new Date('2016/06/13 00:00:00');
var NowTime = new Date();
var t = EndTime.getTime() - NowTime.getTime();
var d = 0;
var h = 0;
var m = 0;
var s = 0;
if (t >= 0) {
d = Math.floor(t / 1000 / 60 / 60 / 24);
h = Math.floor(t / 1000 / 60 / 60 % 24);
m = Math.floor(t / 1000 / 60 % 60);
s = Math.floor(t / 1000 % 60);
}
document.getElementById("t_d").innerHTML = d + "天";
document.getElementById("t_h").innerHTML = h + "時";
document.getElementById("t_m").innerHTML = m + "分";
document.getElementById("t_s").innerHTML = s + "秒";
}, 10);
</script>
</body>
</html>
複製程式碼型別判斷：
function _typeOf(obj) {
return Object.prototype.toString.call(obj).toLowerCase().slice(8, -1); //
}
判斷undefined:
<span style="font-size: small;">
var tmp = undefined;
if (typeof(tmp) == "undefined"){
alert("undefined");
}
</span>
判斷null:
<span style="font-size: small;">
var tmp = null;
if (!tmp && typeof(tmp)!="undefined" && tmp!=0){
alert("null");
}
</span>
判斷NaN:
var tmp = 0/0;
if(isNaN(tmp)){
alert("NaN");
}
判斷undefined和null:
<span style="font-size: small;">
var tmp = undefined;
if (tmp== undefined)
{
alert("null or undefined");
}
</span>
<span style="font-size: small;">
var tmp = undefined;
if (tmp== null)
{
alert("null or undefined");
}
</span>
判斷undefined、null與NaN:
<span style="font-size: small;">
var tmp = null;
if (!tmp)
{
alert("null or undefined or NaN");
}
</span> 複製程式碼Ajax
jquery ajax函式
我自己封裝了一個ajax的函式，程式碼如下：
var Ajax = function(url, type success, error) {
$.ajax({
url: url,
type: type,
dataType: 'json',
timeout: 10000,
success: function(d) {
var data = d.data;
success && success(data);
},
error: function(e) {
error && error(e);
}
});
};
// 使用方法：
Ajax('/data.json', 'get', function(data) {
console.log(data);
});
複製程式碼jsonp方式
有時候我們為了跨域，要使用jsonp的方法，我也封裝了一個函式：
function jsonp(config) {
var options = config || {}; // 需要配置url, success, time, fail四個屬性
var callbackName = ('jsonp_' + Math.random()).replace(".", "");
var oHead = document.getElementsByTagName('head')[0];
var oScript = document.createElement('script');
oHead.appendChild(oScript);
window[callbackName] = function(json) { //建立jsonp回撥函式
oHead.removeChild(oScript);
clearTimeout(oScript.timer);
window[callbackName] = null;
options.success && options.success(json); //先刪除script標籤，實際上執行的是success函式
};
oScript.src = options.url + '?' + callbackName; //傳送請求
if (options.time) { //設定超時處理
oScript.timer = setTimeout(function () {
window[callbackName] = null;
oHead.removeChild(oScript);
options.fail && options.fail({ message: "超時" });
}, options.time);
}
};
// 使用方法：
jsonp({
url: '/b.com/b.json',
success: function(d){
//資料處理
},
time: 5000,
fail: function(){
//錯誤處理
}
});複製程式碼JS生成隨機字串的最佳實踐
var random_str = function() {
var len = 32;
var chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
var max = chars.length;
var str = '';
for (var i = 0; i < len; i++) {
str += chars.charAt(Math.floor(Math.random() * max));
}
return str;
};
//這樣生成一個32位的隨機字串，相同的概率低到不可能。複製程式碼常用正規表示式
JavaScript過濾Emoji的最佳實踐
name = name.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, "");
複製程式碼手機號驗證：
var validate = function(num) {
var reg = /^1[3-9]\d{9}$/;
return reg.test(num);
};
複製程式碼身份證號驗證：
var reg = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
複製程式碼ip驗證：
var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/
複製程式碼常用js函式
返回頂部：
$(window).scroll(function() {
var a = $(window).scrollTop();
if(a > 100) {
$('.go-top').fadeIn();
}else {
$('.go-top').fadeOut();
}
});
$(".go-top").click(function(){
$("html,body").animate({scrollTop:"0px"},'600');
});
複製程式碼阻止冒泡：
function stopBubble(e){
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation(); //W3C阻止冒泡方法
}else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
複製程式碼全部替換replaceAll：
var replaceAll = function(bigStr, str1, str2) { //把bigStr中的所有str1替換為str2
var reg = new RegExp(str1, 'gm');
return bigStr.replace(reg, str2);
}
複製程式碼獲取瀏覽器url中的引數值：
var getURLParam = function(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)', "ig").exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
};
複製程式碼深度拷貝物件：
function cloneObj(obj) {
var o = obj.constructor == Object ? new obj.constructor() : new obj.constructor(obj.valueOf());
for(var key in obj){
if(o[key] != obj[key] ){
if(typeof(obj[key]) == 'object' ){
o[key] = mods.cloneObj(obj[key]);
}else{
o[key] = obj[key];
}
}
}
return o;
}
複製程式碼陣列去重：
var unique = function(arr) {
var result = [], json = {};
for (var i = 0, len = arr.length; i < len; i++){
if (!json[arr[i]]) {
json[arr[i]] = 1;
result.push(arr[i]); //返回沒被刪除的元素
}
}
return result;
};
複製程式碼判斷陣列元素是否重複：
var isRepeat = function(arr) { //arr是否有重複元素
var hash = {};
for (var i in arr) {
if (hash[arr[i]]) return true;
hash[arr[i]] = true;
}
return false;
};
複製程式碼生成隨機數：
function randombetween(min, max){
return min + (Math.random() * (max-min +1));
}
複製程式碼操作cookie：
own.setCookie = function(cname, cvalue, exdays){
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = 'expires='+d.toUTCString();
document.cookie = cname + '=' + cvalue + '; ' + expires;
};
own.getCookie = function(cname) {
var name = cname + '=';
var ca = document.cookie.split(';');
for(var i=0; i< ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
}
return '';
};
複製程式碼資料型別： underfined、null、0、false、NaN、空字串。他們的邏輯非結果均為true。
閉包格式： 好處：避免命名衝突（全域性變數汙染）。
(function(a, b) {
console.log(a+b); //30
})(10, 20);
複製程式碼擷取和清空陣列：
var arr = [12, 222, 44, 88];
arr.length = 2; //擷取，arr = [12, 222];
arr.length = 0; //清空，arr will be equal to [].
複製程式碼獲取陣列的最大最小值：
var numbers = [5, 45822, 120, -215];
var maxInNumbers = Math.max.apply(Math, numbers); //45822
var minInNumbers = Math.min.apply(Math, numbers); //-215
複製程式碼浮點數計算問題：
0.1 + 0.2 == 0.3 //false
複製程式碼為什麼呢？因為0.1+0.2等於0.30000000000000004。JavaScript的數字都遵循IEEE 754標準構建，在內部都是64位浮點小數表示。可以通過使用toFixed()來解決這個問題。
陣列排序sort函式：
var arr = [1, 5, 6, 3]; //數字陣列
arr.sort(function(a, b) {
return a - b; //從小到大排
return b - a; //從大到小排
return Math.random() - 0.5; //陣列洗牌
});
複製程式碼var arr = [{ //物件陣列
num: 1,
text: 'num1'
}, {
num: 5,
text: 'num2'
}, {
num: 6,
text: 'num3'
}, {
num: 3,
text: 'num4'
}];
arr.sort(function(a, b) {
return a.num - b.num; //從小到大排
return b.num - a.num; //從大到小排
});
複製程式碼物件和字串的轉換：
var obj = {a: 'aaa', b: 'bbb'};
var objStr = JSON.stringify(obj); // "{"a":"aaa","b":"bbb"}"
var newObj = JSON.parse(objStr); // {a: "aaa", b: "bbb"}
複製程式碼物件拷貝與賦值
var obj = {
name: 'xiaoming',
age: 23
};
var newObj = obj;
newObj.name = 'xiaohua';
console.log(obj.name); // 'xiaohua'
console.log(newObj.name); // 'xiaohua'
複製程式碼上方我們將obj物件賦值給了newObj物件，從而改變newObj的name屬性，但是obj物件的name屬性也被篡改，這是因為實際上newObj物件獲得的只是一個記憶體地址，而不是真正 的拷貝，所以obj物件被篡改。
var obj2 = {
name: 'xiaoming',
age: 23
};
var newObj2 = Object.assign({}, obj2, {color: 'blue'});
newObj2.name = 'xiaohua';
console.log(obj2.name); // 'xiaoming'
console.log(newObj2.name); // 'xiaohua'
console.log(newObj2.color); // 'blue'
複製程式碼上方利用Object.assign()方法進行物件的深拷貝可以避免源物件被篡改的可能。因為Object.assign() 方法可以把任意多個的源物件自身的可列舉屬性拷貝給目標物件，然後返回目標物件。
var obj3 = {
name: 'xiaoming',
age: 23
};
var newObj3 = Object.create(obj3);
newObj3.name = 'xiaohua';
console.log(obj3.name); // 'xiaoming'
console.log(newObj3.name); // 'xiaohua'
複製程式碼我們也可以使用Object.create()方法進行物件的拷貝，Object.create()方法可以建立一個具有指定原型物件和屬性的新物件。
git筆記
git使用之前的配置：
1.git config --global user.email xxx@163.com
2.git config --global user.name xxx
3.ssh-keygen -t rsa -C xxx@163.com(郵箱地址) // 生成ssh
4.找到.ssh資料夾開啟，使用cat id_rsa.pub //開啟公鑰ssh串
5.登陸github，settings － SSH keys － add ssh keys （把上面的內容全部新增進去即可）
複製程式碼說明：然後這個郵箱（xxxxx@gmail.com）對應的賬號在github上就有許可權對倉庫進行操作了。可以盡情的進行下面的git命令了。
git常用命令：
1、git config user.name / user.email //檢視當前git的使用者名稱稱、郵箱
2、git clone https://github.com/jarson7426/javascript.git project //clone倉庫到本地。
3、修改原生程式碼，提交到分支: git add file / git commit -m “新增檔案”
4、把本地庫推送到遠端庫: git push origin master
5、檢視提交日誌：git log -5
6、返回某一個版本：git reset --hard 123
7、分支：git branch / git checkout name / git checkout -b dev
8、合併name分支到當前分支：git merge name / git pull origin
9、刪除本地分支：git branch -D name
10、刪除遠端分支： git push origin :daily/x.x.x
11、git checkout -b mydev origin/daily/1.0.0 //把遠端daily分支對映到本地mydev分支進行開發
12、合併遠端分支到當前分支 git pull origin daily/1.1.1
13、釋出到線上：
git tag publish/0.1.5
git push origin publish/0.1.5:publish/0.1.5
14、線上程式碼覆蓋到本地：
git checkout --theirs build/scripts/ddos
git checkout --theirs src/app/ddos
複製程式碼判斷是否有中文：
var reg = /.*[\u4e00-\u9fa5]+.*$/;
reg.test('123792739測試') //true
複製程式碼判斷是物件還是陣列：
function isArray = function(o) {
return toString.apply(o) === '[object Array]';
}
function isObject = function(o) {
return toString.apply(o) === '[object Object]';
}
複製程式碼CSS修改滾動條樣式：
::-webkit-scrollbar {
width: 10px;
background-color: #ccc;
}
::-webkit-scrollbar-track {
background-color: #ccc;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background-color: rgb(255, 255, 255);
background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(rgb(77, 156, 65)), color-stop(0.6, rgb(84, 222, 93)), to(rgb(25, 145, 29)));
border-radius: 10px;
}
複製程式碼單行多行省略號：
<style type="text/css">
.inaline {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/*clip 修剪文字。*/
}
.intwoline {
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
</style>
複製程式碼遮罩：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>RGBA 遮罩</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
html,
body {
width: 100%;
min-height: 100%;
background: white;
}
div.mask {
display: none;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
}
div.masks-body {
width: 300px;
height: 300px;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background: green;
margin: auto;
}
p {
position: absolute;
width: 30px;
height: 30px;
background: red;
right: 0px;
top: -30px;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.querySelector("#main").onclick = function() {
document.querySelector(".mask").style.display = "block";
}
document.querySelector("p#close").onclick=function(){
document.querySelector(".mask").style.display = "none";
}
}
</script>
</head>
<body>
<button id="main">點我</button>
<div class="mask">
<div class="masks-body">
<p id="close"></p>
</div>
</div>
</body>
</html>
複製程式碼常見頁面flex佈局：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
html,
body {
width: 100%;
min-height: 100%;
min-width: 1200px;
overflow-x: hidden;
}
h1 {
color: red;
text-align: center;
}
#main0 {
height: 400px;
background: black;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
}
#main0 div:nth-child(2n) {
flex: 1;
height: 200px;
font-size: 100px;
line-height: 200px;
text-align: center;
background: red;
}
#main0 div:nth-child(2n+1) {
flex: 1;
height: 200px;
line-height: 200px;
font-size: 100px;
text-align: center;
background: blue;
}
#main1 {
height: 400px;
background: pink;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
}
#main1 div:nth-child(2n) {
flex: 1;
height: 200px;
font-size: 100px;
line-height: 200px;
text-align: center;
background: red;
}
#main1 div:nth-child(2n+1) {
width: 300px;
height: 200px;
font-size: 100px;
line-height: 200px;
text-align: center;
background: blue;
}
#main2 {
height: 400px;
background: yellow;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
}
#main2 div:nth-child(2n) {
flex: 1;
height: 200px;
font-size: 100px;
line-height: 200px;
text-align: center;
background: red;
}
#main2 div:nth-child(2n+1) {
width: 300px;
height: 200px;
font-size: 100px;
line-height: 200px;
text-align: center;
background: blue;
}
#main3 {
height: 400px;
background: fuchsia;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
}
#main3 div.div1 {
flex: 1;
height: 200px;
font-size: 100px;
line-height: 200px;
text-align: center;
background: blue;
}
#main3 div.div2 {
flex: 2;
height: 200px;
font-size: 100px;
line-height: 200px;
text-align: center;
background: red;
}
#main3 div.div3 {
flex: 3;
height: 200px;
font-size: 100px;
line-height: 200px;
text-align: center;
background: orange;
}
</style>
</head>
<body>
<h1>等分佈局</h1>
<div id="main0">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<h1>左邊固定右邊自適應佈局</h1>
<div id="main1">
<div>1</div>
<div>2</div>
</div>
<h1>左右固定中間自適應佈局</h1>
<div id="main2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<h1>寬度等差佈局</h1>
<div id="main3">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
</body>
</html>
複製程式碼flex: 1的使用：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#main {
display: flex;
align-items: center;
}
h1 {
background: red;
flex: 1;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<p>哈哈哈</p>
<h1>啊啊啊</h1>
<div>嗚嗚嗚</div>
</div>
</body>
</html>
複製程式碼單行超出省略字
.div{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}複製程式碼placeholder顏色
input::-webkit-input-placeholder{
color: #666;
}
複製程式碼禁止文字選擇
.div{
-moz-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
-khtml-user-select:none;
user-select:none;
}
複製程式碼iOS慣性滾動
.div{
-webkit-overflow-scrolling:touch !important;
}
複製程式碼表單100%寬，但是有padding
input{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
複製程式碼字型細長
.div{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
複製程式碼橫向滾動
.div{
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
複製程式碼IOS開關：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div#main {
width: 208px;
height: 108px;
border-radius: 60px;
background: pink;
overflow: hidden;
transition: all 300ms linear 0s;
}
div#main.bk {
background: red;
}
div.ios {
width: 100px;
height: 100px;
border-radius: 50px;
background: blue;
margin-left: 4px;
margin-top: 4px;
transition: all 300ms linear 0s;
}
div.ios.sb {
margin-left: 104px;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById("main").onclick = function() {
if(document.querySelector("div.ios").classList.contains("sb")) {
document.querySelector("div.ios").classList.remove("sb");
this.classList.remove("bk");
return false;
}
document.querySelector("div.ios").classList.add("sb");
this.classList.add("bk");
}
}
</script>
</head>
<body>
<div id="main">
<div class="ios"></div>
</div>
</body>
</html>
複製程式碼一個高度自適應的DIV
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一個高度自適應的DIV</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
div {
width: 100%;
position: absolute; /*relative 不可以*/
top: 100px;
bottom: 100px;
left: 0px;
right: 0px;
background: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
複製程式碼淺拷貝與深拷貝
-------------
淺拷貝
-------------
var obj = {
name: 'name'
}
var a = obj;
a.name = 'new name';
console.log(a.name); // 'new name'
console.log(obj.name); // 'new name'
這裡就是一個淺拷貝的例子。a只是通過賦值符號得到了obj的引用。
---------------
深拷貝
---------------
function object(parent, child) {
var i,
tostring = Object.prototype.toString,
aStr = "[object Array]";
child = child || {};
for(i in parent) {
if(parent.hasOwnProperty(i)) {
//這時候還要判斷它的值是不是物件
if(typeof parent[i] === 'object') {
child[i] = tostring.call(parent[i]) === aStr ? [] : {};
object(parent[i], child[i]);
}
else {
child[i] = parent[i];
}
}
}
return child;
}
var obj = {
tags: ['js','css'],
s1: {
name: 'dai',
age: 21
},
flag: true
}
var some = object(obj);
some.tags = [1,2];
console.log(some.tags); //[1, 2]
console.log(obj.tags); //['js', 'css']
複製程式碼placeholder是H5的一個新屬性，但是在IE9以下是不支援的，為此我們會封裝一個函式進行能力檢測。
$(function() {
// 如果不支援placeholder，用jQuery來完成
if(!isSupportPlaceholder()) {
// 遍歷所有input物件, 除了密碼框
$('input').not("input[type='password']").each(
function() {
var self = $(this);
var val = self.attr("placeholder");
input(self, val);
}
);
/**
* 對password框的特殊處理
* 1.建立一個text框
* 2.獲取焦點和失去焦點的時候切換
*/
$('input[type="password"]').each(
function() {
var pwdField = $(this);
var pwdVal = pwdField.attr('placeholder');
var pwdId = pwdField.attr('id');
// 重新命名該input的id為原id後跟1
pwdField.after('<input id="' + pwdId +'1" type="text" value='+pwdVal+' autocomplete="off" />');
var pwdPlaceholder = $('#' + pwdId + '1');
pwdPlaceholder.show();
pwdField.hide();
pwdPlaceholder.focus(function(){
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
});
pwdField.blur(function(){
if(pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});
}
);
}
});
// 判斷瀏覽器是否支援placeholder屬性
function isSupportPlaceholder() {
var input = document.createElement('input');
return 'placeholder' in input;
}
// jQuery替換placeholder的處理
function input(obj, val) {
var $input = obj;
var val = val;
$input.attr({value:val});
$input.focus(function() {
if ($input.val() == val) {
$(this).attr({value:""});
}
}).blur(function() {
if ($input.val() == "") {
$(this).attr({value:val});
}
});
}
複製程式碼蘋果瀏覽器和uc瀏覽器在移動端的坑（日常積累，隨時更新）
1 . 移動端uc瀏覽器不相容css3 calc()
2 . ie8下a標籤沒有內容給寬高也不能觸發點選跳轉
3 . safari輸入框加上readOnly="ture"屬性仍然可以觸發獲取焦點，可再加上onfocus="this.blur()“解決
日期格式化：
// 對Date的擴充套件，將 Date 轉化為指定格式的String
// 月(M)、日(d)、小時(h)、分(m)、秒(s)、季度(q) 可以用 1-2 個佔位符，
// 年(y)可以用 1-4 個佔位符，毫秒(S)只能用 1 個佔位符(是 1-3 位的數字)
// 例子：
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18 Date.prototype.Format = function (fmt) { //author: meizz var o = {
"M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小時 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 };
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
呼叫：
var time1 = new Date().Format("yyyy-MM-dd");
var time2 = new Date().Format("yyyy-MM-dd HH:mm:ss"); 複製程式碼
js中不存在自帶的sleep方法，要想休眠要自己定義個方法:
function sleep(numberMillis) {
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while (true) {
now = new Date();
if (now.getTime() > exitTime)
return;
}
}
複製程式碼將 Date 轉化為指定格式的String
// 對Date的擴充套件，將 Date 轉化為指定格式的String
// 月(M)、日(d)、小時(h)、分(m)、秒(s)、季度(q) 可以用 1-2 個佔位符，
// 年(y)可以用 1-4 個佔位符，毫秒(S)只能用 1 個佔位符(是 1-3 位的數字)
// 例子：
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
Date.prototype.Format = function (fmt) { //author: zouqj
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小時
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
複製程式碼獲取當前時間，格式：yyyy-MM-dd hh:mm:ss
//獲取當前時間，格式：yyyy-MM-dd hh:mm:ss
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
+ " " + date.getHours() + seperator2 + date.getMinutes()
+ seperator2 + date.getSeconds();
return currentdate;
}
複製程式碼生成一個由隨機陣列成的偽Guid（32位Guid字串）
//方式一
function newPseudoGuid () {
var guid = "";
for (var i = 1; i <= 32; i++) {
var n = Math.floor(Math.random() * 16.0).toString(16);
guid += n;
if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
guid += "-";
}
return guid;
}
//方式二
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
//生成guid
function guid() {
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
}
複製程式碼判斷js是否載入完畢：
在正常的載入過程中，js檔案的載入是同步的，也就是說在js載入的過程中，瀏覽器會阻塞接下來的內容的解析。這時候，動態載入便顯得尤為重要了，由於它是非同步載入，因此，它可以在後臺自動下載，並不會妨礙其它內容的正常解析，由此，便可以提高頁面首次載入的速度。
在IE或一些基於IE核心的瀏覽器中（如Maxthon）,它是通過script節點的readystatechange方法來判斷的，而其它的一些瀏覽器中，往往是通過load事件來決定的。
function dynamicLoad()
{
var _doc=document.getElementsByTagName('head')[0];
var script=document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('src','jquery-1.4.4.js');
_doc.appendChild(script);
script.onload=script.onreadystatechange=function(){
if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
alert('done');
}
script.onload=script.onreadystatechange=null;
}
}
複製程式碼<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function dynamicLoad() {
var _doc = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'js/a.js');
_doc.appendChild(script);
script.onload = script.onreadystatechange = function() {
if(!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
alert('下載完成！');
}
script.onload = script.onreadystatechange = null;
}
}
dynamicLoad();
</script>
</head>
<body>
</body>
</html>
複製程式碼遞迴排列組合：
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script type="text/javascript">
var str = [1, 2, 3, 4, 5];
var count = 0;
function arrange(s) {
for(var i = 0, length = str.length; i < length; i++) {
if(s.length == length - 1) {
if(s.indexOf(str[i]) < 0) {
count++;
document.writeln("組合" + count + ":" + s + str[i] + '<br />');
}
continue;
}
if(s.indexOf(str[i]) < 0) {
arrange(s + str[i]);
}
}
}
arrange("");
</script>
</head>
<body>
</body>
</html>
複製程式碼js獲取頁面url：
設定或獲取物件指定的檔名或路徑。
window.location.pathname
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.pathname); 則輸出：/topic/index
設定或獲取整個 URL 為字串。
window.location.href
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.href); 則輸出：http://localhost:8086/topic/index?topicId=361
設定或獲取與 URL 關聯的埠號碼。
window.location.port
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.port); 則輸出：8086
設定或獲取 URL 的協議部分。
window.location.protocol
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.protocol); 則輸出：http:
設定或獲取 href 屬性中在井號“#”後面的分段。
window.location.hash
設定或獲取 location 或 URL 的 hostname 和 port 號碼。
window.location.host
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.host); 則輸出：http:localhost:8086
設定或獲取 href 屬性中跟在問號後面的部分。
window.location.search
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.search); 則輸出：?topicId=361
window.location
屬性 描述
hash 設定或獲取 href 屬性中在井號“#”後面的分段。
host 設定或獲取 location 或 URL 的 hostname 和 port 號碼。
hostname 設定或獲取 location 或 URL 的主機名稱部分。
href 設定或獲取整個 URL 為字串。
pathname 設定或獲取物件指定的檔名或路徑。
port 設定或獲取與 URL 關聯的埠號碼。
protocol 設定或獲取 URL 的協議部分。
search 設定或獲取 href 屬性中跟在問號後面的部分。
複製程式碼css不常用選擇器
ele:nth-of-type為什麼要叫:nth-of-type？因為它是以"type"來區分的。
也就是說：ele:nth-of-type(n)是指父元素下第n個ele元素，
而ele:nth-child(n)是指父元素下第n個元素且這個元素為ele，若不是，則選擇失敗。
h4~p h4後面的p標籤
h4+p h4相鄰的p標籤
p[id] 包含id屬性的p標籤
p[class~="b"] class類名為b且b前面有空格的p標籤
p[class|="b"] class類名為b且b後面有橫槓的p標籤
a[href^="http"] a標籤下的href以http開頭
a[href$="rar"] a標籤下的href以rar結尾
a[href*="o"] a標籤下的href有o
p::first-line 選擇p標籤下第一行
a:before（a::before），a:after（a::after） 偽元素
p::selection 選擇被選中的文字
p::first-letter 選擇p標籤下第一個字
div:not(#container) 選擇除id為container之外的所有div標籤
p:first-child 找到P，然後找P的父級 再找父級下第一個元素是P（匹配的是某父元素的第一個子元素，可以說是結構上的第一個子元素。）
p:first-of-type 找到P，然後找P的父級 再找父級下第一個元素是P（匹配的是該型別的第一個，這裡不再限制是第一個子元素了，只要是該型別元素的第一個就行了，當然這些元素的範圍都是屬於同一級的，也就是同輩的。）
p:last-child 找到P 然後找P的父級 再找父級下最後一個元素是P
p:last-of-type 找到P 然後找P的父級 再找父級下最後一個元素是P
li:nth-child(2) 找到li 然後找li的父級 再找父級下第二個元素是li
li:nth-of-type(2)
li:nth-last-child(2) 找到li 然後找li的父級 再找父級下倒數第二元素個是li
li:nth-last-of-type(2)
li:nth-child(even) 找到li的所有偶數位(2N)
li:nth-last-child(even)
li:nth-last-child(odd) 找到li的所有奇數位(2N-1 或 2n+1)
li:nth-last-child(odd)
li:only-child 找到li是父級的唯一子元素(選擇器選擇的是父元素中只有一個子元素，而且只有唯一的一個子元素)
li:only-of-type 表示一個元素他有很多個子元素，而其中只有一種型別的子元素是唯一的，使用“:only-of-type”選擇器就可以選中這個元素中的唯一一個型別子元素。
複製程式碼對 Select 的各種操作（JQuery）
<select id="relationship" name="relationship" required="true">
<option value="1">父母</option>
<option value="2">夫妻</option>
<option value="3">子女</option>
<option value="4">朋友</option>
<option value="5">其他</option>
</select>
複製程式碼$(document).ready(function() {
//獲取下拉框選中項的index屬性值
var selectIndex = $("#relationship").get(0).selectedIndex;
alert(selectIndex);
//繫結下拉框change事件，當下來框改變時呼叫 SelectChange()方法
$("#relationship").change(function() {
//todo
});
//獲取下拉框選中項的value屬性值
var selectValue = $("#relationship").val();
alert(selectValue);
//獲取下拉框選中項的text屬性值
var selectText = $("#relationship").find("option:selected").text();
alert(selectText);
//設定下拉框index屬性為5的選項 選中
$("#relationship").get(0).selectedIndex = 5;
//設定下拉框value屬性為4的選項 選中
$("#relationship").val(4);
//設定下拉框text屬性為5的選項 選中
$("#relationship option[text=5]").attr("selected", "selected");
$("#yyt option:contains('5')").attr("selected", true);
////獲取下拉框最大的index屬性值
var selectMaxIndex = $("#relationship option:last").attr("index");
alert(selectMaxIndex);
//在下拉框最前新增一個選項
$("#relationship").prepend("<option value='0'>領導</option>");
//在下拉框最後新增一個選項
$("#relationship").append("<option value='6'>同事</option>");
//移除下拉框最後一個選項
$("#relationship option:last").remove();
//移除下拉框 index屬性為1的選項
$("#relationship option[index=1]").remove();
//移除下拉框 value屬性為4的選項
$("#relationship option[value=4]").remove();
//移除下拉框 text屬性為5的選項
$("#relationship option[text=5]").remove();
});複製程式碼JavaScript利用閉包實現模組化
var foo = (function CoolModule() {
var something = "cool";
var another = [1, 2, 3];
function doSomething() {
alert( something );
}
function doAnother() {
alert( another.join( " ! " ) );
}
return {
doSomething: doSomething,
doAnother: doAnother
};
})();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3
複製程式碼javascript中如何把一個陣列的內容全部賦值給另外一個陣列:
一、 錯誤實現
var array1 = new Array("1","2","3"); var array2;
array2 = array1;
array1.length = 0;
alert(array2); //返回為空
這種做法是錯的，因為javascript分原始型別與引用型別（與java、c#類似）。Array是引用類
型。array2得到的是引用，所以對array1的修改會影響到array2。
二、 使用slice()
可使用slice()進行復制，因為slice()返回也是陣列。
var array1 = new Array("1","2","3"); var array2;
array2 = array1.slice(0);
array1.length = 0;
alert(array2); //返回1、2、3
三、 使用concat()
注意concat()返回的並不是呼叫函式的Array，而是一個新的Array，所以可以利用這一點進行復制。
var array1 = new Array("1","2","3"); var array2;
array2 = array1.concat();
array1.length = 0;
alert(array2); //返回1、2、3
複製程式碼var b = [].concat(a);
複製程式碼事件委派：
//利用事件委派可以寫出更加優雅的
(function(){
var resources = document.getElementById('resources');
resources.addEventListener('click',handler,false);
function handler(e){
var x = e.target; // get the link tha
if(x.nodeName.toLowerCase() === 'a'){
alert(x);
e.preventDefault();
}
};
})();
複製程式碼把字串的首字母大寫返回一個新的字串
1.1簡單寫法，把一個單詞的首字母大寫
String.prototype.firstUpperCase = function(){
return this[0].toUpperCase()+this.slice(1);
}
1.2字串中所有單詞首字母大寫,非首字母小寫
String.prototype.firstUpperCase = function(){
return this.replace( /\b(\w)(\w*)/g, function($0, $1, $2) {// \b代表定界符
// 第一個形參$0代表所有子字串（所有單詞）
// 第二個形參$1代表第一個括號內匹配到的字串（首字母）
// 第三個形參$2代表第二個括號內匹配到的字串（除首字母外的字母）
return $1.toUpperCase() + $2.toLowerCase()});
}
另一種寫法
String.prototype.firstUpperCase = function(){
return this.toLowerCase().replace(/( |^)[a-z]/g, function(U){return U.toUpperCase()});
}
複製程式碼隨機數：
由js生成一切隨機數的基礎都是Math.random()，這個方法比較特別，生成的隨機數落在的區間是[0,1);
全閉區間[n,m]
這種的最常見，大家都知道的那一長串公式：Math.floor(Math.random()*(m-n+1))+n; 就是生成這個全閉區間的方法。說到這個公式很多人都知道，但真正想明白的人估計很少。先生成一個[0,m-n+1)這樣左閉右開的區間，然後用Math.floor()取到[0,m-n]之間內的任意整數（看明白這一步很關鍵），之後加上區間左端點變成[n,m]內的任意整數，達到目的。
說到這個地方，有一點必須提一下，隨便搜一下js生成隨機數，有很多文章都會用Math.ceil()或Math.round()這兩個方法，比如生成全閉的[n,m]區間內的任意整數，Math.ceil(Math.random()*(m-n))+n;或者Math.round(Math.random()*(m-n))+n;我感覺隨機數，最重要的就是隨機兩個字，每個值取到的概率一定要相等，這一點對於一些特定的場合非常重要，比如抽獎（年會都有抽獎的吧）。Math.ceil()的毛病是n<<m≈x，x為除端點之外的數，區間足夠大的話n幾乎取不到，m和x的概率幾乎相等，因為m這個點取不到所以概率相對來說小了一點。Math.round()的毛病是n≈m=x/2,原因和前面的差不多，不明白的可以自己畫個座標軸，很明瞭。
全開區間(x,y)
其實只要記住上面的全閉區間，其它所有區間的開閉，都可以由其推到，過程如下：
(x,y) ＝＝[x+1,y-1];也就是說n=x+1; m=y-1;將其代入上面的公式就可以得到：Math.floor(Math.random()*(y-x-1))+x+1;
左閉右開[x,y)
同理，[x,y) ＝＝ [x,y-1];代入得到：Math.floor(Math.random()*(y-x))+x;
左開右閉(x,y]
(x,y]＝＝[x+1,y];代入得到：Math.floor(Math.random()*(y-x))+x+1;
複製程式碼js 小數取整，js 小數向上取整，js小數向下取整
/**
* 數字，數字（包括正整數、0、浮點數），也可以判斷是否金額
* @param z_check_value 要檢查的值
* @return 符合返回true，否false
* @author lqy
* @since 2017-01-07
*/
function isFloat(z_check_value){
var z_reg = /^((([0-9])|([1-9][0-9]+))(\.([0-9]+))?)$/;//.是特殊字元，需要轉義
return z_reg.test($.trim(z_check_value));
};
/**
* js小數向下取整：浮點數轉換成整數，小數點後去掉
* @param floatNumber
*/
function floatToInteger(floatNumber){
if(!isFloat(floatNumber)){
error("請輸入正確的數字");
return;
}
return parseInt(floatNumber);
};
/**
* js 小數向上取整：浮點數轉換成整數，如果有小數(1.00不算有小數)，整數加1
* @param floatNumber
*/
function floatToIntegerUp(floatNumber){
var integerNumber = floatToInteger(floatNumber);
if(floatNumber > integerNumber){
integerNumber += 1;
}
return integerNumber;
};
複製程式碼CSS多行文字溢位省略顯示
文字溢位我們經常用到的應該就是text-overflow:ellipsis了，相信大家也很熟悉，但是對於多行文字的溢位處理確接觸的不是很多，最近在公司群裡面有同事問到，並且自己也遇到過這個問題，所以專門研究過這個問題。
首先我們回顧一下以前實現單行縮略是可以通過下面的程式碼實現的（部分瀏覽器需要設定寬度）：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
複製程式碼WebKit核心瀏覽器解決辦法
首先，WebKit核心的瀏覽器實現起來比較簡單，可以通過新增一個-webkit-line-clamp的私有屬性來實現，-webkit-line-clamp是用來限制在一個塊元素顯示的文字的行數。 為了實現這個效果，它需要組合其他的WebKit屬性：
- display: -webkit-box 將物件作為彈性伸縮盒子模型顯示；
- -webkit-box-orient 設定或檢索伸縮盒物件的子元素的排列方式；
- text-overflow: ellipsis 用省略號“…”隱藏超出範圍的文字。
具體程式碼參考如下：
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
複製程式碼這個方法合適WebKit瀏覽器或移動端（絕大部分是WebKit核心的）瀏覽器，效果可以檢視：
其他瀏覽器的解決方案
目前沒有什麼CSS的屬性可以直接控制多行文字的省略顯示，比較靠譜的辦法應該就是利用相對定位在最後面加上一個省略號了，程式碼可以參考下面：
p {
position:relative;
line-height:1.5em;
/* 高度為需要顯示的行數*行高，比如這裡我們顯示兩行，則為3 */
height:3em;
overflow:hidden;
}
p:after {
content:"...";
position:absolute;
bottom:0;
right:0;
padding: 0 5px;
background-color: #fff;
}
複製程式碼效果如下：
不過這樣會有一點問題：
- 需要知道顯示的行數並設定行高才行；
- IE6/7不支援
after和content，需要新增一個標籤來代替； - 省略號的背景顏色跟文字背景顏色一樣，並且可能會遮住部分文字，建議可以使用漸變的png背景圖片代替。
一行居中多行居左:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ps {
width: 600px;
border: 1px solid red;
text-align: center;
}
.ps span {
display: inline-block;
text-align: left;
}
.tab-cell {
display: table;
margin: 0 auto;
text-align: left;
}
</style>
</head>
<body>
<p class="ps"><span>文字文文字文字文字文字</span></p>
<p class="ps"><span>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字<文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</span></p>
<p class="tab-cell">文字文文字文字文字文字</p>
<p class="tab-cell">文字文文字文字文字文字文字文文字文字文字文字文字文文字文字文字文字</p>
</body>
</html>
複製程式碼判斷返回js資料型別
function judgeType(arg){//判斷返回js資料型別
return Object.prototype.toString.call(arg).slice(8,-1);
}
複製程式碼clone
function deepCloneNick(obj){//深克隆
var result;
//確定result的型別
if(judgeType(obj)==="Object"){
result={};
}else if(judgeType(obj)==="Array"){
result=[];
}else{
return obj;
}
for(var key in obj){
var copy=obj[key];
if(judgeType(copy)==="Object"||"Array"){
//result[key]=deepCloneNick(copy);//遞迴呼叫 避免函式名改變 改成下面一句
result[key]=arguments.callee(copy);
}else{
result[key]=obj[key];
}
}
return result;
}
var obj={a:[1,2],b:3},arr=[{a:'a'},2];
var obj1=deepCloneNick(obj),arr1=deepCloneNick(arr);
console.log(obj);
console.log(obj1);
console.log(arr);
console.log(arr1);複製程式碼
let person = {
getGreeting() {
return "Hello";
}
};
// 原型為 person
let friend = {
getGreeting() {
return super.getGreeting() + ", hi!";
}
};
Object.setPrototypeOf(friend, person);
console.log(friend.getGreeting()); // "Hello, hi!"
複製程式碼
前言：這是筆者第一次寫部落格，主要是學習之後自己的理解。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！
z-index屬性描述元素的堆疊順序（層級），意思是A元素可以覆蓋B元素，但是B元素並沒有消失（display：none）
z-index屬性可以為負值，預設為auto（可以理解為0），值最大的處於最上層.
一些元素設定z-index無效，可能的原因：
z-index屬性必須和position屬性（absolute/relative/fixed）配合使用，否則無效.
z-index屬性應該繼承父元素的z-idnex值，意思就是祖先元素優先，如果兩個父元素層級已決高下，那麼他們兩個的子元素之間再設層級就不會起作用了.
額，先就這麼多了，原本想畫個圖來解釋的，發現不會畫圖，還是要繼續學習。
網頁上新增一個input file HTML控制元件：
1
預設是這樣的，所有檔案型別都會顯示出來，如果想限制它只顯示我們設定的檔案型別呢，比如“word“,”excel“,”pdf“檔案
解決辦法是可以給它新增一個accept屬性，比如：
<input type="file" id="userImage" name="userImage" accept="image/x-png,image/gif,image/jpeg,image/bmp"/>
WebSocket ：
WebSocket API是下一代客戶端-伺服器的非同步通訊方法。該通訊取代了單個的TCP套接字，使用ws或wss協議，可用於任意的客戶端和伺服器程式。WebSocket目前由W3C進行標準化。WebSocket已經受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等瀏覽器的支援。
WebSocket API最偉大之處在於伺服器和客戶端可以在給定的時間範圍內的任意時刻，相互推送資訊。WebSocket並不限於以Ajax(或XHR)方式通訊，因為Ajax技術需要客戶端發起請求，而WebSocket伺服器和客戶端可以彼此相互推送資訊；XHR受到域的限制，而WebSocket允許跨域通訊。
Ajax技術很聰明的一點是沒有設計要使用的方式。WebSocket為指定目標建立，用於雙向推送訊息。
二、WebSocket API的用法
只專注於客戶端的API，因為每個伺服器端語言有自己的API。下面的程式碼片段是開啟一個連線，為連線建立事件監聽器，斷開連線，訊息時間，傳送訊息返回到伺服器，關閉連線。
// 建立一個Socket例項
var socket = new WebSocket('ws://localhost:8080');
// 開啟Socket
socket.onopen = function(event) {
// 傳送一個初始化訊息
socket.send('I am the client and I\'m listening!');
// 監聽訊息
socket.onmessage = function(event) {
console.log('Client received a message',event);
};
// 監聽Socket的關閉
socket.onclose = function(event) {
console.log('Client notified socket has closed',event);
};
// 關閉Socket....
//socket.close()
};
讓我們來看看上面的初始化片段。引數為URL，ws表示WebSocket協議。onopen、onclose和onmessage方法把事件連線到Socket例項上。每個方法都提供了一個事件，以表示Socket的狀態。
onmessage事件提供了一個data屬性，它可以包含訊息的Body部分。訊息的Body部分必須是一個字串，可以進行序列化/反序列化操作，以便傳遞更多的資料。
WebSocket的語法非常簡單，使用WebSockets是難以置信的容易……除非客戶端不支援WebSocket。
Websocket
1.websocket是什麼？
WebSocket是為解決客戶端與服務端實時通訊而產生的技術。其本質是先通過HTTP/HTTPS協議進行握手後建立一個用於交換資料的TCP連線，
此後服務端與客戶端通過此TCP連線進行實時通訊。
2.websocket的優點
以前我們實現推送技術，用的都是輪詢，在特點的時間間隔有瀏覽器自動發出請求，將伺服器的訊息主動的拉回來，在這種情況下，我們需要不斷的向伺服器 傳送請求，然而HTTP request 的header是非常長的，裡面包含的資料可能只是一個很小的值，這樣會佔用很多的頻寬和伺服器資源。會佔用大量的頻寬和伺服器資源。
WebSocket API最偉大之處在於伺服器和客戶端可以在給定的時間範圍內的任意時刻，相互推送資訊。在建立連線之後，伺服器可以主動傳送資料給客戶端。
此外，伺服器與客戶端之間交換的標頭資訊很小。
WebSocket並不限於以Ajax(或XHR)方式通訊，因為Ajax技術需要客戶端發起請求，而WebSocket伺服器和客戶端可以彼此相互推送資訊；
關於ajax,comet,websocket的詳細介紹，和websocket報文的介紹，大家可以參看www.shaoqun.com/a/54588.asp… 網頁設計]Ajax、Comet與Websocket，
3.如何使用websocket
客戶端
在支援WebSocket的瀏覽器中，在建立socket之後。可以通過onopen，onmessage，onclose即onerror四個事件實現對socket進行響應
一個簡單是示例
var ws = new WebSocket(“ws://localhost:8080”);
ws.onopen = function()
{
console.log(“open”);
ws.send(“hello”);
};
ws.onmessage = function(evt)
{
console.log(evt.data)
};
ws.onclose = function(evt)
{
console.log(“WebSocketClosed!”);
};
ws.onerror = function(evt)
{
console.log(“WebSocketError!”);
};複製程式碼1.var ws = new WebSocket(“ws://localhost:8080”);
申請一個WebSocket物件，引數是需要連線的伺服器端的地址，同http協議使用http://開頭一樣，WebSocket協議的URL使用ws://開頭，另外安全的WebSocket協議使用wss://開頭。
ws.send(“hello”);
用於叫訊息傳送到服務端
2.ws.onopen = function() { console.log(“open”)};
當websocket建立成功時，即會觸發onopen事件
3.ws.onmessage = function(evt) { console.log(evt.data) };
當客戶端收到服務端發來的訊息時，會觸發onmessage事件，引數evt.data中包含server傳輸過來的資料
4.ws.onclose = function(evt) { console.log(“WebSocketClosed!”); };
當客戶端收到服務端傳送的關閉連線的請求時，觸發onclose事件
5.ws.onerror = function(evt) { console.log(“WebSocketError!”); };
如果出現連線，處理，接收，傳送資料失敗的時候就會觸發onerror事件
我們可以看出所有的操作都是採用事件的方式觸發的，這樣就不會阻塞UI，使得UI有更快的響應時間，得到更好的使用者體驗。
服務端:
現在有很多的伺服器軟體支援websocket，比如node.js,jetty,tomcat等