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


Posted in Javascript onDecember 27, 2009

【明确需求】
网页加载样式表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方法。

Javascript 相关文章推荐
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
js获取域名的方法
Jan 27 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 #Javascript
jQuery中的常用事件总结
Dec 27 #Javascript
jQuery 动态酷效果实现总结
Dec 27 #Javascript
javascript 清空form表单中某种元素的值
Dec 26 #Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 #Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 #Javascript
jQuery 常见开发使用技巧总结
Dec 26 #Javascript
You might like
人大复印资料处理程序_输入篇
2006/10/09 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
Node.js中的cluster模块深入解读
2018/06/11 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
express.js中间件说明详解
2019/03/19 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
深入理解Javascript中的this关键字
2015/03/27 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
python3.x上post发送json数据
2018/03/04 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
临床医学大学生求职信
2013/09/28 职场文书
车间班长岗位职责
2013/11/30 职场文书
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
学前班学生评语
2014/12/29 职场文书
节水倡议书
2015/01/19 职场文书
财务工作失误检讨书
2015/02/19 职场文书