JS代码实例：实现随机加载不同的CSS样式
如果让网页浏览者每次打开页面都有新的感觉，可以通过替换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();
JS代码实例：实现随机加载不同的CSS样式相关推荐
- php不显示css样式,thinkphp加载不了css样式怎么解决
thinkphp加载不了css样式怎么解决 解决方法: 1.项目入口文件index.php<?php define('APP_NAME','APP'); define('APP_PATH','. ...
- 浏览器打开html不加载css样式,ie怎么加载不了css样式？
css(Cascading Style Sheets,层叠样式表),它是一种用来表现HTML或XML等文件样式的计算机语言.CSS主要用来设计网页的样式,美化网页:它不仅可以静态地修饰网页,还可以配合 ...
- CSS图片有时失败,科技常识：图片加载失败后CSS样式处理最佳实践
今天小编跟大家讲解下有关图片加载失败后CSS样式处理最佳实践 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关图片加载失败后CSS样式处理最佳实践 的相关资料,希望小伙伴们看了有所帮助. 一 ...
- 图片加载失败后CSS样式处理最佳实践
图片加载失败后CSS样式处理最佳实践 1.传统的图片异常处理 如果因为网络或者跨域限制等原因无法正常加载,在默认情况下会显示浏览器默认的"裂开"的图片效果,如果设置了 alt 属性 ...
- yii2-按需加载并管理CSS样式/JS脚本
(注:以下为Yii2.0高级:注意代码中php标签自己补上) 一.资源包定义 Yii2对于CSS/JS 管理,使用AssetBundle资源包类. 创建如下: backend/assets/AppAs ...
- 网站https加载不出css样式_Python Web全栈之旅04--Web前端●走入CSS的世界
一.CSS初认识 1.趣调查 2."装修小能手" 前面我们研究了HTML,回顾下它是做什么的? 当我们用HTML搭建好网页的基本骨架,下面请出我们的"装修小能手" ...
- html加载类失败,css样式为什么会加载失败？
有很多刚刚接触css的新手有时会遇到css加载失败这个问题,但测试时,网页上没有显示该样式的问题,这就说明CSS加载失败了. 出现这种状况一般是因为的css路径书写错,或者是在浏览器中禁止掉了css的 ...
- 360导入html没有,IE无法加载到外部CSS样式, 用360浏览器就可以,上CSS引用代码[急]_html/css_WEB-ITnose...
新用户注册页面 通行证用户名: @163.com 啊啊 登录密码: 重复登录密码: 性别: 男 女 真实姓名: 昵称: 关联手机号: 保密邮箱: 下面是CSS @charset "utf-8 ...
- SSM 实训笔记 -10- 使用 sessionStorage 存储数据、js 图片验证码、登录加载动画
SSM 实训笔记 -10- 使用 sessionStorage 存储数据.js 图片验证码.登录加载动画 本篇内容: (1)在登录成功时,使用 sessionStorage 存储用户的用户名,并在登录 ...
最新文章
- 同样是Java程序员，如何比别人更优秀？
- docker无法连接mysql镜像_关于Docker官方CentOS镜像无法启动mysqld的总结
- left join、right join、inner join的区别
- python情感分析预测模型_Python 使用 NLTK 实现简单情感分析--Twitter（推特）分析...
- struts2.0.14 包命名空间
- ASP连接sql server实例解析
- css3 水纹效果（仿写阿里云）
- 【后台模板】免费开源好看的后台模板
- 我所使用的五大返利网站使用比较
- python计算机视觉：创建缩略图
- MySQL高级--2--黑马
- 华为服务器 自动安装 黑屏,华为服务器显示器黑屏如何解决
- 炒汇常识--股市与汇市的区别
- 从两个和尚挑水的故事得到的启发
- Multisim基础 变压器 简单示例
- 使用 GPG 加密和解密文件
- 中小学学校视频直播系统怎么搭建
- could not connect to server: Connection timed out (Ox0000274C/10060)ls the server running on host “
- 改计算机名后ansys打不开,更改计算机名后 Ansys重新注册的简单办法 20140611.pdf
- 红米note电信版_标注2014910_官方线刷包_救砖包_解账户锁
热门文章
- 训练日志 2018.10.18
- 训练日志 2018.9.8
- Silver Cow Party（POJ-3268）
- 信息学奥赛C++语言：火柴盒
- docker 导出堆栈信息.hprof_JVM性能调优监控工具jps、jstack、jmap、jhat、jstat、hprof使用...
- app做好后如何上线_传统企业如何做好线上线下全网营销？不知道的建议看完这篇干货...
- 使用python将COCO格式的json文件转化为VOC格式的xml文件
- python numpy数组中冒号 : 的使用--全局选择、表示区间
- [Matlab] 变量名与字符串的互相转换的正确方法
- 一个深度学习痴呆选手对AlexNet网络架构的一些理解