h5開發頁面邏輯
阿新 • • 發佈：2017-08-07
roo 獲取 bpa png common commonj temp 夜間模式 compile
一、頁面展示 http://192.168.3.3:8080/dist/view/index.html
1、簡單編寫了一個閱讀器的模式
2、h5+css3+base64(字體圖形)
3、頁面邏輯commonjs+webpack
//用localStorage保存設置信息方法 exports.Util = (function() { var prefix = ‘ficiton_reader_‘; var StorageGetter = function(key) { return localStorage.getItem(prefix + key); }; varStorageSetter = function(key, val) { return localStorage.setItem(prefix + key, val); }; return { StorageGetter : StorageGetter, StorageSetter : StorageSetter } })();
require(‘./read.css‘); var _Util = require(‘util/util.js‘); var hogan = require(‘hogan.js‘); vartemplatecontainer = require(‘./head.string‘); var read = { data :{ list:[ {"data_color":"#f7eee5","bgcolor":"#f7eee5","font_color":"#000"}, {"data_color":"#e9dfc7","bgcolor":"#e9dfc7","font_color":"#000"}, {"data_color":"#a4a4a4","bgcolor":"#a4a4a4","font_color":"#000"}, {"data_color":"#cdefce","bgcolor":"#cdefce","font_color":"#000"}, {"data_color":"#283548","bgcolor":"#283548","font_color":"#7685a2"}, {"data_color":"#0f1410","bgcolor":"#0f1410","font_color":"#4e534f"} ] }, init : function(){ this.renderColor(); this.bindEvent(); }, bindEvent : function(){ var _this = this; //緩存dom節點 var Dom = { $nightbutton : $(‘#night-button‘),//夜間模式按鈕 $topNav : $(‘#top-nav‘),//頭部 $bottomNav : $(‘.bottom_nav‘),//底部 $fontButton : $(‘#font-button‘),//字體大小選擇按鈕 $fontContainer : $(‘.font-container‘),//字體容器 $bkContainer : $(‘#bk-container‘),//背景選擇按鈕 $bodycontainer : $(‘.container‘), $Rootcontainer : $(‘#fiction_container‘),//文章內容區域 win : $(window) }; var InitFontSize;//字體大小 var NightMode = false; //是否是夜間模式 // //屏幕中央事件 $(‘#action_mid‘).click(function(){ if(Dom.$topNav.hasClass(‘hide‘)){ showEvent(); }else{ hideEvent(); } }); //對屏幕的滾動監控 Dom.win.scroll(function(){ hideEvent(); }) var hideEvent = function(){ Dom.$topNav.addClass(‘hide‘); Dom.$bottomNav.hide(); Dom.$fontContainer.hide(); Dom.$fontButton.removeClass(‘current‘); }; var showEvent = function(){ Dom.$topNav.removeClass(‘hide‘); Dom.$bottomNav.show(); } //點擊字體按鈕，顯示隱藏字體容器 Dom.$fontButton.click(function(){ if(Dom.$fontContainer.css(‘display‘) == ‘none‘){ Dom.$fontContainer.show(); Dom.$fontButton.addClass(‘current‘); }else{ Dom.$fontContainer.hide(); Dom.$fontButton.removeClass(‘current‘); } }) //點擊屏幕，隱藏字體容器 Dom.$Rootcontainer.click(function(){ Dom.$fontContainer.hide(); Dom.$fontButton.removeClass(‘current‘); }); /**************字體-大小樣式************/ //獲取字體設置信息 InitFontSize = _Util.Util.StorageGetter(‘font-size‘);//01)獲取localStorage裏font-size的值 InitFontSize = parseInt(InitFontSize); if(!InitFontSize){//02)如果字體信息不存在 InitFontSize = 16; //03)那就給InitFontSize設置一個初始值 } Dom.$Rootcontainer.css(‘font-size‘,InitFontSize)//04）設置容器字體大小； //字體放大 $(‘#large-font‘).click(function(){ if(InitFontSize >20){ return; } InitFontSize += 1; //localStorage裏緩存字體信息 _Util.Util.StorageSetter(‘font-size‘,InitFontSize); Dom.$Rootcontainer.css(‘font-size‘,InitFontSize); }); //字體縮小 $(‘#small-font‘).click(function(){ if(InitFontSize <12){ return; } InitFontSize -= 1; _Util.Util.StorageSetter(‘font-size‘,InitFontSize); Dom.$Rootcontainer.css(‘font-size‘,InitFontSize); }); /**************字體-背景樣式************/ //獲取本地背景信息 var body_color = _Util.Util.StorageGetter(‘background_color‘); var font_color = _Util.Util.StorageGetter(‘font_color‘); if (body_color) { $(‘body‘).css(‘background-color‘,body_color); } if (font_color) { Dom.$Rootcontainer.css(‘color‘,font_color); } //點擊背景按鈕 Dom.$bkContainer.on(‘click‘, ‘.bk-container‘, function(){ var body_color = $(this).data(‘color‘); var font_color = $(this).data(‘font-color‘); $(‘body‘).css(‘background-color‘,body_color); Dom.$Rootcontainer.css(‘color‘,font_color); //存儲本地背景信息 _Util.Util.StorageSetter(‘background_color‘,body_color); _Util.Util.StorageSetter(‘font_color‘,font_color); //選擇背景按鈕 $(this).find(‘div‘).addClass(‘current‘).parent(‘.bk-container‘) .siblings(‘‘).children().removeClass(‘current‘); //如果字體顏色為夜間模式 if($(this).data(‘color‘) == ‘#0f1410‘){ $(‘#day_icon‘).show(); $(‘#night_icon‘).hide(); //_this.selectColorStatus(body_color); }else{ $(‘#day_icon‘).hide(); $(‘#night_icon‘).show(); //_this.selectColorStatus(body_color); } }) //背景按鈕選中狀態 this.selectColorStatus(body_color); /******************夜間模式**************/ //點擊夜間模式 Dom.$nightbutton.click(function(){ if(NightMode){ //進入夜間模式 $(‘#day_icon‘).hide(); $(‘#night_icon‘).show(); switchMode("#e9dfc7",‘#000‘,false); // NightMode = false; }else{ //進入白天模式 $(‘#day_icon‘).show(); $(‘#night_icon‘).hide(); switchMode("#0f1410",‘4e534f‘,true); // NightMode = true; } }) //切換夜間模式 var switchMode = function(bgcolor,color,Boolean){ $(‘body‘).css(‘background-color‘,bgcolor); Dom.$Rootcontainer.css(‘color‘,color); _this.selectColorStatus(bgcolor); _Util.Util.StorageSetter(‘background_color‘,bgcolor); _Util.Util.StorageSetter(‘font_color‘,color); NightMode = Boolean; } }, //刷新頁面，選中狀態 selectColorStatus : function(bodycolor){ var body_color = bodycolor;//獲取localStorage裏背景顏色值; //添加背景按鈕選中狀態 for(var i = 0,iLength = this.data.list.length; i < iLength; i++){ //判斷本地背景顏色是否等於data裏的顏色 if(this.data.list[i].data_color === body_color){ //如果相等，給節點添加上current this.data.list[i].isActive = true; //去掉頁面其他按鈕的狀態 $(‘.bk-container‘).eq(i).find(‘div‘).addClass(‘current‘) .parent(‘.bk-container‘).siblings(‘‘).children().removeClass(‘current‘); } } //如果本地存儲的背景色是夜間模式的，則按鈕文字顯示“白天” if(body_color === ‘#e9dfc7‘){ $(‘#day_icon‘).hide(); $(‘#night_icon‘).show(); }else{ $(‘#day_icon‘).show(); $(‘#night_icon‘).hide(); } }, //渲染背景按鈕 renderColor : function(){ var _html = this.renderHtml(templatecontainer, this.data); $(‘#bk-container‘).html(_html); var $bg_container = $(‘.bk-container‘); for(var i = 0,iLength = this.data.list.length; i < iLength; i++){ $bg_container.eq(i).css(‘background-color‘,this.data.list[i].bgcolor); } }, // 渲染html模板 renderHtml : function(htmlTemplate, data){ var template = hogan.compile(htmlTemplate), result = template.render(data); return result; } } $(function(){ read.init(); })
在線項目：http://walking.komect.com/ 可以同時在pc和手機端顯示。（這個項目比較早，沒有用模塊化commonjs+webpack，頁面是通過jsrennder渲染的。這裏放這個項目的目的是展示h5的頁面效果。）
h5開發頁面邏輯