常用的Html5代码

返回上一页

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) { } //判断横竖屏

上传图片显示

将上传的图片显示出来，做后台管理系统的时候有可能会用到。

<input type="file" name="image" onchange="show(this)">

<img id="img" src="" />

// 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; //第三种