JS实用技巧

这是我的第一篇掘金博客，开启掘金写作之路。

秒转换为HH:MM:SS

  // 秒数转为HH：MM：SS
  showTime = function (second) {
    if (second < 60) {
      if (second < 10) {
        return '00:00:0' + second
      } else {
        return '00:00:' + second
      }
    } else {
      var min_total = Math.floor(second / 60) // 分钟
      var sec = Math.floor(second % 60) // 余秒
      if (min_total < 60) {
        if (min_total < 10) {
          if (sec < 10) {
            return '00:0' + min_total + ':0' + sec
          } else {
            return '00:0' + min_total + ':' + sec
          }
        } else {
          if (sec < 10) {
            return '00:' + min_total + ':0' + sec
          } else {
            return '00:' + min_total + ':' + sec
          }
        }
      } else {
        var hour_total = Math.floor(min_total / 60) // 小时数
        if (hour_total < 10) {
          hour_total = '0' + hour_total
        }
        var min = Math.floor(min_total % 60) // 余分钟
        if (min < 10) {
          min = '0' + min
        }
        if (sec < 10) {
          sec = '0' + sec
        }
        return hour_total + ':' + min + ':' + sec
      }
    }
  }

实现上拉下拉的回弹效果以及触摸事件处理

  const maxMove = 100;
  var scroll = document.getElementsByClassName("scroll");//最外层元素
  window.addEventListener("touchstart", function (event) {
    startY = event.changedTouches[0].clientY;
    // startY:起始触点坐标
  });
  window.addEventListener("touchmove", function (event) {
    // 手指滑动 当滑动实时触点坐标<=maxMove，说明还未划出元素范围
    const y =
      event.changedTouches[0].clientY - startY <= maxMove
        ? event.changedTouches[0].clientY - startY
        : maxMove;
    // 为了清除卡顿问题，需要清除过渡效果
    scroll.style.transition = "none";
    // 阻尼系数0.3
    scroll.style.transform = "translateY(" + 0.3 * y + "px)";
  });
  window.addEventListener("touchend", function (event) {
    const y = event.changedTouches[0].clientY - startY;
    // 添加过渡效果
    scroll.style.transition = "transform .6s";
    scroll.style.transform = "translateY(" + 0 + "px)";
  });