ElectronicReader/js/bookdetail.js

let beginWid = window.innerWidth;
//移动设备的高度
// let deviceHeight = document.documentElement.clientHeight;
// $('.container').css('height', deviceHeight+'px')
var Dom = {
	font_Pop: $("#font_Pop"),
	extra_Pop: $("#extra_Pop"),
	nav_top: $("#nav_top"),
	nav_bottom: $("#nav_bottom"),
	icon_Aa: $("#icon_Aa"),
	icon_extra: $("#icon_extra"),
	body: $("body"),
	win: $(window),
	slider: $("#slider"),
	icon_mulu: $("#icon_mulu"),
	mulu_Box: $("#mulu_Box"),
	mulu_Dialog: $("#mulu_Dialog"),
	mulu_Mask: $("mulu_Mask"),
	mulu_Cons: $("#mulu_Cons"),
	muluList: $("#muluList"),
	bkList: $("#bk-list"),
	header: $("#header"),
	ChapterDialog: $("#ChapterDialog")
}
var Util = (function() { //封装的本地存储和json数据解析
	var prefix = 'function_reader_';
	var StorageGetter = function(key) {
		return localStorage.getItem(prefix + key);
	}
	var StorageSetter = function(key, val) {
		return localStorage.setItem(prefix + key, val);
	}
	//通过url来获取加密信息，并解密
	var getJsonp = function(url, callback) {
		return $.jsonp({
			url: url,
			cache: true,
			callback: 'duokan_fiction_chapter',
			success: function(result) {
				//获取加密信息，解码、转json
				var data = $.base64.decode(result);
				var json = decodeURIComponent(escape(data));
				callback(json);
			}
		})
	}
	return {
		getJsonp: getJsonp,
		StorageGetter: StorageGetter,
		StorageSetter: StorageSetter
	}
})();

/***** 存储记录 *****/
//背景颜色
var bgColor = Util.StorageGetter("bgColor") || "rgb(233, 223, 199)"; //默认”纸张“背景颜色
//字体颜色
var fontColor = bgColor === 'rgb(40, 53, 72)' ? "#f8f8f8" : "#000000"; //默认黑色
//字号大小
let size = Util.StorageGetter("font_size") ? parseInt(Util.StorageGetter("font_size")) : 18;
var fontSize = size / 16;

//数据层的初始化
var readerUIFrame = ReaderBaseFrame($('.Content'));
var readerMuluFrame = ReaderMuluFrame($('#muluList'), '初始化')

var File_id = 0;
var Chapter_id = 0;
var ChapterTotal = 0;
var ChapterList = [];


var readerm = ReaderModel();
readerm.init(function(data, mulu) {
	readerUIFrame(data);
	ChapterList = mulu;
	readerMuluFrame(mulu, '2');
	$("#ChapterTitle").text(data.ct);
	setHtmlStyle()

});
//业务事件的初始化
EventHandler();

