bookdetail.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  6. <link rel="shortcut icon" href="favicon.ico" />
  7. <link rel="bookmark" href="favicon.ico" type="image/x-icon"   />
  8. <title>2023年中国航油-管理年鉴</title>
  9. <link rel="stylesheet" href="css/mui.min.css">
  10. <link rel="stylesheet" href="css/reset.css" />
  11. <link rel="stylesheet" href="css/main.css" />
  12. <style>
  13. .m-artical-action-mid {
  14. position: fixed;
  15. width: 100%;
  16. height: 40%;
  17. top: 30%;
  18. z-index: 9998;
  19. }
  20. #muluList {
  21. /*避免导航边框和列表背景边框重叠,看起来像两条边框似得;*/
  22. margin-top: -1px;
  23. }
  24. #muluList,
  25. #muluList .mui-table-view,
  26. .list-li-a,
  27. .mui-table-view-cell>a:not(.mui-btn).mui-active {
  28. background-color: #e9dfc7;
  29. }
  30. .highChapter {
  31. color: red !important;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div>
  37. <!--中间点击层-->
  38. <div class="m-artical-action">
  39. <div class="m-artical-action-mid" id="action_mid"></div>
  40. </div>
  41. <!--顶部导航-->
  42. <div class="nav-top" id="nav_top" style="display: none;">
  43. <div class="nav_container">
  44. <div class="nav_return nav_back_book"></div>
  45. <div class="nav_text nav_back_book" id="nav_text">返回首页</div>
  46. </div>
  47. </div>
  48. <!--主体内容-->
  49. <header id="header" class="top_mulu_box">
  50. <div class="top_mulu_return nav_back_book">
  51. < </div>
  52. <div class="top_mulu_text nav_back_book" id="ChapterTitle"></div>
  53. </header>
  54. <div class="container">
  55. <div class="Content">
  56. </div>
  57. <div class="page_btn">
  58. <button class="btn-prev" id="btn_prev">上一章</button>
  59. <button class="btn-next" id="btn_next">下一章</button>
  60. </div>
  61. </div>
  62. <!--底部导航栏 -->
  63. <div class="nav-bottom" id="nav_bottom" style="display: none;">
  64. <div class="btn-mulu">
  65. <div class="mulu">
  66. <div class="icon_mulu" id="icon_mulu"> </div>
  67. <div class="text_mulu">目录</div>
  68. </div>
  69. </div>
  70. <div class="btn-model">
  71. <div class="model">
  72. <div class="icon-yejian" id="icon_model"> </div>
  73. <div class="text_yejian">夜间</div>
  74. </div>
  75. </div>
  76. <div class="btn_Aa">
  77. <div class="Aa">
  78. <div class="icon-Aa" id="icon_Aa"> </div>
  79. <div class="text_Aa">设置</div>
  80. </div>
  81. </div>
  82. <!--字体功能栏-->
  83. <div class="fontPop" id="font_Pop" style="display: none;">
  84. <div class="fontItem">
  85. <span class="fontItemTitle">字号</span>
  86. <div class="fontItemCons">
  87. <button class="btn_Big" id="btn_Big">大</button>
  88. <button class="btn_Small" id="btn_Small">小</button>
  89. </div>
  90. </div>
  91. <div class="fontItem">
  92. <span class="fontItemTitle">背景</span>
  93. <div class="fontItemCons" id="bk-list">
  94. <div class="bk-item" id="mb">
  95. <div class="bk-container" style="background-color: #f7eee5;"></div>
  96. <span>米白</span>
  97. </div>
  98. <div class="bk-item" id="zz">
  99. <div class="bk-container" style="background-color: #e9dfc7;"></div>
  100. <span>纸张</span>
  101. </div>
  102. <div class="bk-item" id="qh">
  103. <div class="bk-container" style="background-color: #a4a4a4;"></div>
  104. <span>浅灰</span>
  105. </div>
  106. <div class="bk-item" id="hy">
  107. <div class="bk-container" style="background-color: #cdefce;"></div>
  108. <span>护眼</span>
  109. </div>
  110. <div class="bk-item" id="hl">
  111. <div class="bk-container" style="background-color: #283548;"></div>
  112. <span>海蓝</span>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. <!-- 目录 -->
  118. <div class="muluBox" id="mulu_Box" style="display: none;">
  119. <div class="muluMask" id="mulu_Mask">
  120. </div>
  121. <div class="muluCons" id="mulu_Cons">
  122. <div class="muluTitle">
  123. <div>共<span id="ChapterTotal"></span>章</div>
  124. <!-- <div>倒叙/正序</div> -->
  125. </div>
  126. <div class="mui-content">
  127. <ul id="muluList" class="mui-table-view mui-table-view-chevron">
  128. </ul>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. <script src="js/mui.min.js"></script>
  135. <script type="text/javascript" src="js/jquery.min.js"></script>
  136. <script type="text/javascript" src="js/jquery.jsonp.js"></script>
  137. <script type="text/javascript" src="js/jquery.base64.js"></script>
  138. <script>
  139. //移动设备的高度
  140. let deviceHeight = document.documentElement.clientHeight;
  141. // $('.container').css('height', deviceHeight+'px')
  142. //
  143. var Dom = {
  144. font_Pop: $("#font_Pop"),
  145. nav_top: $("#nav_top"),
  146. nav_bottom: $("#nav_bottom"),
  147. icon_Aa: $("#icon_Aa"),
  148. body: $("body"),
  149. win: $(window),
  150. icon_model: $("#icon_model"),
  151. btn_Big: $("#btn_Big"),
  152. btn_Small: $("#btn_Small"),
  153. icon_mulu: $("#icon_mulu"),
  154. mulu_Box: $("#mulu_Box"),
  155. mulu_Mask: $("mulu_Mask"),
  156. mulu_Cons: $("#mulu_Cons"),
  157. muluList: $("#muluList"),
  158. bkList: $("#bk-list"),
  159. header: $("#header")
  160. }
  161. //数据层的初始化
  162. var RootContainer = $('.Content');
  163. var readerUIFrame = ReaderBaseFrame(RootContainer);
  164. var readerMuluFrame = ReaderMuluFrame(Dom.muluList)
  165. var File_id = 0;
  166. var Chapter_id = 0;
  167. var ChapterTotal = 0;
  168. var ChapterList = [];
  169. var readerm = ReaderModel();
  170. readerm.init(function(data, mulu) {
  171. readerUIFrame(data);
  172. ChapterList = mulu;
  173. readerMuluFrame(mulu);
  174. $("#ChapterTitle").text(data.t);
  175. });
  176. //业务事件的初始化
  177. EventHandler();
  178. var Util = (function() { //封装的本地存储和json数据解析
  179. var prefix = 'function_reader_';
  180. var StorageGetter = function(key) {
  181. return localStorage.getItem(prefix + key);
  182. }
  183. var StorageSetter = function(key, val) {
  184. return localStorage.setItem(prefix + key, val);
  185. }
  186. //通过url来获取加密信息,并解密
  187. var getJsonp = function(url, callback) {
  188. return $.jsonp({
  189. url: url,
  190. cache: true,
  191. callback: 'duokan_fiction_chapter',
  192. success: function(result) {
  193. //获取加密信息,解码、转json
  194. var data = $.base64.decode(result);
  195. var json = decodeURIComponent(escape(data));
  196. callback(json);
  197. }
  198. })
  199. }
  200. return {
  201. getJsonp: getJsonp,
  202. StorageGetter: StorageGetter,
  203. StorageSetter: StorageSetter
  204. }
  205. })();
  206. //背景颜色 存储记录
  207. var bkgroundcolor = Util.StorageGetter("bkgroundcolor");
  208. var bkCurrColor = Util.StorageGetter("bkgroundcolor");
  209. Dom.body.css('background-color', bkgroundcolor);
  210. Dom.header.css('background-color', bkCurrColor);
  211. //字号大小 设置存储记录
  212. var InitFontSize;
  213. InitFontSize = Util.StorageGetter("font_size");
  214. InitFontSize = parseInt(InitFontSize);
  215. if (!InitFontSize) {
  216. InitFontSize = 18;
  217. }
  218. $("p").css('font-size', InitFontSize);
  219. $("h4").css('font-size', InitFontSize);
  220. function ReaderBaseFrame(container) { //UI渲染层
  221. function ParseChapterData(jsonData) { //生成要展示的 html文本
  222. let jsonObj = jsonData;
  223. CurrFontSize = Util.StorageGetter("font_size");
  224. CurrFontSize = parseInt(CurrFontSize);
  225. if (!CurrFontSize) {
  226. CurrFontSize = 18;
  227. }
  228. let TitleFontSize = CurrFontSize + 6;
  229. let RedFontSize = CurrFontSize + 2;
  230. let html = "<br/><br/><br/><br/><br/><h4 style='font-size: " + TitleFontSize + "px'>" + jsonObj.t + "</h4><br/>";
  231. if (jsonObj.ct) {
  232. let hLevel = 4;
  233. for (let i = 0; i < jsonObj.ct.length; i++) {
  234. hLevel -= 1;
  235. html += `<h${hLevel}>${jsonObj.ct[i]}</h${hLevel}><br/>`;
  236. }
  237. }
  238. for (let i = 0; i < jsonObj.p.length; i++) {
  239. if (Chapter_id == 0) {
  240. html += "<div>" + jsonObj.p[i] + "</div>";
  241. } else {
  242. if(jsonObj.p[i].indexOf('#') > -1) {
  243. html += "<br/><h5 style='color: crimson; font-size: " + RedFontSize + "px'>" + jsonObj.p[i].replace('#','') + "</h5>";
  244. }
  245. else {
  246. html += "<p style='font-size: " + CurrFontSize + "px'>" + jsonObj.p[i] + "</p>";
  247. }
  248. }
  249. }
  250. html = html.replace("##", )
  251. return html;
  252. }
  253. return function(data) { //返回 渲染后的结果data:解密后的json数据
  254. container.html(ParseChapterData(data));
  255. }
  256. }
  257. function ReaderMuluFrame(container) { //目录UI渲染层
  258. function ParseChapterMuluData(jsonData) { //生成要展示的 html文本
  259. let mulu = '';
  260. for (let i = 0; i < jsonData.length; i++) {
  261. let jsonObj = jsonData[i];
  262. if (jsonObj.children) {
  263. mulu +=
  264. `<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">`;
  265. for (let k = 0; k < jsonObj.children.length; k++) {
  266. 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="#">
  267. ${jsonObj.children[k].title}</a></li>`;
  268. }
  269. mulu += '</ul></li>';
  270. } else {
  271. 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}
  272. </a></li>`;
  273. }
  274. }
  275. mulu = mulu.replace("##", );
  276. return mulu;
  277. }
  278. return function(data) { //返回 渲染后的结果data:解密后的json数据
  279. container.html(ParseChapterMuluData(data));
  280. }
  281. }
  282. function ReaderModel() { //数据交互层
  283. //todo 获取章节信息
  284. var init = function(Uicallback) { //初始化 信息
  285. getFictionInfo(function(mulu) {
  286. getCurChaptInfo(Chapter_id, function(data) {
  287. //todo
  288. Uicallback && Uicallback(data, mulu);
  289. })
  290. })
  291. };
  292. var getFictionInfo = function(callback) { //获取所有章节摘要信息
  293. $.get('data/chapter.json', function(data) {
  294. //todo 获取章节信息之后的回调
  295. Chapter_id = parseInt(Util.StorageGetter("ChapterId"));
  296. File_id = parseInt(Util.StorageGetter("FileId"));
  297. //选择是否从头阅读
  298. if (Chapter_id !== 0) {
  299. if (confirm('请问您要继续上次的阅读么?')) {
  300. } else {
  301. Chapter_id = 0;
  302. }
  303. }
  304. let list = data.chapters;
  305. for (let i = 0; i < list.length - 1; i++) {
  306. if (!isFinite(Chapter_id) && list[i].type !== 'file') {
  307. Chapter_id = list[i].chapter_id;
  308. File_id = list[i].file_id;
  309. }
  310. if (list[i].children) {
  311. ChapterTotal += list[i].children.length
  312. if (!isFinite(Chapter_id)) {
  313. Chapter_id = list[i].children[0].chapter_id;
  314. File_id = list[i].children[0].file_id;
  315. }
  316. }
  317. }
  318. callback && callback(list);
  319. }, 'json');
  320. };
  321. var getCurChaptInfo = function(Chapter_id, callback) { //获取当前Chapter_id章节详细信息
  322. // $.get('data/data' + Chapter_id + '.json', function(data,status) {
  323. // //todo 获取详细信息之后的回调
  324. // console.log(status,'status')
  325. // if (data.result == 0) {
  326. // // var url=data.jsonp;
  327. // // Util.getJsonp(url,function(data){
  328. // callback && callback(data);
  329. // $("#ChapterTitle").text(data.t);
  330. // // });//通过url来获取加密信息,并解密
  331. // }
  332. // }, 'json');
  333. $.getJSON('data/data' + Chapter_id + '.json')
  334. .done(function(data) {
  335. // 请求成功,文件存在
  336. // console.log("文件存在", data);
  337. if (data.result == 0) {
  338. callback && callback(data);
  339. }
  340. })
  341. .fail(function(jqXHR, textStatus, errorThrown) {
  342. // console.log("文件不存在",jqXHR);
  343. callback && callback({
  344. p: [],
  345. t: "",
  346. result: 0
  347. });
  348. // 请求出错,文件不存在
  349. // if (jqXHR.status === 404) {
  350. // console.log("文件不存在");
  351. // } else {
  352. // console.log("请求出错");
  353. // }
  354. });
  355. };
  356. var prveChapter = function() { //上一页
  357. Chapter_id = parseInt(Chapter_id);
  358. if (Chapter_id == 0) {
  359. return;
  360. }
  361. Chapter_id -= 1;
  362. //调用方法获取 Chapter_id章节信息
  363. getCurChaptInfo(Chapter_id, function(data) {
  364. // console.log(data, 'data')
  365. readerUIFrame(data); //渲染html数据
  366. });
  367. Util.StorageSetter("ChapterId", Chapter_id);
  368. //
  369. updateFileId()
  370. };
  371. var nextChapter = function() { //下一页
  372. Chapter_id = parseInt(Chapter_id);
  373. if (Chapter_id == ChapterTotal) {
  374. return;
  375. }
  376. Chapter_id += 1;
  377. //调用方法获取 Chapter_id章节信息
  378. getCurChaptInfo(Chapter_id, function(data) {
  379. //console.log(data);
  380. readerUIFrame(data);
  381. });
  382. Util.StorageSetter("ChapterId", Chapter_id);
  383. //
  384. updateFileId()
  385. };
  386. var jumpChapter = function() { //跳页
  387. Chapter_id = parseInt(Chapter_id);
  388. File_id = parseInt(File_id);
  389. //调用方法获取 Chapter_id章节信息
  390. getCurChaptInfo(Chapter_id, function(data) {
  391. //console.log(data);
  392. readerUIFrame(data); //渲染html数据
  393. });
  394. Util.StorageSetter("ChapterId", Chapter_id);
  395. Util.StorageSetter("FileId", File_id);
  396. updateFileId()
  397. };
  398. var updateFileId = function() { //更新目录一级 file_id
  399. for (let item of ChapterList) {
  400. if (item.type === 'file') {
  401. let obj = item.children.find(child => child.chapter_id == Chapter_id)
  402. if (obj) {
  403. File_id = obj.file_id;
  404. $("#ChapterTitle").text(obj.title);
  405. break;
  406. }
  407. } else {
  408. if (Chapter_id === item.chapter_id) {
  409. File_id = item.file_id;
  410. $("#ChapterTitle").text(item.title);
  411. break;
  412. }
  413. Util.StorageSetter("FileId", File_id);
  414. }
  415. }
  416. }
  417. return {
  418. init: init,
  419. prveChapter: prveChapter,
  420. nextChapter: nextChapter,
  421. jumpChapter: jumpChapter,
  422. }
  423. }
  424. function EventHandler() { //业务事件处理层
  425. //点击主体中间事件
  426. $("#action_mid").click(function() {
  427. if (Dom.nav_top.css('display') == "none") {
  428. // Dom.nav_top.show();
  429. // Dom.nav_bottom.show();
  430. actExtraDialog(true)
  431. } else {
  432. actAllDialog(false)
  433. // Dom.nav_top.hide();
  434. // Dom.nav_bottom.hide();
  435. // Dom.font_Pop.hide();
  436. // Dom.icon_Aa.css('border', '');
  437. // Dom.icon_model.css('border', '');
  438. // Dom.mulu_Box.hide();
  439. // Dom.mulu_Mask.hide();
  440. // Dom.mulu_Cons.hide();
  441. // Dom.icon_mulu.css('border', '');
  442. }
  443. });
  444. //点击返回事件
  445. // $("#nav_text").click(function(){
  446. // window.location = "./pages/bookstand.html";
  447. // });
  448. $(".nav_back_book").click(function() {
  449. // window.location = "./pages/bookstand.html";
  450. Chapter_id = parseInt(Chapter_id);
  451. if (Chapter_id == 0) {
  452. return;
  453. }
  454. if (Dom.nav_top.css('display') == "none") {
  455. return;
  456. }
  457. Chapter_id = 0;
  458. readerm.jumpChapter();
  459. });
  460. //点击目录事件
  461. $(".icon_mulu").click(function() {
  462. if (Dom.mulu_Box.css('display') == 'none') {
  463. // Dom.icon_mulu.css('border', '1px solid #FF7800');
  464. Dom.mulu_Box.show();
  465. Dom.nav_top.hide();
  466. Dom.mulu_Mask.show();
  467. Dom.mulu_Cons.show();
  468. //章节总数赋值
  469. $('#ChapterTotal').text(ChapterTotal)
  470. //给当前选中章节高亮
  471. let optDom = $(".parentLi")[File_id];
  472. $(optDom).addClass("mui-active");
  473. $($(optDom).find("a")).each((i, aNode) => {
  474. if ($(aNode).data('cid') == Chapter_id) {
  475. $(aNode).addClass("highChapter")
  476. } else {
  477. $(aNode).removeClass("highChapter")
  478. }
  479. })
  480. } else {
  481. // Dom.icon_mulu.css('border', '');
  482. // Dom.mulu_Box.hide();
  483. // Dom.mulu_Mask.hide();
  484. // Dom.mulu_Cons.hide();
  485. muluUpdateActive();
  486. actMuluDialog(false);
  487. }
  488. Dom.icon_Aa.css('border', '');
  489. Dom.font_Pop.hide();
  490. });
  491. //点击目录列表进行指定跳转
  492. Dom.muluList.on("click", function(e) {
  493. let cid = $(e.target).data('cid');
  494. if (!cid) {
  495. return
  496. }
  497. Chapter_id = cid;
  498. File_id = $(e.target).data('fid');
  499. $("#ChapterTitle").text(e.target.text);
  500. muluUpdateActive();
  501. readerm.jumpChapter();
  502. actAllDialog(false)
  503. window.scrollTo(0,0);
  504. })
  505. // 点击弹窗内容以外的地方关闭弹窗
  506. $("#mulu_Mask").on('click', function(e) {
  507. // if ($(e.target).closest('#mui-content').length > 0) {
  508. // console.log('弹出框内部被点击了');
  509. // } else {
  510. // console.log('弹出框以外的部分被点击了');
  511. // 关闭弹框
  512. actAllDialog(false)
  513. // }
  514. });
  515. //点击字体事件
  516. $(".btn_Aa").click(function() {
  517. if (Dom.font_Pop.css('display') == 'none') {
  518. // Dom.icon_Aa.css('border', '1px solid #FF7800');
  519. Dom.font_Pop.show();
  520. } else {
  521. Dom.icon_Aa.css('border', '');
  522. Dom.font_Pop.hide();
  523. }
  524. Dom.icon_mulu.css('border', '');
  525. Dom.mulu_Box.hide();
  526. Dom.mulu_Mask.hide();
  527. Dom.mulu_Cons.hide();
  528. });
  529. //滚动条事件
  530. Dom.win.scroll(function() {
  531. actAllDialog(false)
  532. // Dom.nav_top.hide();
  533. // Dom.nav_bottom.hide();
  534. // Dom.font_Pop.hide();
  535. // Dom.mulu_Box.hide();
  536. // Dom.mulu_Mask.hide();
  537. // Dom.mulu_Cons.hide();
  538. // Dom.icon_Aa.css('border', '');
  539. // Dom.icon_model.css('border', '');
  540. // Dom.icon_mulu.css('border', '');
  541. })
  542. //点击 大、小事件
  543. Dom.btn_Big.click(function() {
  544. if (InitFontSize >= 24) {
  545. return;
  546. }
  547. InitFontSize += 1;
  548. $("p").css('font-size', InitFontSize);
  549. $("h4").css('font-size', InitFontSize);
  550. Util.StorageSetter("font_size", InitFontSize);
  551. });
  552. Dom.btn_Small.click(function() {
  553. if (InitFontSize <= 16) {
  554. return;
  555. }
  556. InitFontSize -= 1;
  557. $("p").css('font-size', InitFontSize);
  558. $("h4").css('font-size', InitFontSize);
  559. Util.StorageSetter("font_size", InitFontSize);
  560. });
  561. //点击夜间&日间 切换模式
  562. Dom.icon_model.click((e) => {
  563. if ($(e.target).hasClass("icon-yejian")) {
  564. //日间模式转夜间模式
  565. Dom.icon_model.removeClass("icon-yejian").addClass("icon-rijian");
  566. Dom.icon_model.siblings().text("日间");
  567. bkCurrColor = '#283548';
  568. updateBgColor($("#hl").find(".bk-container"))
  569. } else {
  570. //夜间模式转日间模式
  571. Dom.icon_model.removeClass("icon-rijian").addClass("icon-yejian");
  572. Dom.icon_model.siblings().text("夜间");
  573. bkCurrColor = Util.StorageGetter("bkHistory");
  574. model = Util.StorageGetter("model") || "zz";
  575. updateBgColor($("#" + model).find(".bk-container"))
  576. }
  577. });
  578. //点击背景颜色切换
  579. Dom.bkList.on("click", function(e) {
  580. if (!$(e.target).hasClass("bk-container")) {
  581. return
  582. }
  583. bkCurrColor = $(e.target)[0].style.backgroundColor;
  584. updateBgColor($(e.target), "bgCheck")
  585. })
  586. //
  587. var updateBgColor = function(target, type) {
  588. $(target).addClass("bk-container-current");
  589. Dom.body.css('background-color', bkCurrColor);
  590. Dom.header.css('background-color', bkCurrColor);
  591. //更新日夜模式
  592. let model = $(target).parent(".bk-item")[0].id;
  593. if (model === 'hl') {
  594. //记录夜间模式前的背景颜色和模式
  595. Util.StorageSetter("bkHistory", Util.StorageGetter("bkgroundcolor") || "#e9dfc7");
  596. if (type === "bgCheck") {
  597. //点击的背景颜色选择,需要更新模式 转为日间显示
  598. Dom.icon_model.removeClass("icon-yejian").addClass("icon-rijian");
  599. Dom.icon_model.siblings().text("日间");
  600. }
  601. } else {
  602. Util.StorageSetter("model", model);
  603. if (type === "bgCheck") {
  604. //点击的背景颜色选择,需要更新模式 转为夜间显示
  605. Dom.icon_model.removeClass("icon-rijian").addClass("icon-yejian");
  606. Dom.icon_model.siblings().text("夜间");
  607. }
  608. }
  609. let optDom = $(target).parent(".bk-item").siblings();
  610. $(optDom).each((i, liDom) => {
  611. $($(liDom).find(".bk-container")).removeClass("bk-container-current")
  612. })
  613. Util.StorageSetter("bkgroundcolor", bkCurrColor);
  614. }
  615. $("#btn_prev").click(function() {
  616. window.scrollTo(0,0);
  617. readerm.prveChapter();
  618. });
  619. $("#btn_next").click(function() {
  620. window.scrollTo(0,0);
  621. readerm.nextChapter();
  622. });
  623. }
  624. //整体弹窗 展示控制
  625. function actAllDialog(flag) {
  626. actLightDialog(flag);
  627. actFontDialog(flag);
  628. actMuluDialog(flag);
  629. actExtraDialog(flag);
  630. }
  631. //光亮设置 展示控制
  632. function actLightDialog(flag) {
  633. //展示
  634. if (flag) {
  635. return
  636. }
  637. //隐藏
  638. Dom.icon_model.css('border', '');
  639. }
  640. //字体设置 展示控制
  641. function actFontDialog(flag) {
  642. //展示
  643. if (flag) {
  644. return
  645. }
  646. //隐藏
  647. Dom.font_Pop.hide();
  648. Dom.icon_Aa.css('border', '');
  649. }
  650. //目录设置 展示控制
  651. function actMuluDialog(flag) {
  652. //展示
  653. if (flag) {
  654. return
  655. }
  656. //隐藏
  657. Dom.mulu_Box.hide();
  658. Dom.mulu_Mask.hide();
  659. Dom.mulu_Cons.hide();
  660. Dom.icon_mulu.css('border', '');
  661. }
  662. //其他设置 展示控制
  663. function actExtraDialog(flag) {
  664. //展示
  665. if (flag) {
  666. Dom.nav_top.show();
  667. Dom.nav_bottom.show();
  668. return
  669. }
  670. //隐藏
  671. Dom.nav_top.hide();
  672. Dom.nav_bottom.hide();
  673. }
  674. //给当前选中章节高亮,去掉其他
  675. function muluUpdateActive() {
  676. $(".parentLi").each((i, liDom) => {
  677. $($(liDom).find("a")).each((i, aNode) => {
  678. if ($(aNode).data('fid') == File_id) {
  679. $(liDom).addClass("mui-active")
  680. } else {
  681. $(liDom).removeClass("mui-active")
  682. }
  683. if ($(aNode).data('cid') == Chapter_id) {
  684. $(aNode).addClass("highChapter")
  685. } else {
  686. $(aNode).removeClass("highChapter")
  687. }
  688. })
  689. })
  690. }
  691. </script>
  692. </body>
  693. </html>