localStorage换肤简易版

来源：互联网发布：社区下单系统源码编辑：程序博客网时间：2024/05/22 03:42
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>    <style>        *{            margin: 0px;            padding: 0px;        }        .bigbox{            display: none;        }        .bigbox>div{            display: inline-block;            width: 50px;            height: 50px;            cursor: pointer;        }        .box1{            background: #f56868;        }        .box2{            background: #ff76bc;        }        .box3{            background: #f46217;        }        .box4{            background: #2fa36d;        }        #huanfu{            width:calc(100vw - 300px);            height: calc(100vh - 300px);            border: 1px solid #ff76bc;        }    </style></head><body><div id="huanfu"></div>    <button class="btn">点击显示</button>    <div class="bigbox">        <div class="box1"></div>        <div class="box2"></div>        <div class="box3"></div>        <div class="box4"></div>        <button class="abolish">取消</button>        <button class="confirm">确定</button>    </div></body><script>$(function () {//    显示隐藏换肤颜色    $(".btn").click(function () {        $(".bigbox").slideToggle();    })//获取localStorage的值，并设置颜色    $(document).ready(function () {        var cookBgco = localStorage.getItem("name");        $('#huanfu').removeClass().addClass(cookBgco);    })//点击换肤    $(".bigbox>div").click(function () {        var bgco = $(this).attr("class");        $('#huanfu').removeClass().addClass(bgco);    })//确定选择 存入浏览器localStorage    $(".confirm").click(function () {        var bgco = $('#huanfu').attr("class");        localStorage.setItem("name",bgco);        var cookBgco = localStorage.getItem("name");    })//取消选择 获取存入浏览器localStorage的值并取消    $(".abolish").click(function () {        var cookBgco = localStorage.getItem("name");        $('#huanfu').removeClass().addClass(cookBgco);    })})</script></html>
阅读全文
0 0
localStorage换肤 简易版

localStorage换肤简易版
