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

Javascript
jquery ajax提交表单数据的两种方式
js数字输入框(包括最大值最小值限制和四舍五入)
文本框的字数限制功能jquery插件
JavaScript让IE浏览器event对象符合W3C DOM标准
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
js版扫雷实现代码 原理不错
鼠标跟随的文字变动效果
JS 判断undefined的实现代码
Ext grid 添加右击菜单
javascript或asp实现的判断身份证号码是否正确两种验证方法
javascript 获取元素位置的快速方法 getBoundingClientRect()
javascript 面向对象继承
JavaScript 地震特效
jquery.ui.progressbar 中文文档
JS 拖动效果实现代码 比较简单
JS小框架 fly javascript framework
JS在IE和FF下attachEvent,addEventListener学习笔记
js 对联广告、漂浮广告封装类（IE,FF,Opera,Safari,Chrome
js 动态选中下拉框

No. « 241 242 243 244 »

技术文章搜索

关键字

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

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