<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery换肤+cookie记忆功能</title>
    <link rel="stylesheet" href="../css/style.css" media="screen" />
    <link rel="stylesheet" href="../css/reset.css" media="screen" />
    <link rel="stylesheet" href="../css/green.css" media="screen" name="skin" />
    
    <script src="../jquery-1.10.2.min.js"></script>
    <script src="../jquery.cookie.js"></script>
</head>
<body>
    <div id="wrapper">
        <h1>jQuery Playground</h1>
        <div id="stylechange" class="clear">
            <ul>
                <li><a href="javascript:void(0)" class="green"></a></li>
                <li><a href="javascript:void(0)" class="blue"></a></li>
            </ul>
        </div>
        <ul id="nav">
            <li><a href="index.html" class="current">测试</a></li>
            <li><a href="#">关于</a></li>
        </ul>
        <div id="content">
            <h2>WelCome!</h2>
            <p>Hello，everyone.I will share some useful tips of jQuery here.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
        <div id="footer">Powered By Dennis Ji.</div>
    </div>
</body>
<script>
    $(function(){

var favstyle = readCookie('style');//style是cookie的名字
        console.log(favstyle);//../css/green.css上次定义的绿色或蓝色皮肤在这里得到了输出
        if(favstyle){
            $("link[name='skin']").attr({href:favstyle});
        }
        //绿色主题
        $(".green").click(function(){
            $("link[name='skin']").attr({href:"../css/green.css"});
            createCookie('style',"../css/green.css",365);
        });
        //蓝色主题
        $(".blue").click(function(){
            $("link[name='skin']").attr({href:"../css/blue.css"});
            createCookie('style',"../css/blue.css",365);
        });

//下面是jQuery版本(注意：要写在$(function(){})里面)的的创建、读取、删除cookie
        function createCookie(name,value,days){
            var expires;
            if (days) {
                expires = days;
            } else{
                expires = "";
            }
            $.cookie(name,value,{expires:expires,path:'/'});
        }
        function readCookie(name){
            var styles = $.cookie(name);//jQuery的cookie只用这样写就能读出cookie的值了
            return styles;
        }
        function delCookie(name){
             $.cookie(name,null)
        }
        //注：本地cookie的读取要用localhost才能读取，普通的无服务器的文件路径是读取不到的
    });

</script>
</html>

cookie记忆换肤功能实战Demo的更多相关文章

  1. 用js来实现页面的换肤功能(带cookie记忆)

    用js来实现页面的换肤功能 js实现换肤功能的实现主要是通过利用js控制CSS来实现的.大致的实现原理是这样的, 1.先定义一个页面基本样式style.css来确定div的宽高等属性,使得整个页面的D ...

  2. cookie换肤功能

    <div class="selectSkin"> <input id="red" class="themeBtn" typ ...

  3. Android QMUI实战：实现APP换肤功能，并自动适配手机深色模式

    Android换肤功能已不是什么新鲜事了,市面上有很多第三方的换肤库和实现方案. 之所以选择腾讯的QMUI库来演示APP的换肤功能,主要原因: 1.换肤功能的实现过程较简单.容易理解: 2.能轻松适配 ...

  4. JS实现网页换肤功能效果

    网页换肤的基本原理 使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过 ...

  5. 【转】Javascript+css 实现网页换肤功能

    来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作 ...

  6. Android 换肤功能的实现（Apk插件方式）

    一.概述 由于Android 没有提供一套统一的换肤机制,我猜可能是因为国外更注重功能和体验的原因 所以国内如果要做一个漂亮的换肤方案,需要自己去实现. 目前换肤的方法大概有三种方案: (1)把皮肤资 ...

  7. 基于webpack4+vue-cli3项目的换肤功能

    起因 最近因公司需求,需要实现主题换肤功能,不仅仅是颜色的更改,还需要包括图片,字体等文件等更换,因此在百度里各种实现方案后,决定根据scss+style-loader/useable做换肤. 项目开 ...

  8. 使用 css/less 动态更换主题色（换肤功能）

    前言 说起换肤功能,前端肯定不陌生,其实就是颜色值的更换,实现方式有很多,也各有优缺点 一.看需求是什么 一般来说换肤的需求分为两种: 1. 一种是几种可供选择的颜色/主题样式,进行选择切换,这种可供 ...

  9. 一种简单的实现：Android一键换肤功能

    现在的APP开发,通常会提供APP的换肤功能,网上流传的换肤代码和实现手段过于复杂,我把原作者的代码重新整理抽取出来,转换成Eclipse项目,重新整理成正确.可直接运行的项目. 代码运行结果如图. ...

随机推荐

  1. android 画图之setXfermode .

    setXfermode 设置两张图片相交时的模式 我们知道 在正常的情况下,在已有的图像上绘图将会在其上面添加一层新的形状. 如果新的Paint是完全不透明的,那么它将完全遮挡住下面的Paint: 而 ...

  2. ubuntu14.04英文环境下安装中文输入法

    ubuntu14.04英文环境下安装中文输入法 发表于1年前(2014-07-12 20:12)   阅读(4478) | 评论(0) 3人收藏此文章, 我要收藏 赞1 9月19日成都 OSC 源创会 ...

  3. linux下提示bash:command not found

    新安装的linux系统,如果进行精简安装可能会出现bash:command not found 的提示,大家在安装的时候可以选择默认安装basic的组件,一般即可.到时候可以再升级.   如果新装的系 ...

  4. USACO 1.3.2

    题目链接:USACO 1.3.2 这道题有点小坑,不是算法错了,而是文件名,是barn1不是barnl,恕我眼拙,找了十五分钟... 肯定是木板的个数用的越多越好,这样可以减少空隙. 简单的贪心,将每 ...

  5. opencv----(1) mat最好用，和IplImage,cvmat 比较

    学习了几天,发现mat比IplImage,cvmat 好用太多了. 不知道确切的原文出处,我是转自新浪的一篇博文:http://blog.sina.com.cn/s/blog_534497fd0101 ...

  6. unity3d之在屏幕上画线

    如何在屏幕上画线,简单的代码如下: using UnityEngine; public class Test : MonoBehaviour { void OnGUI() { GL.LoadOrtho ...

  7. 一个UWSGI的例子

    摘要:uwsgi执行顺序:启动master进程,执行python脚本的公共代码(import同一层).然后生成worker进程,uwsgi.post_fork_hook=init_functions, ...

  8. compass scss blueprint

    [转载] 今天在执行compass create my-grid –using blueprint 命令时发现报错 google了一下,说是新版compass已经不包括compass-bluprint ...

  9. SQL truncate 、delete与drop区别

    SQL truncate .delete与drop区别 相同点: 1.truncate和不带where子句的delete.以及drop都会删除表内的数据. 2.drop.truncate都是DDL语句 ...

  10. OPENCV之GFTT特征点检测

    之前角点检测的时候提到过角点检测的算法,第一个是cornerHarris计算角点,但是这种角点检测算法容易出现聚簇现象以及角点信息有丢失和位置偏移现象,所以后面又提出一种名为 shi_tomasi的角 ...