我的工具箱

新生代农民工官方认证码农小拽

已于 2023-04-24 09:16:39 修改

阅读量803

点赞数 2

分类专栏：记录，跟踪文章标签：前端 javascript html

于 2021-05-28 18:31:33 首次发布

本文链接：https://blog.csdn.net/tuzi007a/article/details/117355008

版权

记录，跟踪专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

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

因实际项目需要，该工具箱会加上一些除代码以外的工具。也就是说，以后所有需要用到的工具，都放在这里，让这个工具箱，升级为一个百宝箱。update 2021-6-3

updata 2021-6-24

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 ，都可以自己修改和调整。

如果遇到动画浮点数精度的问题，用如下办法解决，使用方法和上述情况相同：

function animate2(obj, start, end, unit, cb) {
    var step = transFloat(start, end, 1);
    var n = 1;
    clearInterval(timer)
    function move() {
      obj.style.left = transFloat(-step * n, start) + unit
      if(obj.style.left === end + unit) {
        clearInterval(timer)
        cb && cb()
      }
      n++
    }
    var timer = setInterval(move, 30)
    function transFloat(start, end, m) {/**解决浮点数问题 */
      var m = m || 0
      function getFloat(num) { /**获取数字有几位小数 */
        var _num = num.toString()
        var len
        var ind = _num.indexOf('.')
        len = ind == -1 ? 0 : _num.length - ind - 1
        return len
      }
      var _len = Math.max(getFloat(start), getFloat(end))
      var step = (end*Math.pow(10, _len) - start*Math.pow(10, _len)) / Math.pow(10, _len+m)
      return step
    }
  }

需要说明的是，尽量使用px做单位，可以避免很多报错。
update 2021-6-11

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)
    }
    var timerUl = 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)
    document.addEventListener('visibilitychange', function() {
      var isHidden = document.hidden;
      if(isHidden) {
        clearInterval(timerUl);
      } else {
        timerUl = 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)
      }
    })
  }

使用说明
- obj是获取到的要移动的dom 。必需。
- roll_len是移动一次的长度，无单位。在单位为'px'且不传参时，默认长度是一个li的高度。当单位是'rem'时，必须传参。建议传参。
- unit是单位，比如'px'或'rem'等。不传参时，默认是'px' 。参议传参。
- delay是定时器的时间，不带单位。不传参时，默认是1500ms 。如果传参，就按传入的delay实参启动定时器，如果不写，就按照默认的每1500ms滚动一次。可略。
- 调用举例：animation(_ul) 或animation(_ul, null, null, null) 或 animation(_ul, null , 'px', 2000)
- 调用函数前需要把div ul li 等结构写好。然后在js里可直接调用。
这一版本是更新过的
- 解决了轮播图切换页面后轮播混乱的bug 。
- update 2021-6-23

适用于web端和app端弹窗的上滚轮播图

function animation(obj, liHeight, desWidth, unit, delay) {
    var times = 0;
    var _cl = obj.children.length -1;
    var desWidth = desWidth || 648;
    var delay = delay || 1500;
    var unit = unit || 'px';
    var _cw = document.body.clientWidth / desWidth * liHeight;
    var roll_len;
    if(Math.round(_cw) === _cw) {
      roll_len = _cw;
    } else if(Math.round(_cw) > _cw) {
      roll_len = Math.round(_cw) - 0.5;
    } else {
      roll_len = Math.round(_cw) + 0.5;
    }
    
    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)
    }
    var timerUl = 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)
    document.addEventListener('visibilitychange', function() {
      var isHidden = document.hidden;
      if(isHidden) {
        clearInterval(timerUl);
      } else {
        timerUl = 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)
      }
    })
  }

该方法是用在web和app弹窗的。
用法说明：
liHeight 是li的初始高度。比如设计稿是648x833的，那么这个高度就是在这个设计稿下的高度。
desWidth是设计稿的宽度，默认是648，可略。
使用方法举例：animation(divDom, 80)。

4，检查用户登陆设备

var isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
if(isMobile) { // 如果是手机
  window.open('xxx') // 跳转到某个页面
} else { // 如果不是手机
  window.open('xxx') // 跳转到某个页面
}

5，编辑当日的日期格式

function editDay(symbol) {
    var y = new Date().getFullYear() // 获取年，一定要用FullYear，而不要用Year
    var m = (new Date().getMonth() + 1) >= 10 ? (new Date().getMonth() + 1) : '0' + (new Date().getMonth() + 1) 
    var d = new Date().getDate() >= 10 ? new Date().getDate() : '0' + new Date().getDate()

    var symbol = symbol || ''
    var date = [y, m, d].join(symbol)
    return date
  }

使用说明

symbol是用来分隔年月日的符号，string类型。默认为'' 。
调用举例：console.log(editDay()) // 20210601 或 console.log(editDay('-')) // 2021-06-01。
update 2021-6-1

6，控制单个svga动画播放次数

封装背景
- player.loops的值取0时，是无限循环播放。取1时，是播放1次就停止播放。
- 但是当取其他值时，并没能控制动画播放次数。所以需要封装一个可以控制svga播放次数的函数。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo 11</title>
  <link rel="stylesheet" href="demo.css">
</head>
<body>
   <div id="huajiang"></div>
  <script src="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.1.0/build/svga.min.js"></script>
  <script src="demo.js"></script>
</body>
</html>

