前端提高用户体验不完全指南(JS篇)

上周记录前端提高用户体验关于css的部分，今天总结一下开发中遇到的关于js部分。

输入框格式化

支付宝、微信是我们都经常用的APP，当我们用app充值手机话费时，或者绑定银行卡时，会发现我们输入的号码是会分段的

前段时间，还真遇到了这样的客服要求，我自己模拟了一下，只能说效果类似吧。

$('#tel').bind("keyup", function(event) {
 let keyCode = event.keyCode;
 let curLength = $(this).val().length;
 if(keyCode === 8 || keyCode === 46){
  
 }else if(curLength > 13){
  
  $(this).val($(this).val().slice(0,13))
  
 }else if(96 <= keyCode <= 105){
   
  if(curLength === 3 || curLength === 8){
   $(this).val($(this).val() + " ");
  }
  
 }
})

$("#tel").change(function(){
 console.log(TrimAll($(this).val(),"g"))
})

//去除字符串中所有的空格
function TrimAll(str, is_global) {
 var result;
 result = str.replace(/(^\s+)|(\s+$)/g, "");
 if (is_global.toLowerCase() == "g") {
  result = result.replace(/\s/g, "");
 }
 return result;
}

rem视口适配

我们身边有很多移动设备，它们尺寸有大有小，我们该如何让一套代码高度匹配各个不同尺寸的设备呢：

(function(docs, win) {
 htmlSize = function() {
  var value = document.documentElement.clientWidth
  var ua = navigator.userAgent
  var deviceWidth = Math.min(750, value)
  document.documentElement.style.fontSize = 100 * (deviceWidth / 750) + "px";
 };
 htmlSize();
 window.onresize = function(){
  htmlSize();
 }
})(document, window);

滚动加载

滚动加载即滚动条触底后执行事件，那么如何判断滚动条是否触底呢？

滚动条的总高度(document.body.scrollTop) - 可视区的高度(document.body.clientHeight) - 滚动条滚动时距离顶部的距离(document.body.scrollHeight) = 0;就表示滚动触底。

$(() => {
 loding()

 function loding() {

  $.get('https://www.fastmock.site/mock/961b619357977ecee63001f0f5140734/yghh/imgRe', (res) => {
   let imgstr = "";
   console.log(res)
   for (let i = 0; i < res.length; i++) {
    imgstr += `<img src='${res[i].img}' />`
   }
   $("body").append(imgstr)
  })

 }
 
 function scrollLoging(){
  //变量scrollTop是滚动条滚动时，距离顶部的距离
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  //变量windowHeight是可视区的高度
  var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
  //变量scrollHeight是滚动条的总高度
  var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  //滚动条到底部的条件
  // console.log(scrollTop + windowHeight,scrollHeight)
  if (scrollHeight - (scrollTop + windowHeight) < 5) {
   loding();
  }
 }
 
 $(window).bind("scroll",debounce(scrollLoging,2000))
 
 
 function debounce(callBack,wait,isWait){
  let timeOut;
  return function(){
   clearTimeout(timeOut);
   timeOut = setTimeout(() => {
    callBack.apply(this,arguments)
   },wait)
  }
 }
})

时间，地址选择插件

demo下载： http://www.htmleaf.com/Demo/201906145693.html

demo下载:https://www.jq22.com/yanshi15195

图片裁剪插件使用

<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" />
  <link rel="stylesheet" type="text/css" href="asset/css/framework.css" />
  <script src="asset/js/changePX.js" type="text/javascript" charset="utf-8"></script>
  <script src="asset/js/main.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <div class="ui-pane">
   <div class="ui-header">
    <a href="" class="header-button">
     <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-left"></use>
     </svg>
    </a>
    <div class="header-title">修改头像</div>
   </div>
   <div class="ui-content">
    <div class="heardImg">
     <img class="img_show" src="asset/img/code.png" >
     <input type="file" class="service-file" id="file" />
    </div>
    <input type="button" class="btn" name="" id="" value="提交" />
    
    <div class="ui-shade">
     <div id="clipArea" class="file-clip">
     </div>
     <div id="clipBtn">完成</div>
    </div>
   </div>
  </div>
  <script src="asset/photoClip/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="asset/photoClip/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
  <script src="asset/photoClip/hammer.js" type="text/javascript" charset="utf-8"></script>
  <script src="asset/photoClip/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
  <script src="asset/photoClip/jquery.photoClip.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(() => {
    $("#file").change(function(){
     $(".ui-shade").css("display","flex")
    })
    
    $("#clipArea").photoClip({
     size: [150, 150],
     file: "#file",
     ok: "#clipBtn",
     clipFinish: function(dataURL) {
      $(".img_show").attr("src",dataURL);
      $(".ui-shade").css("display","none")
     }
    });
   })
  </script>
 </body>
</html>