推荐IMOOC实战课程:《WebApp书城整站开发》
字体大小设置交互及数据本地存储
html
<div class="nav-pannel font-container" id="font_container" style="display:none">
<div class="child-mod">
<span>字号</span>
<button id="large-font" class="spe-button">
大
</button>
<button id="small-font" class="spe-button" style="margin-left:10px">
小
</button>
</div>
</div>
javascript
(function(){
var Util = (function(){
var prefix = "html5_header_";
var StorageGetter = function(key){ return localStorage.getItem(prefix + key); };
var StorageSetter = function (key, value) { return localStorage.setItem(prefix + key, value) };
return { StorageGetter : StorageGetter, StorageSetter : StorageSetter }
})();
var RootContainer = $('#fiction_container');
// 初始化字体大小
var initFontSize = Util.StorageGetter('font_size') ;
initFontSize = parseInt(initFontSize);
if(!initFontSize){
initFontSize = 14;
}
RootContainer.css('font-size',initFontSize);
function EventHandler() {
// todo 交互的事件绑定
// 字体大小设置
$('#large-font').click(function(){ if(initFontSize > 20){ return; } initFontSize += 1; RootContainer.css('font-size',initFontSize); });
$('#small-font').click(function(){ if(initFontSize < 12 ){ return; } initFontSize -= 1; RootContainer.css('font-size',initFontSize); Util.StorageSetter('font_size',initFontSize); });
}
})();
效果