网页随机换肤 »
我在上一篇《网页换肤, 基于MooTools or jQuery 》文章中，通过一个完整的实例讲解了一下网页换肤的原理。即，通过调用不同的样式表文件来实现不同的皮肤切换，并且需要将换好的皮肤记入Cookie中，这样用户下次访问时，就可以显示用户自定义的 皮肤了。
在 CSS9.NET博客上，IIduce写了一篇关于随机加载样式的文章，他给自己的微博客制作多个样式，然后用户每次访问时随机载入样式。如果想了解更多请看IIduce写的《保持新鲜感：网页每次加载不同样式的实现方法》文章。
使用JavaScript实现的网页随机换肤
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | var Init = {
//样式表文件目录路径
baseSkinUrl : "/blog/css/skin/",
//样式表文件名称列表
styles : ["default", "skin1", "skin2", "skin3"],
//样式cookie的key值
cookieKey : "css9_blog_random_css",
//定义方法，获取min至max间的随机数，包含min及max
getRandomNum : function(min, max){
return min + Math.floor(Math.random() * (max - min + 1));
},
//定义方法，获取cookie值
getCookie : function(name) {
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null) {
return unescape(arr[2]);
}
return null;
},
//定义方法，设置cookie值
setCookie : function(sName,sValue,objHours,sPath,sDomain,bSecure){
var sCookie = sName + "=" + encodeURIComponent(sValue);
if (objHours) {
var date = new Date();
var ms = objHours * 3600 * 1000;
date.setTime(date.getTime() + ms);
sCookie += ";expires=" + date.toGMTString();
}
if (sPath) {
sCookie += ";path=" + sPath;
}
if (sDomain) {
sCookie += ";domain=" + sDomain;
}
if (bSecure) {
sCookie += ";secure";
}
document.cookie=sCookie;
},
//定义方法，通过获取随机数随机加载CSS
loadCSS : function(){
var length = this.styles.length,
random = this.getRandomNum(0, length-1),
cookieStyle = this.getCookie(this.cookieKey),
currentStyle = "default";
//如果当前随机取到的样式与cookie中样式相同，则重新计算随机数
while(this.styles[random] == cookieStyle)
{
random = this.getRandomNum(0, length-1)
}
currentStyle = this.styles[random];
//将新样式存入cookie，cookie有效时间为24小时
this.setCookie(this.cookieKey, currentStyle, 24, "/", "css9.net", false);
//若样式名称不为"default"默认样式，则向<head />标签中写入定制样式
if(currentStyle != "default")
{
document.write('<link rel="stylesheet" type="text/css"
href="' + this.baseSkinUrl + this.styles[random] + '.css" />');
}
}
}
//执行随机加载CSS方法
Init.loadCSS(); |
关于笔者写的Cookies操作方法，可以优化一下，我建议使用PPK写的Cookies操作方法。
一个比较通用的Cookies操作方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | /*以下操作Cookies的方法，来自PPK的文章http://www.quirksmode.org/js/cookies.html#script*/
//创建Cookie记录
function createCookie(name,value,days) {
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=/";
}
//读取Cookie记录
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
//清除Cookie记录
function eraseCookie(name) {
createCookie(name,"",-1);
} |
使用jQuery实现的网页随机换肤
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | //创建Cookie记录
function createCookie(name,value,days) {
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=/";
}
//读取Cookie记录
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
//清除Cookie记录
function eraseCookie(name) {
createCookie(name,"",-1);
}
function getRandomNum (min, max){
return min + Math.floor(Math.random() * (max - min + 1));
}
function randomCss(){
var styles = ["skin_0", "skin_1", "skin_2", "skin_3", "skin_4","skin_5"];
var random= getRandomNum(0, 5);
var cookie_skin = readCookie("CssSkin"),skinName="default";
while(styles[random] == cookie_skin)
{
random = getRandomNum(0, 5)
}
skinName =styles[random];
if(skinName != "default"){
$("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤
}
createCookie("CssSkin",skinName,10);
}
$(function(){
randomCss();
}); |
使用jQuery的cookie插件实现的网页随机换肤
首先引入jQuery的cookie插件：
1 | <script src="jquery.cookie.js" type="text/javascript"></script> |
具体代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | function getRandomNum (min, max){
return min + Math.floor(Math.random() * (max - min + 1));
}
function randomCss(){
var styles = ["skin_0", "skin_1", "skin_2", "skin_3", "skin_4","skin_5"];
var random= getRandomNum(0, 5);
var cookie_skin = $.cookie("CssSkin"),
skinName="default";
while(styles[random] == cookie_skin)
{
random = getRandomNum(0, 5);
}
skinName =styles[random];
if(skinName != "default"){
$("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤
}
$.cookie( "CssSkin" , skinName , { path: '/', expires: 10 });
}
$(function(){
randomCss();
}); |
到此结束。
