我的工具箱

大家好，我是梅巴哥er。 在写项目过程中，发现了一个对新手很不友好的事情，就是手里的工具太少，会对项目进度产生影响。所以，我打算做一个自己的工具箱，用来存放自己封装的常用函数。

*注：该博文会永久更新。

---

1，js移动动画

function animate(obj, start, end, unit, cb) {
     
  var step = (end - start) / 10
  var n = 1
  clearInterval(timer)
  function move() {
     
    obj.style.left = start + step * n + unit
    if(obj.style.left === end + unit) {
     
      clearInterval(timer)
      cb && cb()
    }
    n++
  }
  var timer = setInterval(move, 30)
}

使用说明

• obj，是获取到的dom。
• start是起始位置，不带单位
• end是结束位置，不带单位
• unit是长度单位，常用的'px'， 'rem'等。 所以这个动画在web和app上均可使用。
• cb是回调函数。可略。
• 里面的数字，如控制步子大小的10 ， 控制速度的30 ，都可以自己修改和调整。

---

2，千分函数

function qianFen(num){
      
    return num && num
    .toString()
    .replace(/(\d)(?=(\d{3})+(?!\d))/g, function($0, $1) {
     
        return $1 + ",";
    });
  }

使用说明

• 例如，qianFen(1000000) ， 将输出为1,000,000

---

3，上滚动轮播图

function animation(obj, roll_len, unit, delay) {
     
  var times = 0
  var _cl = obj.children.length -1
  var roll_len = roll_len || obj.children[0].offsetHeight
  var delay = delay || 1500
  var unit = unit || 'px'
  function animate(start, end, cb) {
     
    var step = (end - start) / 10
    var n = 1
    clearInterval(timer)
    function move() {
     
      obj.style.top = start + step * n + unit
      if(obj.style.top === end + unit) {
     
        clearInterval(timer)
        cb && cb()
      }
      n++
    }
    var timer = setInterval(move, 30)
  }

  function controller() {
     
    setInterval(function() {
     
      if(parseFloat(obj.style.top) <= (- _cl * roll_len)) {
     
        obj.style.top = 0
        times = 1
      } else {
     
        times++
      }
      animate(roll_len - times * roll_len, -times * roll_len)
    }, delay)
  }
  controller()
}

• 使用说明

  • obj是获取到的要移动的dom 。 必需。
  • roll_len是移动一次的长度，无单位。在单位为'px'且不传参时，默认长度是一个li的高度。当单位是'rem'时，必须传参。
  • unit是单位，比如'px'或'rem'等。不传参时，默认是'px' 。
  • delay是定时器的时间，不带单位。不传参时，默认是1500ms 。如果传参，就按传入的delay实参启动定时器，如果不写，就按照默认的每1500ms滚动一次。可略。
  • 调用举例：animation(_ul, null, null, null) 或 animation(_ul, null , 'px', 2000)
  • 调用函数前需要把div ul li 等结构写好。 然后在js里可直接调用。

---

以上。待续…