zoukankan      html  css  js  c++  java
  • cookie换肤功能

    <div class="selectSkin">
    <input id="red" class="themeBtn" type="button" value="红色">
    <input id="yellow" class="themeBtn" type="button" value="黄色">
    <input id="green" class="themeBtn" type="button" value="绿色">
    </div>
    <div class="content">cookie换肤功能</div>
    <style scoped>
    .content {
    height: 300px;
    300px;
    margin-top: 20px;
    color: #fff;
    text-align: center;
    }

    .themeBtn {
    background: #f5f5f5;
    padding: 5px;
    border: 1px solid #aaa4a4;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }
    </style>

    function saveCookie(name, value) { //存储cookies
    var Days = 1; //此 cookie 将被保存 1 天
    var exp = new Date(); //new Date
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path=/";
    }

    function getCookie(name) { //读取cookies函数
    var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
    if (arr != null) return unescape(arr[2]); return null;
    }

    changeThemes();
    function changeThemes() { //换肤
    var stylesheet = document.getElementById('themeFile');
    $(".selectSkin").find("input").click(function () {
    var Id = $(this).attr('id'); //找到input的ID
    $(".content").css({ "background-color": Id });
    saveCookie("Id", Id); //将点击事件存放在浏览器的cookie记录里
    });
    var themeId = getCookie('Id');//读取cookies记录
    if (themeId != null) { //判断cookies记录是否存在
    $(".content").css({ "background-color": themeId }); //若存在就选择用户点击的主题
    } else {
    $(".content").css({ "background-color": "red" }); //不存在就默认为红色
    }
    }

  • 相关阅读:
    08.django之中间件
    07.django之Ajax
    05-Informatica_schema获取元数据
    04-数据库连接启动流程mysql初始化配置文件配置多实例初始化配置文件使用
    javascript设计模式-(八)
    javascript设计模式-(七)
    javascript设计模式-(六)
    javascript设计模式-(五)
    javascript设计模式-(四)
    javascript设计模式-(三)
  • 原文地址:https://www.cnblogs.com/luoguixin/p/9166826.html
Copyright © 2011-2022 走看看