慕课网实战项目《WebAPP书城整站开发》笔记六：字体面板中“背景”切换的交互开发

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

效果图

          

任务分解描述

1. 本效果需要实现的是图中点击字体按钮后弹出一个可以设置字体颜色和大小的面板；
2. 点击面板上的‘大’和‘小’可以设置字体的大小（已完成）；
3. 点击面板上的颜色圆圈可以切换阅读器的背景颜色；
4. 要求在刷新页面时，能保留设置状态；
5. 使用js技术事件绑定、localstorage保持和记录字体状态。

实现细节

html

    <!--内容区-->
    <div class="container" id="root">

        <!--字体背景设置区-->
        <div class="nav-pannel-bk font-container" id="font-container" style="display:none"></div>
        <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 class="child-mod" id="bk-container">
                <span>背景</span>
            </div>
        </div>

        <!--BOTTOM区-->
        <div class="bottom-nav-bk bottom_nav" style="display:none"></div>
        <div class="bottom-nav bottom_nav" style="display:none">
            <div class="item menu-button" id<