utils->js->bomObject->dom函数集合(工具类函数)

/**
 * 前置省略号
 * lineNum 函数
 * tagele 目标dom
 */
function linelip(lineNum, tagele) {
  var eles = document.getElementsByClassName(tagele);
  var lineNum = lineNum || 2;
  for (var i = 0; i < eles.length; i++) {
    var element = eles[i];
    var text = element.textContent;
    var totalTextLen = element.textContent.length;
    var baseWidth = window.getComputedStyle(element).width;
    var baseFontSize = window.getComputedStyle(element).fontSize;
    var lineWidth = baseWidth.slice(0, -2);
    var strNum = Math.floor(lineWidth / baseFontSize.slice(0, -2));
    var content = "";
    var totalStrNum = Math.floor(strNum * lineNum);
    var lastIndex = totalStrNum - totalTextLen;
    if (totalTextLen > totalStrNum) {
      content = text.slice(0, lastIndex - 1).concat("...");
    } else {
      content = text;
    }
    element.innerHTML = content;
  }
}
/**
 * 判断是否拥有类名
 * Check if an element has a class
 * @param {HTMLElement} elm
 * @param {string} cls
 * @returns {boolean}
 */
export function hasClass(ele, cls) {
  return !!ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
}



/**
 * 加类名
 * Add class to element
 * @param {HTMLElement} elm
 * @param {string} cls
 */
export function addClass(ele, cls) {
  if (!hasClass(ele, cls)) ele.className += " " + cls;
}

/**
 * 加类名
 * @param {HTMLElement} element
 * @param {string} className
 */
export function toggleClass(element, className) {
  if (!element || !className) {
    return;
  }
  let classString = element.className;
  const nameIndex = classString.indexOf(className);
  if (nameIndex === -1) {
    classString += "" + className;
  } else {
    classString =
      classString.substr(0, nameIndex) +
      classString.substr(nameIndex + className.length);
  }
  element.className = classString;
}

/**
 * 去类名
 * Remove class from element
 * @param {HTMLElement} elm
 * @param {string} cls
 */
export function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
    const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
    ele.className = ele.className.replace(reg, " ");
  }
}
/*
生成海报
*/
export function creatPoster() {
  var imgtitle = document
    .getElementById("canvasAim")
    .getElementsByTagName("img")[0];
  var imgcentertext = document
    .getElementById("canvasAim")
    .getElementsByTagName("img")[1];
  var imgqrcode = document
    .getElementById("qrcodeAim")
    .getElementsByTagName("img")[0];
  var can = document.getElementById("myCanvas");
  let ctx = can.getContext("2d");

  var htmlTag = document.getElementsByTagName("html");
  if (htmlTag) {
    var fs = (window.innerWidth * 16) / 375;
  }
  can.width = 14 * fs;
  can.height = 400;

  let img = new Image();
  // 防止跨域
  ctx.drawImage(imgtitle, 0, 0, 14 * fs, 100, 0, 0, 14 * fs, 70);
  ctx.drawImage(imgcentertext, 0, 0, 14 * fs, 100, 0, 70, 14 * fs, 150);
  ctx.drawImage(img, 0, 0, 180, 180, (14 * fs - 180) / 2, 218, 180, 180);

  setTimeout(function () {
    var image = can.toDataURL("image/png", 0.3);
    return image;
  }, 200);
}

// 使页面支持拖放
export function DragDrop() {
  var dragging = null;

  function handleEvent(event) {
    //获取事件和目标
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);

    //确定事件类型
    switch (event.type) {
      case "mousedown":
        if (target.className.indexOf("draggable") > -1) {
          dragging = target;
        }
        break;
      case "mousemove":
        if (dragging !== null) {
          //指定位置
          dragging.style.left = event.clientX + "px";
          dragging.style.top = event.clientY + "px";
        }
        break;
      case "mouseup":
        dragging = null;
        break;
    }
  }
  //公共接口
  return {
    enable: function () {
      EventUtil.addHandler(document, "mousedown", handleEvent);
      EventUtil.addHandler(document, "mousemove", handleEvent);
      EventUtil.addHandler(document, "mouseup", handleEvent);
    },
    disable: function () {
      EventUtil.removeHandler(document, "mousedown", handleEvent);
      EventUtil.removeHandler(document, "mousemove", handleEvent);
      EventUtil.removeHandler(document, "mouseup", handleEvent);
    },
  };
}


// 适配屏幕
export function suitScreen() {
  var htmlTag = document.getElementsByTagName("html");
  if (htmlTag) {
    var fs = (window.innerWidth * 16) / 375;
    htmlTag[0].style.fontSize = "" + fs + "px";
  }
}

/*
随机运动函数
入参:obj--dom对象, json-位置相关的css样式, fn--执行完就执行一次
返参:无
auth:杨超
time:2019/8/6
*/
export function buffermove(obj, json, fn) {
  var speed = 0;
  var _this = this;
  var olddata = {}; //加入上一次操作数据,防止数据过大,进入死循环
  clearInterval(obj.timer);

  obj.timer = setInterval(function () {
    var bstop = true;
    for (var attr in json) {
      if (Object.prototype.hasOwnProperty.call(json, attr)) {
        var currentvalue = 0;
        if (attr === "opacity") {
          currentvalue = Math.round(_this.getstyle(obj, attr) * 100);
        } else {
          currentvalue = parseInt(_this.getstyle(obj, attr));
        }

        speed = (json[attr] - currentvalue) / 5;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        var compare_same = false;
        if (!olddata[attr]) {
          olddata[attr] = currentvalue;
        } else if (olddata[attr] !== currentvalue) {
          olddata[attr] = currentvalue;
        } else {
          compare_same = true;
        }

        if (currentvalue !== json[attr] && !compare_same) {
          if (attr === "opacity") {
            obj.style.opacity = (currentvalue + speed) / 100;
            obj.style.filter = `alpha(opacity:${currentvalue + speed})`;
          } else if (obj.style[attr]) {
            obj.style[attr] = `${currentvalue + speed}px`;
          } else {
            obj[attr] = currentvalue + speed;
          }
          bstop = false;
        }
      }
    }
    if (bstop) {
      clearInterval(obj.timer);
      fn && fn();
    }
  }, 10);
}

/*
深度遍历dom 
*/
export function deepTraversal1(node, nodeList = []) {
  if (node !== null) {
    nodeList.push(node);
    let children = node.children;
    for (let i = 0; i < children.length; i++) {
      deepTraversal1(children[i], nodeList);
    }
  }
  return nodeList;
}
/*
广度遍历dom 
*/
export function widthTraversal(node) {
  let nodes = [];
  let stack = [];
  if (node) {
    stack.push(node);
    while (stack.length) {
      let item = stack.shift();
      let children = item.children;
      nodes.push(item);
      // 队列,先进先出
      // nodes = [] stack = [parent]
      // nodes = [parent] stack = [child1,child2,child3]
      // nodes = [parent, child1] stack = [child2,child3,child1-1,child1-2]
      // nodes = [parent,child1,child2]
      for (let i = 0; i < children.length; i++) {
        stack.push(children[i]);
      }
    }
  }
  return nodes;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值