慕课网实战项目《WebAPP书城整站开发》笔记五：字体大小设置交互开发

推荐IMOOC实战课程：《WebApp书城整站开发》

字体大小设置交互及数据本地存储

html

    <div class="nav-pannel font-container" id="font_container" style="display:none">  
        <div class="child-mod">
            字号
            id="large-font" class="spe-button">
                大
            
            id="small-font" class="spe-button" style="margin-left:10px">
                小
            
        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); });
        }
    })();  

效果