一、頁面展示 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的頁面效果。）