function ReaderBaseFrame(container) { //UI渲染层

	function ParseChapterData(jsonData) { //生成要展示的 html文本
		let jsonObj = jsonData;
		let size = Util.StorageGetter("font_size");
		size = size ? parseInt(size) : 18;
		fontSize = size / 16;
		let fontSizeAdd6 = (size + 6) / 16;
		let fontSizeAdd2 = (size + 2) / 16;
		let html = "";
		if (!!jsonObj.introduction && jsonObj.introduction.length > 0) {
			html += "<br/><br/><br/>";
			for (let i = 0; i < jsonObj.introduction.length; i++) {
				html +=
					`<p class="colorStyle" style="font-size:${fontSize}rem;color:${fontColor}">${jsonObj.introduction[i]}</p>`;
			}
		}
		// 封面-0，扉页-1 不需要展示章节名称
		if (!['0', '1'].includes(Chapter_id + '')) {
			html += `<br/><br/><br/>`;
			if (jsonObj.ct && jsonObj.ct !== jsonObj.t) {
				html += `<h3 style=font-size:${fontSizeAdd6};color:${fontColor}">${jsonObj.ct}</h3><br/>`;
			}
			html += `<h4 style=font-size:${fontSizeAdd6};color:${fontColor}">${jsonObj.t}</h4>`;
		}
		//正文内容
		for (let i = 0; i < jsonObj.p.length; i++) {
			if (Chapter_id == 0) {
				html += "<div>" + jsonObj.p[i] + "</div>";
			} else {
				if (/^##.*/.test(jsonObj.p[i])) {
					html +=
						`<h6 class="colorStyle" style="line-height: 2.0625rem; padding: 1.25rem 0 0.3125rem; font-weight: bold; font-size:${fontSize}rem;color:${fontColor}">${jsonObj.p[i].replace('##', '')}</h6>`;
				} else if (/^#.*/.test(jsonObj.p[i])) {
					html +=
						`<h5 class="colorStyle" style="line-height: 2.1875rem; padding: 0.625rem 0; font-weight: bold; font-size:${fontSizeAdd2}rem;color:${fontColor}">${jsonObj.p[i].replace('#', '')}</h5>`;
				} else if (/^\<img.*/.test(jsonObj.p[i])) {
					html +=
						`<div style="margin-bottom:1.25rem;">${jsonObj.p[i]}</div>`;
				} else if (/^&tableTemp.*/.test(jsonObj.p[i])) {
					let tableTemp = jsonObj.p[i].split("-")[1];
					if (!tableTemp) {
						continue;
					}
					if (!jsonObj[tableTemp]) {
						continue;
					}
					let tableObj = jsonObj[tableTemp];
					if (JSON.stringify(tableObj) === '{}') {
						continue;
					}
					html +=
						`<table class="table ${tableObj.className||''}" style="${tableObj.style||''}" cellpadding="0" cellspacing="0">`;
					if (!!tableObj.tableTitle) {
						html += `<caption class="caption">${tableObj.tableTitle}</caption>`;
					}
					if (!!tableObj.cTitle) {
						html += `<caption class="caption secCaption cTitle">${tableObj.cTitle}</caption>`;
					}
					if (tableObj.tableHead.length) {
						html += `<thead class="thead">`;
						tableObj.tableHead.map((tr, trIndex) => {
							html += `<tr class="tr">`;
							let thList = tr.th;
							thList.map((item, index) => {
								html +=
									`<th class="th ${item instanceof Array ? 'slash-wrap':''}" style="${tr.style && tr.style[index]||''}" colspan="${tr.colSpan&&tr.colSpan[index]||1}" rowspan="${tr.rowSpan&&tr.rowSpan[index]||1}">`;
								if (item instanceof Array) {
									item.map((itemLi, liIndex) => {
										if (itemLi === "|") {
											html += `<span class="slash"></span>`
										} else {
											html +=
												`<span class="${liIndex===0?'left':'right'}" style="${liIndex===0?tr.slash&&tr.slash.leftText||'':tr.slash&&tr.slash.rightText||''}">${itemLi}</span>`
										}
									})
								} else {
									html += `${item}`;
								}
								html += '</th>';
							})
							html += `</tr>`;
						})
						html += `</thead>`;
					}
					if (tableObj.tableBody.length) {
						html += `<tbody class="tbody">`;
						tableObj.tableBody.map(tr => {
							let tdList = tr.td;
							html += `<tr class="tr">`;
							tdList.length && tdList.map((liDom, index) => {
								html +=
									`<td class="td" style="${tr.style&&tr.style[index]||''}" colspan="${tr.colSpan&&tr.colSpan[index]||1}" rowspan="${tr.rowSpan&&tr.rowSpan[index]||1}">${liDom}</td>`;
							})
							html += "</tr>"
						})
						html += `</tbody>`
					}
					html += `</table>`;
				} else {
					html +=
						`<p class="colorStyle" style="font-size:${fontSize}rem;color:${fontColor};text-align:${jsonObj.p[i].substr(0, 6) === 'pStart' ? 'start' : 'justify'}">${jsonObj.p[i].replace("pStart", '')}</p>`;
				}
			}
		}

		html = html.replace("##", )
		return html;
	}

	return function(data) { //返回 渲染后的结果data：解密后的json数据
		container.html(ParseChapterData(data));
		//设置斜线
		setSlash()
	}
}

