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

最新推荐文章于 2018-12-21 07:50:55 发布

「已注销」

最新推荐文章于 2018-12-21 07:50:55 发布

阅读量1.4k

点赞数 1

分类专栏： Web开发文章标签： HTML5-存储

本文链接：https://blog.csdn.net/Lovejulyer/article/details/72593790

版权

Web开发专栏收录该内容

50 篇文章 1 订阅

订阅专栏

推荐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); });
        }
    })();