H5常用骚操作（持续更新）

大眼糟老头

已于 2022-09-01 13:44:18 修改

阅读量1.8k

点赞数 1

分类专栏： html5 文章标签： html javascript

于 2021-07-07 17:32:48 首次发布

本文链接：https://blog.csdn.net/bad___man/article/details/118546402

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客涵盖了前端开发的多个方面，包括图片禁止选中、预加载、输入及select样式定制、一键复制功能的实现。同时，还讨论了移动端优化的策略，如不拉跨的缩放设置以及iOS滑动优化。此外，还提供了操作系统检测的JavaScript方法，并展示了如何进行H5多链接处理和分享配置。

摘要由CSDN通过智能技术生成

img

图片禁止选中

position:relative;

图片加载属性

Image complete 属性
返回值（bool）
true:加载完成；
false：加载失败；
可以在原生js中通过创建数组并便利数组实现预加载的效果

input

去除默认样式

input{  
	background:none;  
	outline:none;  
	border:1px solid #ccc;
}
input:focus{   
	border:none;
}

input type=“date”限制时间

var myDate = new Date;
  var year = myDate.getFullYear(); //获取当前年
  var mon = myDate.getMonth()+1 < 10 ? "0"+(myDate.getMonth()+1) : (myDate.getMonth()+1);//
  var dat = myDate.getDate() < 10 ? "0"+myDate.getDate() : myDate.getDate();
  $("#input_date").attr("min",year+"-"+mon+"-"+dat);

select

去除默认样式

select {
  /*Chrome同Firefox与IE里面的右侧三角显示的样式不同*/
  border: solid 1px #ddd;
  /*将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  padding-right: 14px;
  /*如果要加入自定义图片， 就增加这个属性 background: url或者在html中直接加入图标也行*/
}
/*清除iIE的默认选择框样式*/
select::-ms-expand { display: none; }

一键复制功能

<p class="btn-copy btn-copy-1" data-clipboard-text="1复制本段内容￥hcPbciJwUw0$到手机天喵或掂击炼接 https://m.tb.cn/h.41AwBJl?sm=d8e3b5 至瀏lan嘂..【购房券 天喵好房  浙江绍兴宝能藏珑府 品牌地产 旗舰店】"><img src="img/p1-6.png"></p>

var clipboard1 = new Clipboard('.btn-copy-1');
clipboard1.on('success',function(e) {
		if (e.trigger.disabled == false || e.trigger.disabled == undefined) {
			console.log('复制成功，请前往天猫app');
		}
});

生成随机整数位

方法一

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}
/*
*max为范围
*/
console.log(getRandomInt(5));

方法二

var min = 1;
		var max = 6;
		var _index = Math.floor(Math.random()*(max-min+1))+min;

想要移动端不拉跨的左右上下放大缩小

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

ios滑动不丝滑

/*
*css类中加入
*/
-webkit-overflow-scrolling:touch

一招黑白

*{
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
}

h5多链接

var index = GetQueryString('index') || 2;//动态赋值，没有则为空
function GetQueryString(name){
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     console.log(unescape(r[2]));//解码地址中的值
     if(r!=null)return  unescape(r[2]);return null;
}
window.wxShare && window.wxShare({
  img     :"https://" + hostUrl+"/xxxx/xxxxx/img/share"+index+".jpg?v=1",
  linkurl :"https://" + hostUrl+"/xxxx/xxxxx/index.html?index="+index,
  desc    :desc,
  title   :"xxxxxx"
});

h5判断操作系统

//获取操作系统
      getOsInfo: function () {
          var userAgent = window.navigator.userAgent.toLowerCase()
          var version = ''
          if (userAgent.indexOf('win') > -1) {
              if (userAgent.indexOf('windows nt 5.0') > -1 || userAgent.indexOf('Windows 2000') > -1) {
                  version = 'Windows 2000'
              } else if (userAgent.indexOf('windows nt 5.1') > -1 || userAgent.indexOf('Windows XP') > -1) {
                  version = 'Windows XP'
              } else if (userAgent.indexOf('windows nt 5.2') > -1 || userAgent.indexOf('Windows 2003') > -1) {
                  version = 'Windows 2003'
              } else if (userAgent.indexOf('windows nt 6.0') > -1 || userAgent.indexOf('Windows Vista') > -1) {
                  version = 'Windows Vista'
              } else if (userAgent.indexOf('windows nt 6.1') > -1 || userAgent.indexOf('windows 7') > -1) {
                  version = 'Windows 7'
              } else if (userAgent.indexOf('windows nt 6.2') > -1 || userAgent.indexOf('windows 8') > -1) {
                  version = 'Windows 8'
              } else if (userAgent.indexOf('windows nt 6.3') > -1) {
                  version = 'Windows 8.1'
              } else if (userAgent.indexOf('windows nt 6.4') > -1 || userAgent.indexOf('windows nt 10') > -1) {
                  version = 'Windows 10'
              } else {
                  version = 'Unknown'
              }
          } else if (userAgent.indexOf('iphone') > -1) {
              version = 'Iphone'
          } else if (userAgent.indexOf('mac') > -1) {
              version = 'Mac'
          } else if (
              userAgent.indexOf('x11') > -1 ||
              userAgent.indexOf('unix') > -1 ||
              userAgent.indexOf('sunname') > -1 ||
              userAgent.indexOf('bsd') > -1
          ) {
              version = 'Unix'
          } else if (userAgent.indexOf('linux') > -1) {
              if (userAgent.indexOf('android') > -1) {
                  version = 'Android'
              } else {
                  version = 'Linux'
              }
          } else {
              version = 'Unknown'
          }
          return version
      },