网页随机换肤

我在上一篇《网页换肤, 基于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 Demo 1

 

使用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();
});

 

jQuery Demo 2

 

到此结束。

站点统计