网页换肤的基本原理

使用 JS 切换对应的 CSS 样式表。例如hao123首页的右上方就有网页换肤功能。除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项。

基本流程如下:

上面是使用流程图来描述下,自从工作以来很小画这样的流程图 如果流程图画错了或者画的不够好 请大家原谅!

先来看看效果图吧!

我只是做个demo 来实现这样一个效果!假如页面上一进来的时候 有这么四个按钮 分别代表不同的样式 当我鼠标点击不同的按钮时候 切换不同的css文件 且切换时候记录cookie里面去,当我们刷新页面或者关闭网页 重新打开 由于cookie的存在 所以还是关闭前的css样式 这样就实现了简单的网页换肤功能效果 基本的原理就是这些!

了解cookie及HTML5中sessionStorage和localStorage

首先我们来了解下cookie是干什么用的?简单讲 cookie作用是客户端存储数据。也就是本地存储。具体的了解可以看我之前的一篇关于cookie的博客。深入了解cookie

讲到cookie,我们再来简单的来了解下HTML5中新增了2个本地存储sessionStorage和localStorage. sessionStorage、 localStorage、cookie都是在浏览器端存储的数据,   其中sessionStorage的概念很特别,引入了一个“浏览器窗口”的概念。 sessionStorage是在同源的同窗口(或tab)中,始终存在的数据。也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面, 数据仍然存在。 关闭窗口后,sessionStorage即被销毁。同时“独立”打开的不同窗口,即使是同一页面,sessionStorage对象也是不同的。

Web

Storage

带来的好处:
减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少

数据在浏览器和服务器间不必要地来回传递。
快速显示数据:性能好,从本地读数据比通过网络从服务器获得数据快得多,本地数据可以即时获得。再加上网页本身也可以有缓存,因此整个页面和数据都在本地的话,可以立即显示。

临时存储:很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用

sessionStorage非常方便。

cookie sessionStorage及localStorage共同点及区别是什么?

共同点:

都是在浏览器端存储的数据,且同源的。

区别:

1. 存储大小不一样: cookie存储数据有限制 做多只能是4KB 而sessionStorage和localStorage可以存储5MB 甚至更多数据。

2. cookie 数据始终在同源的http请求中携带,即cookie在浏览器和服务器间来回传递。而sessionStorage和 localStorage不会自动把数据发给服务器,仅在本地保存。

3. 数据有效期不同: sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持; localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据; cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

4. 作用域不同, sessionStorage 不在 不同的浏览器窗口中共享,即使是同一个页面; localStorage 在所有同源窗口中都是共享的;cookie也是在 所有同源窗口中都是共享的。

使用cookie碰到那些问题?

首先来讲讲我在本地做demo 因为没有放到任何服务器下面 所以我直接放在桌面上 点击页面打开,突然发现 "谷歌游览器不支持cookie在本地存储"。所以针对这个问题在谷歌游览器下没有用cookie存储,而是用了上面介绍的HTML5中的localStorage作本地存储功能。通过setItem 设置key名 然后通过getItem获取key名 进而获取值。

HTML代码如下:

<p>前端开发是我的一个职业目标,我喜欢前端开发,热爱前端开发,喜欢制作各种各样的页面效果</p>
<input type="button" data-value="default" class="targetElem" value="default"/>
<input type="button" data-value="green" class="targetElem" value="green"/>
<input type="button" data-value="red" class="targetElem" value="red"/>
<input type="button" data-value="orange" class="targetElem" value="orange"/>

CSS代码

default.css 代码如下:

