zhangm
/
ElectronicReader


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<link rel="shortcut icon" href="favicon.ico" />
		<link rel="bookmark" href="favicon.ico" type="image/x-icon" 　 />
		<title>2023年中国航油-管理年鉴</title>
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/main.css" />
		<style>
			.m-artical-action-mid {
				position: fixed;
				width: 100%;
				height: 40%;
				top: 30%;
				z-index: 9998;
			}

			#muluList {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: -1px;
			}

			#muluList,
			#muluList .mui-table-view,
			.list-li-a,
			.mui-table-view-cell>a:not(.mui-btn).mui-active {
				background-color: #e9dfc7;
			}

			.highChapter {
				color: red !important;
			}
		</style>
	</head>
	<body>
		<div>
			<!--中间点击层-->
			<div class="m-artical-action">
				<div class="m-artical-action-mid" id="action_mid"></div>
			</div>
			<!--顶部导航-->
			<div class="nav-top" id="nav_top" style="display: none;">
				<div class="nav_container">
					<div class="nav_return nav_back_book"></div>
					<div class="nav_text nav_back_book" id="nav_text">返回书架</div>
				</div>
			</div>
			<!--主体内容-->
			<header id="header" class="top_mulu_box">
				<div class="top_mulu_return  nav_back_book">
					< </div>
						<div class="top_mulu_text  nav_back_book" id="ChapterTitle"></div>
			</header>
			<div class="container">
				<div class="Content">


				</div>
				<div class="page_btn">
					<button class="btn-prev" id="btn_prev">上一章</button>
					<button class="btn-next" id="btn_next">下一章</button>
				</div>
			</div>

			<!--底部导航栏    -->
			<div class="nav-bottom" id="nav_bottom" style="display: none;">
				<div class="btn-mulu">
					<div class="mulu">
						<div class="icon_mulu" id="icon_mulu"> </div>
						<div class="text_mulu">目录</div>
					</div>
				</div>
				<div class="btn-model">
					<div class="model">
						<div class="icon-yejian" id="icon_model"> </div>
						<div class="text_yejian">夜间</div>
					</div>
				</div>

				<div class="btn_Aa">
					<div class="Aa">
						<div class="icon-Aa" id="icon_Aa"> </div>
						<div class="text_Aa">设置</div>
					</div>
				</div>

				<!--字体功能栏-->
				<div class="fontPop" id="font_Pop" style="display: none;">
					<div class="fontItem">
						<span class="fontItemTitle">字号</span>
						<div class="fontItemCons">
							<button class="btn_Big" id="btn_Big">大</button>
							<button class="btn_Small" id="btn_Small">小</button>
						</div>
					</div>
					<div class="fontItem">
						<span class="fontItemTitle">背景</span>
						<div class="fontItemCons" id="bk-list">
							<div class="bk-item" id="mb">
								<div class="bk-container" style="background-color: #f7eee5;"></div>
								<span>米白</span>
							</div>
							<div class="bk-item" id="zz">
								<div class="bk-container" style="background-color: #e9dfc7;"></div>
								<span>纸张</span>
							</div>
							<div class="bk-item" id="qh">
								<div class="bk-container" style="background-color: #a4a4a4;"></div>
								<span>浅灰</span>
							</div>
							<div class="bk-item" id="hy">
								<div class="bk-container" style="background-color: #cdefce;"></div>
								<span>护眼</span>
							</div>
							<div class="bk-item" id="hl">
								<div class="bk-container" style="background-color: #283548;"></div>
								<span>海蓝</span>
							</div>

						</div>
					</div>
				</div>
				<!-- 目录 -->
				<div class="muluBox" id="mulu_Box" style="display: none;">
					<div class="muluMask" id="mulu_Mask">

					</div>
					<div class="muluCons" id="mulu_Cons">
						<div class="muluTitle">
							<div>共<span id="ChapterTotal"></span>章</div>
							<!-- <div>倒叙/正序</div> -->
						</div>
						<div class="mui-content">
							<ul id="muluList" class="mui-table-view mui-table-view-chevron">


							</ul>
						</div>

					</div>

				</div>
			</div>
		</div>


		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.jsonp.js"></script>
		<script type="text/javascript" src="js/jquery.base64.js"></script>
		<script>
			//移动设备的高度
			let deviceHeight = document.documentElement.clientHeight;
			// $('.container').css('height', deviceHeight+'px')
			//
			var Dom = {
				font_Pop: $("#font_Pop"),
				nav_top: $("#nav_top"),
				nav_bottom: $("#nav_bottom"),
				icon_Aa: $("#icon_Aa"),
				body: $("body"),
				win: $(window),
				icon_model: $("#icon_model"),
				btn_Big: $("#btn_Big"),
				btn_Small: $("#btn_Small"),
				icon_mulu: $("#icon_mulu"),
				mulu_Box: $("#mulu_Box"),
				mulu_Mask: $("mulu_Mask"),
				mulu_Cons: $("#mulu_Cons"),
				muluList: $("#muluList"),
				bkList: $("#bk-list")
			}
			//数据层的初始化
			var RootContainer = $('.Content');
			var readerUIFrame = ReaderBaseFrame(RootContainer);
			var readerMuluFrame = ReaderMuluFrame(Dom.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);
				$("#ChapterTitle").text(data.t);
			});
			//业务事件的初始化
			EventHandler();


			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 bkgroundcolor = Util.StorageGetter("bkgroundcolor");
			var bkCurrColor = Util.StorageGetter("bkgroundcolor");
			Dom.body.css('background-color', bkgroundcolor);
			//字号大小 设置存储记录
			var InitFontSize;
			InitFontSize = Util.StorageGetter("font_size");
			InitFontSize = parseInt(InitFontSize);
			if (!InitFontSize) {
				InitFontSize = 18;
			}
			$("p").css('font-size', InitFontSize);


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

				function ParseChapterData(jsonData) { //生成要展示的 html文本
					let jsonObj = jsonData;
					let html = "<h4>" + jsonObj.t + "</h4>";
					if (jsonObj.ct) {
						let hLevel = 4;
						for (let i = 0; i < jsonObj.ct.length; i++) {
							hLevel -= 1;
							html += `<h${hLevel}>${jsonObj.ct[i]}</h${hLevel}><br/>`;
						}
					}
					for (let i = 0; i < jsonObj.p.length; i++) {
						if (Chapter_id == 0) {
							html += "<div>" + jsonObj.p[i] + "</div>";
						} else {
							html += "<p>" + jsonObj.p[i] + "</p>";
						}
					}
					html = html.replace("##", )
					return html;
				}

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

			function ReaderMuluFrame(container) { //目录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"));
						let list = data.chapters;
						for (let i = 0; i < list.length - 1; 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;
								}
							}
						}
						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.t);
					// 		// });//通过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) {
						// console.log(data, 'data')
						readerUIFrame(data); //渲染html数据
					});
					Util.StorageSetter("ChapterId", Chapter_id);
					//
					updateFileId()
				};

				var nextChapter = function() { //下一页
					Chapter_id = parseInt(Chapter_id);
					if (Chapter_id == ChapterTotal) {
						return;
					}
					Chapter_id += 1;
					//调用方法获取 Chapter_id章节信息
					getCurChaptInfo(Chapter_id, function(data) {
						//console.log(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) {
						//console.log(data);
						readerUIFrame(data); //渲染html数据
					});
					Util.StorageSetter("ChapterId", Chapter_id);
					Util.StorageSetter("FileId", File_id);
				};

				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.title);
								break;
							}
						} else {
							if (Chapter_id === item.chapter_id) {
								File_id = item.file_id;
								$("#ChapterTitle").text(item.title);
								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") {
						// Dom.nav_top.show();
						// Dom.nav_bottom.show();
						actExtraDialog(true)
					} else {
						actAllDialog(false)
						// Dom.nav_top.hide();
						// Dom.nav_bottom.hide();
						// Dom.font_Pop.hide();
						// Dom.icon_Aa.css('border', '');
						// Dom.icon_model.css('border', '');
						// Dom.mulu_Box.hide();
						// Dom.mulu_Mask.hide();
						// Dom.mulu_Cons.hide();
						// Dom.icon_mulu.css('border', '');
					}
				});
				//点击返回事件
				// $("#nav_text").click(function(){
				// 	window.location = "./pages/bookstand.html";
				// });
				$(".nav_back_book").click(function() {
					window.location = "./pages/bookstand.html";
				});
				//点击目录事件
				$(".icon_mulu").click(function() {
					if (Dom.mulu_Box.css('display') == 'none') {
						// Dom.icon_mulu.css('border', '1px solid #FF7800');
						Dom.mulu_Box.show();
						Dom.nav_top.hide();
						Dom.mulu_Mask.show();
						Dom.mulu_Cons.show();
						//章节总数赋值
						$('#ChapterTotal').text(ChapterTotal)
						//给当前选中章节高亮
						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 {
								$(aNode).removeClass("highChapter")
							}
						})
					} else {
						// Dom.icon_mulu.css('border', '');
						// Dom.mulu_Box.hide();
						// Dom.mulu_Mask.hide();
						// Dom.mulu_Cons.hide();
						muluUpdateActive();
						actMuluDialog(false);
					}
					Dom.icon_Aa.css('border', '');
					Dom.font_Pop.hide();
				});
				//点击目录列表进行指定跳转
				Dom.muluList.on("click", function(e) {
					let cid = $(e.target).data('cid');
					if (!cid) {
						return
					}
					Chapter_id = cid;
					File_id = $(e.target).data('fid');
					$("#ChapterTitle").text(e.target.text);
					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() {
					if (Dom.font_Pop.css('display') == 'none') {
						// Dom.icon_Aa.css('border', '1px solid #FF7800');
						Dom.font_Pop.show();
					} else {
						Dom.icon_Aa.css('border', '');
						Dom.font_Pop.hide();
					}
					Dom.icon_mulu.css('border', '');
					Dom.mulu_Box.hide();
					Dom.mulu_Mask.hide();
					Dom.mulu_Cons.hide();
				});
				//滚动条事件
				Dom.win.scroll(function() {
					actAllDialog(false)
					// Dom.nav_top.hide();
					// Dom.nav_bottom.hide();
					// Dom.font_Pop.hide();
					// Dom.mulu_Box.hide();
					// Dom.mulu_Mask.hide();
					// Dom.mulu_Cons.hide();
					// Dom.icon_Aa.css('border', '');
					// Dom.icon_model.css('border', '');
					// Dom.icon_mulu.css('border', '');
				})
				//点击 大、小事件
				Dom.btn_Big.click(function() {
					if (InitFontSize >= 20) {
						return;
					}
					InitFontSize += 1;
					$("p").css('font-size', InitFontSize);
					Util.StorageSetter("font_size", InitFontSize);
				});
				Dom.btn_Small.click(function() {
					if (InitFontSize <= 12) {
						return;
					}
					InitFontSize -= 1;
					$("p").css('font-size', InitFontSize);
					Util.StorageSetter("font_size", InitFontSize);
				});
				//点击夜间&日间 切换模式
				Dom.icon_model.click((e) => {
					if ($(e.target).hasClass("icon-yejian")) {
						//日间模式转夜间模式
						Dom.icon_model.removeClass("icon-yejian").addClass("icon-rijian");
						Dom.icon_model.siblings().text("日间");
						bkCurrColor = '#283548';
						updateBgColor($("#hl").find(".bk-container"))

					} else {
						//夜间模式转日间模式
						Dom.icon_model.removeClass("icon-rijian").addClass("icon-yejian");
						Dom.icon_model.siblings().text("夜间");
						bkCurrColor = Util.StorageGetter("bkHistory");
						model = Util.StorageGetter("model") || "zz";
						updateBgColor($("#" + model).find(".bk-container"))
					}

				});

				//点击背景颜色切换
				Dom.bkList.on("click", function(e) {
					if (!$(e.target).hasClass("bk-container")) {
						return
					}
					bkCurrColor = $(e.target)[0].style.backgroundColor;
					updateBgColor($(e.target), "bgCheck")
				})
				//
				var updateBgColor = function(target, type) {
					$(target).addClass("bk-container-current");
					Dom.body.css('background-color', bkCurrColor);
					//更新日夜模式
					let model = $(target).parent(".bk-item")[0].id;
					if (model === 'hl') {
						//记录夜间模式前的背景颜色和模式
						Util.StorageSetter("bkHistory", Util.StorageGetter("bkgroundcolor") || "#e9dfc7");
						if (type === "bgCheck") {
							//点击的背景颜色选择，需要更新模式  转为日间显示
							Dom.icon_model.removeClass("icon-yejian").addClass("icon-rijian");
							Dom.icon_model.siblings().text("日间");
						}
					} else {
						Util.StorageSetter("model", model);
						if (type === "bgCheck") {
							//点击的背景颜色选择，需要更新模式  转为夜间显示
							Dom.icon_model.removeClass("icon-rijian").addClass("icon-yejian");
							Dom.icon_model.siblings().text("夜间");
						}
					}
					let optDom = $(target).parent(".bk-item").siblings();
					$(optDom).each((i, liDom) => {
						$($(liDom).find(".bk-container")).removeClass("bk-container-current")
					})
					Util.StorageSetter("bkgroundcolor", bkCurrColor);
				}


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

				$("#btn_next").click(function() {
					window.scrollTo(0,0);
					readerm.nextChapter();
				});
			}
			//整体弹窗 展示控制
			function actAllDialog(flag) {
				actLightDialog(flag);
				actFontDialog(flag);
				actMuluDialog(flag);
				actExtraDialog(flag);

			}

			//光亮设置 展示控制
			function actLightDialog(flag) {
				//展示
				if (flag) {
					return
				}
				//隐藏
				Dom.icon_model.css('border', '');

			}
			//字体设置 展示控制
			function actFontDialog(flag) {
				//展示
				if (flag) {
					return
				}
				//隐藏
				Dom.font_Pop.hide();
				Dom.icon_Aa.css('border', '');

			}
			//目录设置 展示控制
			function actMuluDialog(flag) {
				//展示
				if (flag) {
					return
				}
				//隐藏
				Dom.mulu_Box.hide();
				Dom.mulu_Mask.hide();
				Dom.mulu_Cons.hide();
				Dom.icon_mulu.css('border', '');

			}

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

			}
			//给当前选中章节高亮，去掉其他
			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")
						}
					})

				})

			}
		</script>
	</body>

</html>