当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript+css 网页每次加载不同样式的实现方法

Javascript
jQuery开发者都需要知道的5个小技巧
Extjs学习笔记之六 面版
Javascript 中的类和闭包
IE6下JS动态设置图片src地址问题
Extjs学习笔记之七 布局
Extjs学习笔记之八 继承和事件基础
Extjs TriggerField在弹出窗口显示不出问题的解决方法
JavaScript中的集合及效率
利用js获取服务器时间的两个简单方法
在html页面上拖放移动标签
了解jQuery技巧来提高你的代码
JavaScript 页面坐标相关知识整理
Javascript UrlDecode函数代码
JQuery 遮罩层实现(mask)实现代码
jQuery 页面 Mask实现代码
Javascript的构造函数和constructor属性
js或css文件后面跟参数的原因说明
将CKfinder整合进CKEditor3.0的新方法
jQuery UI-Draggable 参数集合
jQuery 行级解析读取XML文件（附源码）

No. « 259 260 261 262 »

技术文章搜索

关键字

Javascript 中的 javascript+css 网页每次加载不同样式的实现方法

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-10   浏览: 53 ::
收藏到网摘: n/a

用户每次访问时随机载入样式，让微博在视觉上保持新鲜感。虽然思路与实现都比较简单，但还是想记录下来，与大家分享。 【明确需求】
网页加载样式表default.css，会展现默认风格。同时为实现多种风格，制作了skin1.css，skin2.css，skin3.css三种定制样式。如果在加载default.css后，再加载其中某一样式表，则会覆盖默认风格，展示新风格；
每次随机加载skin1.css、skin2.css、skin3.css，或者使用默认风格。需要注意的一点是，随机加载也有可能使这一次和上一次的样式相同。
【实现思路】
使用document.write动态向<head />中写入css载入语句；
通过生成的随机数，随机加载样式表；
使用cookie机制记录当前风格，确保下次下次风格与当前风格一定不同。
【实现代码】
比较简单，我这里就直接贴代码了，里面略加注释：
复制代码 代码如下:

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" />');
}
}
}
Init.loadCSS(); //执行随机加载CSS方法

将上面js代码保存为Init.js文件，并在<head />中加载该js文件。
使用提示： 如果你的网页中已经使用了jquery，那么可以用我之前介绍的jQuery cookie操作插件实现cookie的读写操作，不必再定义代码中的setCookie和getCookie方法。