@charset "utf-8";
/* CSS Document */
*{padding:;margin:;}
h2{color:#00C;}
p{color:#006;}

orange.css代码如下:

@charset "utf-8";
/* CSS Document */
*{padding:;margin:;}
h2{color:#C60;}
p{color:#C33;}

green.css代码如下:

@charset "utf-8";
/* CSS Document */
*{padding:;margin:;}
h2{color:#060;}
p{color:#060;}

red.css代码如下:

@charset "utf-8";
/* CSS Document */
*{padding:;margin:;}
h2{color:#F00;}
p{color:#F00;}

JS代码如下:

/**
* JS实现换肤功能
*/
// Google Chrome只支持在线网站的cookie的读写操作,对本地html的cookie操作是禁止的。
// name1=value1;name2=value2;name3=value3;name4=value4
function Skin(options) { this.config = {
targetElem : '.targetElem',
link : '#link'
};
this.cache = {
defaultList : ['default','green','red','orange']
}; this.init(options);
} Skin.prototype = { constructor: Skin,
init: function(options) {
this.config = $.extend(this.config,options || {});
var self = this,
_config = self.config; $(_config.targetElem).each(function(index,item) { $(item).unbind('click');
$(item).bind('click',function(){
var attr = $(this).attr('data-value');
self._doSthing(attr);
});
});
// 判断是否是谷歌游览器 谷歌游览器因为不支持cookie在本地上存储 所以引入了HTML5
if(window.navigator.userAgent.indexOf("Chrome") !== -1) {
var tempCookeie = self._loadStorage("skinName"),
t;
if(tempCookeie != "null") {
t = tempCookeie;
}else {
t = 'default';
}
self._setSkin(t); }else {
var tempCookeie = self._getCookie("skinName");
self._setSkin(tempCookeie);
} },
/*
* 进行判断 来设置css样式
*/
_doSthing: function(attr) {
var self = this,
_config = self.config,
_cache = self.cache;
if(window.navigator.userAgent.indexOf("Chrome") !== -1) {
self._doStorage(attr);
var istrue = localStorage.getItem(attr);
self._setSkin(attr);
}else {
var istrue = self._getCookie(attr);
if(istrue) {
for(var i = 0; i < _cache.defaultList.length; i++) {
if(istrue == _cache.defaultList[i]) {
self._setSkin(_cache.defaultList[i]);
}
}
}
} },
/*
* 改变样式
*/
_setSkin: function(skinValue){ var self = this,
_config = self.config; if(skinValue) {
$(_config.link).attr('href',"style/"+skinValue+".css");
}
if(window.navigator.userAgent.indexOf("Chrome") !== -1) {
self._saveStorage(skinValue);
}else {
self._setCookie("skinName",skinValue,7);
} },
/*
* 重新
*/
_doStorage: function(attr) {
var self = this;
self._saveStorage(attr);
},
/*
* html5获取本地存储
*/
_loadStorage: function(attr) {
var str = localStorage.getItem(attr);
return str;
},
/*
* HTML5本地存储
*/
_saveStorage:function(skinValue) {
var self = this;
localStorage.setItem("skinName",skinValue);
},
/*
* getCookie
*/
_getCookie: function(name) {
var self = this,
_config = self.config;
var arr = document.cookie.split("; ");
for(var i = 0; i < arr.length; i+=1) {
var prefix = arr[i].split('=');
if(prefix[0] == name) {
return prefix[1];
}
}
return name;
},
/*
* _setCookie
*/
_setCookie: function(name,value,days) {
var self = this; if (days){
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}else {
var expires = "";
}
document.cookie = name+"="+value+expires+"; path=/";
},
/*
* removeCookie
*/
_removeCookie: function(name) {
var self = this; //调用_setCookie()函数,设置为1天过期,计算机自动删除过期cookie
self._setCookie(name,1,1);
}
}; // 初始化
$(function(){
new Skin({});
});

DEMO下载

JS实现网页换肤功能效果的更多相关文章

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

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

  2. 基于js的网页换肤(不需要刷新整个页面,只需替换css文件)

    1. [代码][JS]代码    <HTML><HEAD><link ID="skin" rel="stylesheet" typ ...

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

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

  4. js网页换肤

    使网页背景颜色可选黄/粉 <html> <head> <meta charset="utf-8"> <meta name="ge ...

  5. 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

    一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...

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

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

  7. Android 换肤功能的实现(Apk插件方式)

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

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

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

  9. Android QMUI实战:实现APP换肤功能,并自动适配手机深色模式

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

随机推荐

  1. Maven构建的Spring项目需要哪些依赖?

    Maven构建的Spring项目需要哪些依赖? <!-- Spring依赖 --> <!-- 1.Spring核心依赖 --> <dependency> <g ...

  2. 简单的redis缓存操作(get、put)

    简单的redis缓存操作(get.put) 本文介绍简单的redis缓存操作,包括引入jedisjar包.配置redis.RedisDao需要的一些工具.向redis中放数据(put).从redis中 ...

  3. BZOJ4827: [Hnoi2017]礼物(FFT 二次函数)

    题意 题目链接 Sol 越来越菜了..裸的FFT写了1h.. 思路比较简单,直接把 \(\sum (x_i - y_i + c)^2\) 拆开 发现能提出一坨东西,然后与c有关的部分是关于C的二次函数 ...

  4. h5新增加的存储方法

    h4中使用的cookie把用户信息保存在客户端浏览器,但是它受到很多限制. 大小:最多能存储4k 带宽:它是随着http请求一起发送到服务器的,因此浪费一部分的带宽. 复杂度:操作复杂. h5新增加了 ...

  5. JavaScript数字转字符串,字符串转数字

    //--------------------字符串转数字--------------------------- var s = "234"; //1.纯数字转换 //1 字符串在运 ...

  6. selenium 校验文件下载成功

    转自: http://www.seleniumeasy.com/selenium-tutorials/verify-file-after-downloading-using-webdriver-jav ...

  7. win10 安装microsoft.net framework3.5

    转载于:https://www.windows10.pro/win10-net-framework-3-5/ 之前手残不小心把microsoft.net framework3.5删了,结果导致Sql ...

  8. 在 Azure 中的 Windows 虚拟机上使用 SSL 证书保护 IIS Web 服务器

    若要保护 Web 服务器,可以使用安全套接字层 (SSL) 证书来加密 Web 流量. 这些 SSL 证书可存储在 Azure Key Vault 中,并可安全部署到 Azure 中的 Windows ...

  9. Oracle EBS GL 总账日记账打开报错此职责无可用函数

    系统管理员下,跑请求:

  10. 类Unix上5个最佳开源备份工具 Bacula/Amanda/Backupninja/Backuppc/UrBackup

    当为一个企业选择备份工具的时候,你都考虑什么呢? 确定你正在部署的软件具有下面的特性 开源软件 – 你务必要选择那些源码可以免费获得,并且可以修改的软件.确信可以恢复你的数据,即使是软件供应商/项目停 ...