h5开发页面逻辑
一、页面展示 http://192.168.3.3:8080/dist/view/index.html
1、简单编写了一个阅读器的模式
2、h5+css3+base64(字体图形)
3、页面逻辑commonjs+webpack
【】用localStorage获取和存储本地信息,每次刷新页面后,记录上次浏览后的历史信息。
//用localStorage保存设置信息方法 exports.Util = (function() { var prefix = 'ficiton_reader_'; var StorageGetter = function(key) { return localStorage.getItem(prefix + key); }; var StorageSetter = 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'); var templatecontainer = 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的页面效果。)
posted on 2017-08-07 00:11 fayerSmile 阅读(2138) 评论(0) 编辑 收藏 举报