跳到主要内容

前端调试的其难杂症

H5页面-iOS全面屏底部导航栏适配​

MDN：env Support iOS left and right safe insets iPhone 设备刘海屏和底部黑条网页适配

添加 mata 声明​

<meta name="viewport" content="viewport-fit=cover">  <!-- safa-area 设置 -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, viewport-fit=cover">

样式设置安全区域​

env(safe-are-inset-bottom)

body{padding-bottom: env(safe-area-inset-bottom); }
padding-bottom: env(safe-area-inset-bottom);

页面有fixd按钮与其他元素的padding属性，可以通过calc()运算解决

padding-bottom: calc(10px + env(safe-area-inset-bottom));

阻止页面滑动事件​

默认动作不照常执行​

event.preventDefault触发滚动的事件并没有取消，只能阻止滚动的默认达到目的

// 事件监听
Object.addEventListener(’Object',(e)=>{e.preventDefault()})  //pc端禁止滑动，注意 css 样式里会有滚动条
Object.addEventListener('touchstrat',(e)=>{e.preventDefault()})  //手机端禁止滑动

添加 css 隐藏pc端的滚动条

::-webkit-scrollbar{width:0 !important}

Html 页面纯数字或字母折行的问题​

p{
    word-break:break-all;
    word-wrap:break-word;
}

Favicon.ico​

Favicon功能最早由微软创设，而微软公司的Internet Explorer网页浏览器会对每一个网站都请求favicon。

现在几乎所有的浏览器也支持favicon.ico

定义favicon​

  1. 将一个名为“favicon.ico”的文件置于Web服务器的根目录下
  2. 维基百科的建议 ↓
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon" />

如何获取网站的icon​

参考

  1. 直接访问网址https://[网址].com/favicon.ico
  2. 生成单一尺寸，简单有效favicongrabber.com
  3. 开源工具，输入网址生成多种png尺寸图标i.olsh.me/

脱敏规则​

运用正则表达式替换原有值​

String.replace(/(\d{6})\d*(\d{4})/,'$1******$2')；

利用函数返回值​

//银行卡号脱敏函数
function desensitization(str, beginLen, endLen){
  var len = str.length;
  var firstStr = str.substr(0, beginLen);
  var lastStr = str.substr(endLen);
  var middleStr = str.substring(beginLen, len-Math.abs(endLen)).replace(/[\s\S]/ig, '*');
  tempStr = firstStr+middleStr+lastStr;
  return tempStr;
}

let cardNum = e.value;
selectBankCard = cardNum.concat(desensitization(cardNum,6,-4))

String.slice(0,a.length/2)
T.slice(a.length/2)

字符串查看规则​

Javascript 键盘keyCode键码值表​

https://www.teakki.com/p/57dfbf2fd3a7507f975f1cb0

indexOf()

返回数值的下标值

"521231231231212301****32".indexOf('9')<0  //ture 因为没有9的值

$('#bankCardNo1').bind("keydown", function(e) {
    e = e ? e : event;
    let bankNo = $('#bankCardNo1').val();
    if((bankNo.length >= 16) && (e.keyCode === 8) && (bankNo.indexOf('\*')>0)) {
        $('#bankCardNo1').val("");
}});

字符串替换方法​

定义一个文案，定义数字为一个对象，将字符串

function renderTip() {
  var botWenXinTip = '温馨提醒：信用就医涉及签约开通、支付业务相关疑问可拨打中国银联客服热线95516咨询；信用卡提额相关疑问可咨询发卡银行（交通银行95559、中国农业银行4006695599、浦发银行4008208788、中国银行4006695566、邮储银行4008895580、上海银行95594、光大银行95595、招商银行95555 ）就诊、门诊缴费、退费等相关疑问可直接与医院联系；其他疑问可拨打4001968888咨询。'
  const checkReg = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
  var nerArr = botWenXinTip.split('')
  var template = '';
  for (var i = 0; i < nerArr.length; i++) {
    if (checkReg.includes(nerArr[i])) {
      template += "<span style='color:#39B8EF'>" + nerArr[i] + "</span>";
    } else {
      template += "<span>" + nerArr[i] + "</span>";
    }
  }
  return template;
}