function ReaderMuluFrame(container, flag) { //目录UI渲染层
	function ParseChapterMuluData(jsonData) { //生成要展示的 html文本
		let mulu = '';
		for (let i = 0; i < jsonData.length; i++) {
			let jsonObj = jsonData[i];
			if (jsonObj.children) {
				mulu +=
					`<li class="mui-table-view-cell mui-collapse parentLi"><a class="mui-navigate-right list-li-a" data-cid="${jsonObj.chapter_id}" data-fid="${jsonObj.file_id}" href="#">${jsonObj.title}</a><ul class="mui-table-view mui-table-view-chevron">`;
				for (let k = 0; k < jsonObj.children.length; k++) {
					mulu += `<li class="mui-table-view-cell"><a class="mui-navigate-right list-li-a" data-cid="${jsonObj.children[k].chapter_id}" data-fid="${jsonObj.children[k].file_id}" href="#">
									${jsonObj.children[k].title}</a></li>`;
				}
				mulu += '</ul></li>';
			} else {
				mulu += `<li class="mui-table-view-cell parentLi"><a class="mui-navigate-right list-li-a" data-cid="${jsonObj.chapter_id}" data-cid="${jsonObj.file_id}" href="#">${jsonObj.title}
							 	</a></li>`;
			}
		}
		mulu = mulu.replace("##", );
		return mulu;
	}

	return function(data) { //返回 渲染后的结果data：解密后的json数据
		container.html(ParseChapterMuluData(data));
	}
}

function ReaderModel() { //数据交互层
	//todo 获取章节信息
	var init = function(Uicallback) { //初始化 信息
		getFictionInfo(function(mulu) {
			getCurChaptInfo(Chapter_id, function(data) {
				//todo
				Uicallback && Uicallback(data, mulu);
			})
		})
	};

	var getFictionInfo = function(callback) { //获取所有章节摘要信息
		$.get('data/chapter.json', function(data) {
			//todo 获取章节信息之后的回调
			Chapter_id = parseInt(Util.StorageGetter("ChapterId"));
			File_id = parseInt(Util.StorageGetter("FileId"));
			//选择是否从头阅读
			if (Chapter_id !== 0) {
				if (confirm('您要继续上次的阅读么？')) {} else {
					Chapter_id = 0;
				}
			}
			let list = data.chapters;
			for (let i = 0; i < list.length; i++) {
				if (!isFinite(Chapter_id) && list[i].type !== 'file') {
					Chapter_id = list[i].chapter_id;
					File_id = list[i].file_id;
				}
				if (list[i].children) {
					ChapterTotal += list[i].children.length;
					if (!isFinite(Chapter_id)) {
						Chapter_id = list[i].children[0].chapter_id;
						File_id = list[i].children[0].file_id;
					}
				} else if (list[i].type === 'chapter') {
					ChapterTotal += 1;
				}
			}
			callback && callback(list);
		}, 'json');
	};

	var getCurChaptInfo = function(Chapter_id, callback) { //获取当前Chapter_id章节详细信息
		// $.get('data/data' + Chapter_id + '.json', function(data,status) {
		// 	//todo 获取详细信息之后的回调
		// 	console.log(status,'status')
		// 	if (data.result == 0) {
		// 		// var url=data.jsonp;
		// 		// Util.getJsonp(url,function(data){
		// 		callback && callback(data);
		// 		$("#ChapterTitle").text(data.ct);
		// 		// });//通过url来获取加密信息，并解密
		// 	}
		// }, 'json');
		$.getJSON('data/data' + Chapter_id + '.json')
			.done(function(data) {
				// 请求成功，文件存在
				// console.log("文件存在", data);
				if (data.result == 0) {
					callback && callback(data);
				}
			})
			.fail(function(jqXHR, textStatus, errorThrown) {
				// console.log("文件不存在",jqXHR);
				callback && callback({
					p: [],
					t: "",
					result: 0
				});
				// 请求出错，文件不存在
				// if (jqXHR.status === 404) {
				//   console.log("文件不存在");
				// } else {
				//   console.log("请求出错");
				// }
			});
	};

	var prveChapter = function() { //上一页
		Chapter_id = parseInt(Chapter_id);
		if (Chapter_id == 0) {
			return;
		}
		Chapter_id -= 1;
		//调用方法获取 Chapter_id章节信息
		getCurChaptInfo(Chapter_id, function(data) {
			readerUIFrame(data); //渲染html数据
		});
		Util.StorageSetter("ChapterId", Chapter_id);
		//
		updateFileId()
	};

	var nextChapter = function() { //下一页
		Chapter_id = parseInt(Chapter_id);
		if (Chapter_id == ChapterTotal - 1) {
			return;
		}
		Chapter_id += 1;
		//调用方法获取 Chapter_id章节信息
		getCurChaptInfo(Chapter_id, function(data) {
			readerUIFrame(data);
		});
		Util.StorageSetter("ChapterId", Chapter_id);
		//
		updateFileId()

	};

	var jumpChapter = function() { //跳页
		Chapter_id = parseInt(Chapter_id);
		File_id = parseInt(File_id);
		//调用方法获取 Chapter_id章节信息
		getCurChaptInfo(Chapter_id, function(data) {
			readerUIFrame(data); //渲染html数据
		});
		Util.StorageSetter("ChapterId", Chapter_id);
		updateFileId()
	};

	var updateFileId = function() { //更新目录一级 file_id
		for (let item of ChapterList) {
			if (item.type === 'file') {
				let obj = item.children.find(child => child.chapter_id == Chapter_id);
				if (obj) {
					File_id = obj.file_id;
					$("#ChapterTitle").text(obj.cTitle);
					break;
				}
				continue;
			}
			if (Chapter_id === item.chapter_id) {
				File_id = item.file_id;
				$("#ChapterTitle").text(item.cTitle);
				break;
			}
		}
		Util.StorageSetter("FileId", File_id);
	}


	return {
		init: init,
		prveChapter: prveChapter,
		nextChapter: nextChapter,
		jumpChapter: jumpChapter,
	}
}

