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

来源：互联网发布：网络加密技术编辑：程序博客网时间：2024/06/07 17:38

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

效果

这里写图片描述

阅读全文

0 0