var players = [];
  var parsers = [];
  var URLS = []
  players[0] = new SVGA.Player("#huajiang");
  parsers[0] = new SVGA.Parser("#huajiang");
  URLS[0] = 'https://xxx.com/kktv/resource/2021-06-02/xxx.svga'
  svgaController()(players[0], parsers[0], URLS[0], 3) //启动播放
  
  /*封装svga控制函数*/
  function svgaController() {
    var n = 0
    return function svgaAnimation(player, parser, url, m){
      parser.load(url,function(videoItem){
        player.loops = 1;
        player.setVideoItem(videoItem);
        player.clearsAfterStop = false;  //默认是清空画布 ，这边设置不清空画布
        player.startAnimation();
        player.onFrame(function(i) {
        /*i是svga的帧数， 这次试验用的svga是29帧的。想知道帧数是多少，直接console.log(i)就行了。
        当动画播放到29帧，也就是刚好播放完成时，
        就让n自增1，并且再次调用动画播放函数。 
        等到自增到3时， 就不再调用动画播放函数了，也就不会继续播放动画了，达到了停止动画播放的效果。
        这次封装用到了闭包和递归。*/
          if(i == 29 && n < m) {
            svgaAnimation(player, parser, url, m)
            n++
            console.log(n)
          }
        })
      },function(err){
          console.log("svga播放失败");
      })
    }
  }

使用说明

player, parser, url 这三个参数不具体说了，都是svga基本用法
传参m就是用来控制svga播放次数的。
调用举例：svgaController()(players[0], parsers[0], URLS[0], 3) // 即让动画播放3次后就停止播放
update 2021-6-2

7，cmd下创建文件和文件夹命令

创建文件夹：md xxx （文件夹名字之间没空格）
创建文件夹：md "x x x"(文件夹名字之间有空格)
创建文件： type nul>xxx.格式名
退出cmd：exit
update 2021-6-3

8，Vconsole手机调试工具

<script src="https://unpkg.com/vconsole@3.7.0/dist/vconsole.min.js"></script>
  <script>
      // init vConsole
      var vConsole = new VConsole();
      console.log('Hello world');
  </script>

使用说明

直接把代码引入即可。
然后手机扫码操作页面，如果有问题，会在手机的vconsole页面报错
很方便的解决了手机代码调试问题。
update 2021-6-9

9，滚动条区域封装

由于js消除原始滚动条的方法可能不稳定，容易报错出bug，所以又完善了代码，可以在https://blog.csdn.net/tuzi007a/article/details/117887442查看优化完整版。

使用举例

var obj = {
    scrollItem: '.scrollItem', // 外层盒子类名
    scrollContent: '.scrollContent', // 可视区类名
    sCList: '.sCList', // 内容区类名
    barWrap: '.barWrap', // 滚动条外层类名
    barBox: '.barBox', // 滚动条内层类名
    bar: '.bar', // 滚动条滑块类名
    scrollItem_width: '300px', // 外层盒子宽度
    scrollItem_height: '450px', // 外层盒子高度
    sCList_height: '800px', // 内容区高度
    barWrap_width: '5px', // 滚动条宽度
    barWrap_bgc: 'pink', // 滚动条背景颜色，默认transparent
    bar_height: '75px', // 滑块高度
    bar_bgc: 'purple', // 滑块背景色，默认transparent
  }
  scrollFn(obj);

update 2021-6-21

10，点击盒子内的关闭按钮或盒子外，关闭盒子

function xFn(obj) {
    var $ = document.querySelector.bind(document);

    var box = $(obj.box);
    /**判断是否存在关闭按钮 */
    if('x' in obj) {
      var x = $(obj.x);
      x.addEventListener('click', function() {
        box.style.display = 'none';
      })
    }
    /**阻止盒子冒泡 */
    box.addEventListener('click', function(e) {
      e.stopPropagation();
    })
    document.addEventListener('click', function(e) {
      // log('target: ', e.target);
      box.style.display = 'none';
    })
  }

使用示例

有关闭按钮

var obj = {
    box: '.box', // 要被关闭的盒子的类名，
    x: '.x', // 关闭按钮的类名，
  }
  xFn(obj);

无关闭按钮

var obj = {
  box: '.box', // 要被关闭的盒子的类名，
}
xFn(obj);

封装的函数会根据输入的obj对象，来自行判断是否存在关闭按钮。

11，根据月份获取当月天数

function getAllDays(year, mon) {
    //year 是某年, new Date().getFullYear()
    // mon 是某月，new Date().getMonth() + 1
    return new Date(year, mon, 0).getDate();
  }

用法举例：
- 比如要获取2021年7月份有多少天，直接调用getAllDays(2021, 7)。返回结果为31天。
原理：
new Date(2021, 7, 0).getDate() 意思是2021年8月0号的日期，但是8月份并没有0号啊，所以返回的结果就是7月份的最后一天，也就是31号，所以31就是7月份的总天数。
update 2021-7-3

12 ，鼠标拖动事件

在该博文中介绍： https://blog.csdn.net/tuzi007a/article/details/118495222

13，手机适配rem

(function (win) {
      function setUnitA() {
          var W = document.documentElement.clientWidth;
          if (W >= 1080) {
              W = 1080;
          }
          document.documentElement.style.fontSize = W / 10.8 + "px";
      }
      var h = null;
      window.addEventListener("resize", function () { clearTimeout(h); h = setTimeout(setUnitA, 300); }, false);
      setUnitA();
    })(window);

// 1080是设计稿宽度， 可以根据自己的设计稿宽度进行修改。

14，点击按钮，控制盒子左右移动

使用说明
https://blog.csdn.net/tuzi007a/article/details/118758972?spm=1001.2014.3001.5502

15，git撤销合并

合并后还没提交的时候，执行该指令，就会取消合并

git reset --merge ORIG_HEAD

新生代农民工官方认证码农小拽

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
我的工具箱

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)
复制链接

扫一扫