`
pcajax
  • 浏览: 2112203 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JS代码实例：实现随机加载不同的CSS样式

CSSJavaScriptBlog 
阅读更多

如果让网页浏览者每次打开页面都有新的感觉，可以通过替换css样式来处理。下面来介绍一下。

随机载入CSS样式的JS效果实际上很好实现，本文的代码如下，具体思路是用一个默认的CSS样式：default.css。另外再用三个其他名称 的CSS：skin1.css，skin2.css，skin3.css。当然你可以用更多的样式表，随后在载入时进行随机替换，因为最先载入的 default.css样式是直接写在页面上，而JS随机载入的后面CSS文件会覆盖之前的CSS，只要CSS中的元素名称相同即可。

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]);
} <script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>
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)
{ <script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>
random = this.getRandomNum(0, length-1)
}
currentStyle = this.styles[random];
//将新样式存入cookie，cookie有效时间为24小时
this.setCookie(this.cookieKey, currentStyle, 24, "/", "websbook.com", false);
//若样式名称不为"default"默认样式，则向<head />标签中写入定制样式
if(currentStyle != "default")
{
document.write('<link rel="stylesheet" type="text/css"
href="' + this.baseSkinUrl + this.styles[random] + '.css" />');
}
}
}
Init.loadCSS();

分享到：
| vsftpd 在linux 中的环境配置【部分原创】
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    pre_o_1csdn63m9a1bs0e1rr51niuu33e.a

    pre_o_1csdn63m9a1bs0e1rr51niuu33e.a

    matlab建立计算力学课程的笔记和文件.zip

    matlab建立计算力学课程的笔记和文件.zip

    FT-Prog-v3.12.38.643-FTD USB 工作模式设定及eprom读写

    FT_Prog_v3.12.38.643--FTD USB 工作模式设定及eprom读写

    matlab基于RRT和人工势场法混合算法的路径规划.zip

    matlab基于RRT和人工势场法混合算法的路径规划.zip

    matlab基于matlab的两步定位软件定义接收机的开源GNSS直接位置估计插件模块.zip

    matlab基于matlab的两步定位软件定义接收机的开源GNSS直接位置估计插件模块.zip

    office 2016三和一精简版

    office 2016三和一精简版

    Scrapy-1.0.2-py2-none-any.whl

    文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    麦肯锡咨询顾问必备宝典-时间管理.ppt

    麦肯锡咨询顾问必备宝典-时间管理.ppt

    setuptools-0.6c10-py2.4.egg

    文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    麦肯锡顾问的黄金思考方法.pptx

    麦肯锡顾问的黄金思考方法.pptx

    91fdd461elb59a4ce8dfcfc46bc283a7.msi

    91fdd461elb59a4ce8dfcfc46bc283a7.msi

    ansys maxwell

    ansys maxwell

    5-5.py

    5-5

    xx广告促销计划流程实施手册.ppt

    xx广告促销计划流程实施手册.ppt

    仿小米商城微信小程序源码+项目说明.zip

    仿小米商城微信小程序源码+项目说明.zip

    pytest-4.6.0.tar.gz

    文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    Scrapy-2.10.1.tar.gz

    文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    麦肯锡xx客户满意服务.ppt

    麦肯锡xx客户满意服务.ppt

    网课专注度监测预警系统基于yolov5目标检测的网课专注度检测系统源码+模型+pyqt5界面.zip

    网课专注度监测预警系统基于yolov5目标检测的网课专注度检测系统源码+模型+pyqt5界面.zip

    基于python+Scrapy的农业数据爬虫设计与实现

    【作品名称】：基于python+Scrapy的农业数据爬虫设计与实现 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】： 基于Scrapy的农业数据爬虫设计与实现 . ├── Crops # web服务 │ ├── app.py │ ├── static # 静态文件 │ │ ├── css │ │ └── js │ └── templates # 静态页面 │ ├── corn.html │ ├── corns.html │ ├── index.html │ ├── porcor.html │ ├── pork.html │ └── porks.html ├── README.md └── spider # 爬虫及数据处理 ├── integration # 数据汇总 │ └── corn.py └── tutorial # 爬虫 ├── scrap

Magicbox
Global site tag (gtag.js) - Google Analytics