/**
* 前置省略号
* 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;
}