function EventHandler() { //业务事件处理层
	//点击主体中间事件
	// $("#action_mid").click(function() {
	// 	if (Dom.nav_top.css('display') == "none") {
	// 		actNavDialog(true)
	// 	} else {
	// 		actAllDialog(false)
	// 	}
	// });

	//=============
	let upperElement = document.getElementById('upperElement')
	upperElement.addEventListener('click', function(event) {
		var target = event.target;
		if (['btn_next', 'btn_prev'].includes(target.id)) {

		} else {
			if (Dom.nav_top.css('display') == "none") {
				actNavDialog(true)
			} else {
				actAllDialog(false)
			}
		}

		// 判断事件触发的源元素是上层元素还是下层元素
		// if (target.id === 'lowerElement') {
		//   // 如果是下层元素，则触发下层元素的事件
		//   console.log('下层元素的事件被触发');
		//   // 实现下层元素的事件处理逻辑
		// } else {
		//   // 如果是上层元素，则触发上层元素的事件
		//   console.log('上层元素的事件被触发');
		//   // 实现上层元素的事件处理逻辑
		// }
	});




	//=============
	//点击返回事件
	$(".nav_back_book").click(function() {
		Chapter_id = parseInt(Chapter_id);
		if (Chapter_id == 0) {
			return;
		}
		if (Dom.nav_top.css('display') == "none") {
			return;
		}
		Chapter_id = 0;
		readerm.jumpChapter();
	});
	//点击目录事件--顶部浮窗
	$("#topMulu").click(function() {
		muluShow("top")
	});
	//点击目录事件--底部导航
	$("#icon_mulu").click(function() {
		muluShow()
	});
	var muluShow = function(type) {
		Dom.icon_extra.removeClass("act");
		if (Dom.mulu_Box.css('display') == 'none') {
			$('body,html').addClass('notScroll');
			Dom.mulu_Box.show();
			if (type === 'top') {
				Dom.mulu_Box.css("bottom", 0)
			} else {
				Dom.mulu_Box.css("bottom", 70)
			}

			Dom.nav_top.hide();
			Dom.mulu_Mask.show();
			Dom.mulu_Cons.show();
			//章节总数赋值
			$('#ChapterTotal').text(ChapterTotal)
			//给当前选中章节高亮
			$(".mui-active").removeClass("mui-active");
			$(".highChapter").removeClass("highChapter");
			let optDom = $(".parentLi")[File_id];
			$(optDom).addClass("mui-active");
			$($(optDom).find("a")).each((i, aNode) => {
				if ($(aNode).data('cid') == Chapter_id) {
					$(aNode).addClass("highChapter")
				}
			})
		} else {
			muluUpdateActive();
			actMuluDialog(false);
		}
		$("#muluList,#muluList .mui-table-view,.list-li-a,.mui-table-view-cell>a:not(.mui-btn).mui-active").css(
			'background-color', bgColor);
		actFontDialog(false)
		actExtraDialog(false);
	}
	//点击目录列表进行指定跳转
	Dom.muluList.on("click", function(e) {
		let cid = $(e.target).data('cid');
		if (cid === undefined || cid === null || cid === "") {
			return
		}
		Chapter_id = cid;
		File_id = $(e.target).data('fid');
		let cSpan = $(e.target).parent().parent("ul").prev();
		let cTitle = cSpan[0] ? cSpan[0].text : e.target.text;
		$("#ChapterTitle").text(cTitle);
		muluUpdateActive();
		readerm.jumpChapter();
		actAllDialog(false)
		window.scrollTo(0, 0);
	})
	// 点击弹窗内容以外的地方关闭弹窗
	$("#mulu_Mask").on('click', function(e) {
		// if ($(e.target).closest('#mui-content').length > 0) {
		//   console.log('弹出框内部被点击了');
		// } else {
		//   console.log('弹出框以外的部分被点击了');
		// 关闭弹框
		actAllDialog(false)

		// }
	});
	//点击字号事件
	$(".btn_Aa").click(function() {
		Dom.icon_extra.removeClass("act");
		if (Dom.font_Pop.css('display') == 'none') {
			Dom.font_Pop.show();
			Dom.slider.val(fontSize);
		} else {
			Dom.font_Pop.hide();
		}
		actMuluDialog(false);
		actExtraDialog(false);
	});
	//滚动条事件
	Dom.win.scroll(function() {
		actAllDialog(false)
	})
	//点击字体大小事件
	Dom.slider.change(function() {
		let NowFontSize = Number($(this).val());
		if (NowFontSize > 24 || NowFontSize < 16) {
			return;
		}
		$("p").css('font-size', NowFontSize / 16 + 'rem');
		$("h6").css('font-size', NowFontSize / 16 + 'rem');
		$("h4").css('font-size', (NowFontSize + 6) / 16 + 'rem');
		$("h5").css('font-size', (NowFontSize + 2) / 16 + 'rem');
		Util.StorageSetter("font_size", NowFontSize);
	});
	//点击其他事件
	$(".btn-extra").click(function() {
		Dom.icon_extra.addClass("act");
		if (Dom.extra_Pop.css('display') == 'none') {
			Dom.extra_Pop.show();
			if (bgColor) {
				$(".bk-item").each((i, liDom) => {
					let nodeSpan = $($(liDom).find(".bk-container"));
					nodeSpan.removeClass("bk-container-current")
					let itembg = nodeSpan[0].style.backgroundColor;
					if (itembg === bgColor) {
						nodeSpan.addClass("bk-container-current")
					}
				})
			}

		} else {
			Dom.extra_Pop.hide();
		}
		actMuluDialog(false);
		actFontDialog(false);
	});
	//点击背景颜色切换
	Dom.bkList.on("click", function(e) {
		if (!$(e.target).hasClass("bk-container")) {
			return
		}
		bgColor = $(e.target)[0].style.backgroundColor;
		updateBgColor($(e.target), "bgCheck")

	})
	//更新颜色设置的选中效果
	var updateBgColor = function(target, type) {
		$(target).addClass("bk-container-current");
		let optDom = $(target).parent(".bk-item").siblings();
		$(optDom).each((i, liDom) => {
			$($(liDom).find(".bk-container")).removeClass("bk-container-current")
		})
		let isDark = bgColor === 'rgb(40, 53, 72)';
		fontColor = isDark ? "#f8f8f8" : "#000000";
		setHtmlStyle();
		Util.StorageSetter("bgColor", bgColor);
		//更新图标
		Dom.icon_extra.removeClass().addClass(
			`bottom-icon act ${isDark ? "dark-icon-extra" : "light-icon-extra"}`);
		Dom.icon_Aa.removeClass().addClass(`bottom-icon ${isDark ? "dark-icon-Aa" : "light-icon-Aa"}`);
		Dom.icon_mulu.removeClass().addClass(`bottom-icon ${isDark ? "dark-icon-mulu" : "light-icon-mulu"}`);
	}


	$("#btn_prev").click(function() {
		window.scrollTo(0, 0);
		readerm.prveChapter();
	});

	$("#btn_next").click(function() {
		window.scrollTo(0, 0);
		readerm.nextChapter();
	});
}

