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 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
Javascript学习指南
Dec 01 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
vue-router源码之history类的浅析
May 21 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 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/06/06 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
js实现随机点名小功能
2017/08/17 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
Python下Fabric的简单部署方法
2015/07/14 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
基本款天堂:Everlane
2017/05/13 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
党员创先争优承诺书
2014/03/26 职场文书
给市场的环保建议书
2014/05/14 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
新员工入职欢迎词
2015/01/23 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
idea下配置tomcat避坑详解
2022/04/12 Servers