傳回上一頁
window.history.go(-1)；這一句隻在安卓手機有效果
相容蘋果手機需要在跳轉代碼後加上return false；
跳轉後重新整理頁面self.location.reload()；
window.history.go(-1); //傳回上一頁
return false; //相容ios系統
self.location.reload(); //ios重新整理頁面
微信浏覽器禁止頁面下拉
addEventListener()方法向指定元素添加事件句柄。
preventDefault()方法阻止元素發生預設的行為。
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, {
passive: false
});
document.oncontextmenu = function(e) { //或者return false;
e.preventDefault();
};
媒體查詢
方向：橫屏/豎屏
orientation：portrait | landscape
portrait：指定輸出裝置中的頁面可見區域高度大于或等于寬度
landscape： 除portrait值情況外，都是landscape
@media screen and (max-width: 320px){ } //寬度
@media only screen and (orientation: landscape) { } //判斷橫豎屏
上傳圖檔顯示
将上傳的圖檔顯示出來，做背景管理系統的時候有可能會用到。
// JS代碼
function show(file){
var reader = new FileReader(); // 執行個體化一個FileReader對象，用于讀取檔案
var img = document.getElementById('img'); // 擷取要顯示圖檔的标簽
//讀取File對象的資料
reader.onload = function(evt){
img.style.display = 'block';
img.src = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
}
長按事件
$(".btn").on({
touchstart: function(e) {
// 長按事件觸發
timeOutEvent = setTimeout(function() {
timeOutEvent = 0;
function(){ //外彙常見問題 www.kaifx.cn/lists/question/
}, 400);
},
touchmove: function() {
clearTimeout(timeOutEvent);
timeOutEvent = 0;
},
touchend: function() {
clearTimeout(timeOutEvent);
if (timeOutEvent != 0) {
alert('長按開啟');
}
return false;
}
})
根據頁面高度調整樣式
var height = $(window).height();
if(height>625){
$('.box').css("margin-top", "10px");
}
清除在浏覽器上搜尋框中的叉号
.search::-webkit-search-cancel-button{display: none;}
.search[type=search]::-ms-clear{display: none;}
判斷安卓和ios
var u = navigator.userAgent, app = navigator.appVersion;
//android
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
//ios
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isAndroid){ }
else{ }
彈性布局垂直水準居中
display: flex; //彈性布局 父元素
justify-content:center; //水準居中
align-items: center; //垂直居中
禁止上下滑動
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, {
passive: false
});
document.oncontextmenu = function(e) { //或者return false;
e.preventDefault();
};
Swiper自動初始化
observer: true, //修改本身或子元素時，自動初始化
observeParents: true, //修改父元素時，自動初始化
單行文本溢出顯示省略号
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行文本溢出顯示省略号
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
圖檔間距
display：block; //第一種
vertical-align：middle; //第二種(注：定義vertical-align為middle時在IE6中大概還有1像素的頂邊距，最好為top或bottom。)
font-size:0; //第三種