zhangm
/
ElectronicReader


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593
							<!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_Aa">
					<div class="Aa">
						<div class="icon-Aa" id="icon_Aa"> </div>
						<div class="text_Aa">字体</div>
					</div>
				</div>
				<div class="btn-yejian">
					<div class="yejian">
						<div class="icon-yejian" id="icon_yejian"> </div>
						<div class="text_yejian">夜间</div>
					</div>
				</div>

				<!--字体功能栏-->
				<div class="fontPop" id="font_Pop" style="display: none;">
					<div class="fontSize">
						<span>字号</span>
						<button class="btnBig" id="btn_Big">大</button>
						<button class="btnSmall" id="btn_Small">小</button>
					</div>
					<div class="fontBk">
						<span>背景</span>
						<div class="bkColor">
							<div class="bk-container" style="background-color: #f7eee5;">
								<div id="mb"><span> 米白 </span></div>
							</div>
							<div class="bk-container" style="background-color: #e9dfc7;">
								<div id="zz"><span> 纸张 </span></div>
							</div>
							<div class="bk-container" style="background-color: #a4a4a4;">
								<div id="qh"><span> 浅灰 </span></div>
							</div>
							<div class="bk-container" style="background-color: #cdefce;">
								<div id="hy"><span> 护眼 </span></div>
							</div>
							<div class="bk-container" style="background-color: #283548;">
								<div id="hl"><span> 海蓝 </span></div>
							</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="title"
							style="margin-bottom: 25px;display: flex;justify-content: space-between;align-items: center;">
							<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_yejian: $("#icon_yejian"),
				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")
			}
			//数据层的初始化
			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);
			});
			//业务事件的初始化
			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-id="${jsonObj.chapter_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-id="${jsonObj.children[k].chapter_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-id="${jsonObj.chapter_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) {
						//todo 获取详细信息之后的回调
						if (data.result == 0) {
							// var url=data.jsonp;
							// Util.getJsonp(url,function(data){
							callback && callback(data);
							$("#ChapterTitle").text(data.t);
							// });//通过url来获取加密信息，并解密
						}
					}, 'json');
				};

				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);
					//
					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
								break;
							}
						} else {
							if (Chapter_id === item.chapter_id) {
								File_id = item.file_id
								break;
							}
						}
					}
					Util.StorageSetter("FileId", File_id);
				};
				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);
					//
					for (let item of ChapterList) {
						console.log(item, 'item', Chapter_id)
						if (item.type === 'file') {
							let obj = item.children.find(child => child.chapter_id == Chapter_id)
							if (obj) {
								File_id = obj.file_id
								break;
							}
						} else {
							if (Chapter_id === item.chapter_id) {
								File_id = item.file_id
								break;
							}
						}
					}
					Util.StorageSetter("FileId", File_id);
				};
				var jumpChapter = function() { //跳页
					Chapter_id = parseInt(Chapter_id);
					if (Chapter_id == 0) {
						return;
					}
					Chapter_id -= 1;
					//调用方法获取 Chapter_id章节信息
					getJumpChapterInfo(Chapter_id, function(data) {
						//console.log(data);
						readerUIFrame(data); //渲染html数据
					});
					Unit.StorageSetter("ChapterId", Chapter_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();
					} else {
						Dom.nav_top.hide();
						Dom.nav_bottom.hide();
						Dom.font_Pop.hide();
						Dom.icon_Aa.css('border', '');
						Dom.icon_yejian.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('id') == 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();
						muludDelActive();
					}
					Dom.icon_Aa.css('border', '');
					Dom.font_Pop.hide();
				});
				//点击字体事件
				$(".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();
				});
				//点击夜间事件
				$(".btn-yejian").click(function() {
					if (Dom.body.css('background-color') != "rgb(40, 53, 72)") {
						bkCurrColor = '#283548';
						//$(".bkColor").find('.bk-container-current')[0].className='';
						Dom.body.css('background-color', bkCurrColor);
						Dom.icon_yejian.css('border', '1px #FF7800 solid');
						$("#hl").addClass('bk-container-current');

					} else {
						bkCurrColor = '#e9dfc7';
						Dom.body.css('background-color', bkCurrColor);
						Dom.icon_yejian.css('border', '');
						$("#hl").removeClass('bk-container-current');
						$("#mb").addClass('bk-container-current');
					}
					Util.StorageSetter("bkgroundcolor", bkCurrColor);

				});

				//滚动条事件
				Dom.win.scroll(function() {
					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_yejian.css('border', '');
					Dom.icon_mulu.css('border', '');


				})
				//点击 大、小事件
				Dom.btn_Big.click(function() {
					if (InitFontSize >= 20) {
						return;
					}
					InitFontSize += 1;
					console.log(InitFontSize);
					$("p").css('font-size', InitFontSize);
					Util.StorageSetter("font_size", InitFontSize);
				});
				Dom.btn_Small.click(function() {
					if (InitFontSize <= 12) {
						return;
					}
					InitFontSize -= 1;
					console.log(InitFontSize);
					$("p").css('font-size', InitFontSize);
					Util.StorageSetter("font_size", InitFontSize);
				});
				//点击背景颜色切换
				$(".bk-container").bind('click', function() {
					if ($(".bkColor").find('.bk-container-current').length > 0) {
						$(".bkColor").find('.bk-container-current')[0].className = '';
					} else {

					}
					var id = this.firstElementChild.id;
					$("#" + id).addClass('bk-container-current');

					switch (id) {
						case 'mb':
							Dom.body.css('background-color', '#f7eee5');
							break;
						case 'zz':
							Dom.body.css('background-color', '#e9dfc7');
							break;
						case 'qh':
							Dom.body.css('background-color', '#a4a4a4');
							break;
						case 'hy':
							Dom.body.css('background-color', '#cdefce');
							break;
						case 'hl':
							Dom.body.css('background-color', '#283548');
							break;
						default:
							break;
					}
					Util.StorageSetter("bkgroundcolor", Dom.body.css('background-color'));
				});

				$("#btn_prev").click(function() {
					readerm.prveChapter();
				});

				$("#btn_next").click(function() {
					readerm.nextChapter();
				});
			}

			function muludDelActive() {
				$(".parentLi").each((i, liNode) => {
					console.log(liNode, 'li')
					$(liNode).removeClass("mui-active")
					$($(liNode).find("a")).each((k, aNode) => {
						console.log(aNode, 'aNode', )
						$(aNode).removeClass("highChapter")
					})
				})

			}
		</script>
	</body>

</html>