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

Javascript
JavaScript 语言精粹学习笔记
有关div页面拖动、缩放、关闭、遮罩效果代码
JQuery this 和 $(this) 的区别
JS 时间显示效果代码
jquery 表单进行客户端验证demo
JS 获取span标签中的值的代码 支持ie与firefox
JavaScript 获取用户客户端操作系统版本
可以读取EXCEL文件的js代码
JS去除字符串的空格增强版(可以去除中间的空格)
监控用户是否关闭浏览器的js代码
javascript 继承实现方法
JSON 入门指南 想了解json的朋友可以看下
javascript 函数调用规则
动态表格Table类的实现
JSON 客户端和服务器端的格式转换
jQuery ui1.7 dialog只能弹出一次问题
javascript 遍历验证所有文本框的值
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
javascript 简练的几个函数
csdn 博客中实现运行代码功能实现

No. « 154 155 156 157 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-10   浏览: 328 ::
收藏到网摘: 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方法。