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 相关文章推荐
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
用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
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
python语言使用技巧分享
2016/05/31 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
python小白学习包管理器pip安装
2020/06/09 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
医院护士的求职信范文
2013/12/26 职场文书
技校毕业生的自我评价
2013/12/27 职场文书
公司道歉信范文
2014/01/09 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
工程售后服务承诺书
2014/05/21 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
收款委托书
2014/10/14 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
Java数据结构之堆(优先队列)
2022/05/20 Java/Android