//设置文本样式
function setHtmlStyle() {
	Dom.body.css({
		'background-color': bgColor,
		'color': fontColor
	});
	$(".bgStyle").css('background-color', bgColor);
	$(".colorStyle").css('color', fontColor);
	let isDark = bgColor === 'rgb(40, 53, 72)';
	$("#topLeftIcon").removeClass().addClass(`top_left_icon ${isDark ? "dark-icon-mulu" : "light-icon-mulu"}`);
	$("#nav_icon").removeClass().addClass(
		`nav_return nav_back_book ${isDark ? "dark-icon-navleft" : "light-icon-navleft"}`);
}

//整体弹窗 展示控制
function actAllDialog(flag) {
	actLightDialog(flag);
	actFontDialog(flag);
	actMuluDialog(flag);
	actNavDialog(flag);
	actExtraDialog(flag);

}
//光亮设置 展示控制
function actLightDialog(flag) {
	//展示
	if (flag) {
		return
	}
	//隐藏

}
//字号设置 展示控制
function actFontDialog(flag) {
	//展示
	if (flag) {
		let iconClass = bgColor === 'rgb(40, 53, 72)' ? "dark-icon-Aa" : "light-icon-Aa";
		Dom.icon_Aa.addClass(iconClass);
		return
	}
	//隐藏
	Dom.font_Pop.hide();

}
//目录设置 展示控制
function actMuluDialog(flag) {
	//展示
	if (flag) {
		let iconClass = bgColor === 'rgb(40, 53, 72)' ? "dark-icon-mulu" : "light-icon-mulu";
		Dom.icon_mulu.addClass(iconClass);
		return
	}
	//隐藏
	Dom.mulu_Box.hide();
	Dom.mulu_Mask.hide();
	Dom.mulu_Cons.hide();
	$('body,html').removeClass('notScroll');

}
//其他设置 展示控制
function actExtraDialog(flag) {
	//展示
	if (flag) {
		return
	}
	//隐藏
	Dom.extra_Pop.hide();

}
//顶部导航+底部导航 展示控制
function actNavDialog(flag) {
	//展示
	if (flag) {
		Dom.nav_top.show();
		Dom.nav_bottom.show();
		let isDark = bgColor === 'rgb(40, 53, 72)';
		Dom.icon_extra.addClass(`${isDark ? "dark-icon-extra" : "light-icon-extra"}`);
		Dom.icon_Aa.addClass(`${isDark ? "dark-icon-Aa" : "light-icon-Aa"}`);
		Dom.icon_mulu.addClass(`${isDark ? "dark-icon-mulu" : "light-icon-mulu"}`);
		return
	}
	//隐藏
	Dom.nav_top.hide();
	Dom.nav_bottom.hide();
	Dom.icon_extra.removeClass().addClass("bottom-icon");
	Dom.icon_Aa.removeClass().addClass("bottom-icon");
	Dom.icon_mulu.removeClass().addClass("bottom-icon");

}
//给当前选中章节高亮，去掉其他
function muluUpdateActive() {
	$(".parentLi").each((i, liDom) => {
		$($(liDom).find("a")).each((i, aNode) => {
			if ($(aNode).data('fid') == File_id) {
				$(liDom).addClass("mui-active")
			} else {
				$(liDom).removeClass("mui-active")
			}
			if ($(aNode).data('cid') == Chapter_id) {
				$(aNode).addClass("highChapter")
			} else {
				$(aNode).removeClass("highChapter")
			}
		})

	})

}


//设置斜线
function setSlash() {
	let hasSlash = $('span').is(".slash");
	if (!hasSlash) return;
	//
	$('.slash-wrap').each((i, ele) => {
		/* 斜边边长 */
		/* Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) */
		let width = $(ele).outerWidth();
		let height = $(ele).parents('.thead').outerHeight();
		let slashWidth = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
		/* 旋转角度计算公式 */
		/*  Math.atan(height / width) * 180 / Math.PI  */
		let transformRole = Math.atan(height / width) * 180 / Math.PI;
		$(ele).find(".slash").css({
			width: slashWidth,
			transform: `rotate(${transformRole}deg)`
		})
	})
}


//监听屏幕宽度

const getWindowInfo = () => {
	const windowInfo = {
		width: window.innerWidth,
		hight: window.innerHeight
	}
	// console.log(windowInfo,'===========上次的',beginWid);
	if (windowInfo.width !== beginWid) {
		setSlash()
	}
};
//防抖
const debounce = (fn, delay) => {
	let timer;
	return function() {
		if (timer) {
			clearTimeout(timer);
		}
		timer = setTimeout(() => {
			fn();
		}, delay);
	}
};
const cancalDebounce = debounce(getWindowInfo, 500);

window.addEventListener('resize', cancalDebounce);