`
pcajax
  • 浏览: 2107030 次
  • 性别: 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 中的环境配置【部分原创】
评论
发表评论

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

相关推荐

    《JavaScript实例精通》[源代码]

    示例描述：JavaScript结合文字实现特殊页面。 9_1.htm 逐隐逐现的文字特效。 9_2.htm 超酷的文字特效。 9_3.htm 阴影文字的特殊效果。 9_4.htm 彩色文字的特殊效果。 9_5.htm 升降文字的特殊效果。 ...

    程序天下:JavaScript实例自学手册

    8.2 不用CSS实现链接样式的变化 8.3 让链接没有下划线 8.4 去掉超链接点击时的框 8.5 显示页面中所有链接 8.6 一个链接打开两个地址 8.7 为链接提供下拉菜单 8.8 按钮链接 8.9 弹出鼠标所指的链接地址 8.10 链接的...

    《程序天下：JavaScript实例自学手册》光盘源码

    8.2 不用CSS实现链接样式的变化 8.3 让链接没有下划线 8.4 去掉超链接点击时的框 8.5 显示页面中所有链接 8.6 一个链接打开两个地址 8.7 为链接提供下拉菜单 8.8 按钮链接 8.9 弹出鼠标所指的链接地址 8.10 链接的...

    JAVA上百实例源码以及开源项目源代码

    Java源代码实现部分，比较有意思，也具参考性。像坐标控制、旋转矩阵、定时器、生成图像、数据初始化、矩阵乘法、坐标旋转、判断是否是顺时针方向排列、鼠标按下、放开时的动作等，都可在本源码中得以体现。 Java...

    javascript网页特效实例大全（8-12）

    实例302　利用CSS样式打印页面中的指定内容　478 实例303　利用CSS样式分页打印　479 11.5　套打邮寄产品单　482 实例304　打印汇款单　482 实例305　打印快递单　484 实例306　打印信封　485 第12章　网站安全　489...

    JavaScript实例精通

    JavaScript实例精通 1．本书1~20章所附代码的运行环境 操作系统：Windows 2003、Windows XP Professional，或者Windows 2000 开发环境：、Dreamwave、Notepad、UltraEdit，或者其他文本编辑器 Web服务器：IIS 5.1及...

    JavaScript网页特效范例宝典源码

    实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...

    JAVA上百实例源码以及开源项目

    Java源代码实现部分，比较有意思，也具参考性。像坐标控制、旋转矩阵、定时器、生成图像、数据初始化、矩阵乘法、坐标旋转、判断是否是顺时针方向排列、鼠标按下、放开时的动作等，都可在本源码中得以体现。 Java...

    精易模块[源码] V5.15

    6、优化“文本_取随机数字”精简代码，提高执行效率，感谢易友[ds9660]反馈。 7、修正“普通填表-&gt;链接_点击”无法在本窗口中打开的BUG，感谢易友[@zhuan888]反馈。 8、修正“时间_时间戳转文本”代码不严谨出现数组...

    黑马程序员 安卓学院 万元哥项目经理 分享220个代码实例

    |--Json读js资源文件 |--layout布局样式之style配置 |--listview 页面 图片加文字 |--ListView之CursorAdapter异步查询框架之短信 |--ListView之动态添加子view |--ListView优化之分页加载 |--ListView优化之动态...

    asp.net知识库

    SharpRewriter：javascript + xml技术利用#实现url重定向 采用XHTML和CSS设计可重用可换肤的WEB站点 asp.net的网址重定向方法的比较：面向搜索引擎友好 也谈 ASP.NET 1.1 中 QueryString 的安全获取写法 ASP.NET运行...

    Java面试宝典2020修订版V1.0.1.doc

    2、CSS样式定义优先级顺序是？ 12 3、div和span的区别？ 12 4、CSS选择器包括？ 12 5、用css3语法中，如何实现一个矩形框的圆角效果和50%红色透明效果？，请写出关键脚本 12 6、Div与Table的区别 13 7、行级标签转...

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