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" }); //不存在就默认为红色
    }
    }

  • 相关阅读:
    HDFS文件操作(基本文件命令)
    <a> 标签
    css text-overflow
    zepto.js 打包自定义模块
    CSS3 box-sizing
    CSS3 Filter
    JQ 导出 Excel
    outline css2
    iphone 操作手势种类
    动手写一个简单的Web框架(模板渲染)
  • 原文地址:https://www.cnblogs.com/luoguixin/p/9166826.html
Copyright © 2011-2022 走看看