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简化Ajax开发 Ajax开发入门
Oct 14 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
Vue实现按钮级权限方案
Nov 21 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
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
php基础教程
2015/08/26 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
go语言计算两个时间的时间差方法
2015/03/13 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
pytorch 预训练层的使用方法
2019/08/20 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
Java如何读取CLOB字段
2013/10/10 面试题
Delphi CS笔试题
2014/01/04 面试题
咖啡蛋糕店创业计划书
2014/01/28 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书