首页 > 教程 > 关键词 > Javascript最新资讯 > 正文

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

2010-04-14 10:12 · 稿源:站长之家Chinaz.com

随机载入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]);
}
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, "/", "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();

网友热搜:

  • 相关推荐
  • 大家在看
  • 天风国际郭明錤:iPhone 12/SE取消随机附赠充电器

    6月29日消息,昨日晚间,知名分析师郭明錤在天风国际微信公众号发文称,预计 2020下半年新款 iPhone 12将取随机附赠消充电器,以降低成本。同时,iPhone SE也将于 2020 下半年开始取消随机附赠充电器。郭明錤表示,iPhone 12 的物料成本 (BOM) 虽因支持 5G 而显著增加,但相信苹果的目标是维持 iPhone 12 的售价与 iPhone 11 差不多,以求复制 iPhone 11 的销售成功经验,而郭明錤先前报告亦曾预测表示,所有 iPhone 12

  • 十万以下买什么车好?CS35PLUS不容错过

    对于大多数年轻人来说,购车预算往往在十万左右,而这一级别市场也成为竞争最激烈的细分市场。各家车企面对激烈的竞争,为了吸引消费者的关注,更是推出众多产品来抢占市场。不过也正是因为如此,很多消费者都纠结十万以下买什么车好?而作为国产车企中的老大哥,长安汽车旗下的CS35PLUS无疑是“十万以下买什么车好”的代表之一。初看长安CS35PLUS,你会觉得这款车与市场上其他同级产品有着很大不同。在长安CS35 PLUS身上,虽然也能看到一丝

  • StrategyAnalytics:超宽带芯片正在迈向成功

    Strategy Analytics最新发布的研究报告《UWB的回归:智能手机、汽车、工业等芯片预测》指出,2019年UWB(超宽带)系统和无线电芯片市场实现了飞跃;于此同时,新标准、芯片和应用意味着UWB的复兴。相关资料显示,UWB 技术是一种传输速率高,发射功率较低,穿透能力较强并且是基于极窄脉冲的无线技术。 StrategyAnalytics指出,苹果iPhone11机型采用了全新的U1超宽带无线电芯片以及用于远程无钥匙进入的新汽车标准推动?

  • Serverless架构的前世今生

    一、Serverless简介云计算的不断发展,涌现出很多改变传统IT架构和运维方式的新技术,而以虚拟机、容器、微服务为代表的技术更是在各个层面不断提升云服务的技术能力,它们将应用和环境中很多通用能力变成了一种服务。但无论这些技术应用在哪里,帮助企业“降本增效”是技术变革永恒的主题。Serverless架构的出现,带来了跨越式的变革。Serverless下主机管理、操作系统管理、基础软件的部署运维、资源分配和扩缩容能力全部由云厂?

  • 跨境收款别担心,有亚马逊全球收款(ACCS)就够了

    收款,可以说是跨境电商卖家业务全流程中最重要的环节。跨境电商业务中的选品、采购、仓储、物流、营销等环节都需要依托于稳定的资金链来进行,而收款的高效安全稳定是卖家回笼货款并用于下一流程业务开展的关键。近期某国外支付平台破产暴雷,卖家辛辛苦苦销售货品所得的货款无法拿到手,没有比这更糟心的事了。要想做好跨境电商业务,选择一个稳定安全的收款渠道也是一门必修课。今天就给大家介绍一下近来市场上炒得火热的亚马逊官方?

  • 完美世界协助警方抓获CSGO外挂“Killer”制售团伙

    近日,CS:GO官方发文称,国服自上线以来,一直对作弊现象采取零容忍态度,坚决打击任何破坏游戏公平性的行为。近日,完美世界联合警方,成功打掉一个CS:GO外挂跨省制售团伙,抓获犯罪嫌疑人3名,其涉案金额高达百余万元。

  • 和平精英SS8赛季手册寻宝行动全攻略 SS8赛季手册寻宝行动教程

    ​和平精英SS8赛季手册寻宝行动是新增的玩法,在其中可以获得非常多的奖励,但是一些玩家还不清楚怎么去玩寻宝行动,下面就来为大家分享一下和平精英SS8赛季手册寻宝行动全攻略。

  • 和平精英SS8赛季手册全部奖励汇总 SS8赛季手册皮肤奖励一览

    ​和平精英的SS8赛季手册马上就要上线了,很多玩家还不清楚此次S8的赛季手册有什么内容,所以今天就来为大家分享一下和平精英SS8赛季手册全部奖励汇总。

  • 沫子直播100个CSGO开箱,“脸太黑”差一点想卸载游戏

    斗玩网原创:不少喜欢看绝地求生直播的观众应该都会知道沫子这个妹子主播,她有着“绝地求生一姐”称号,不仅颜值不错,性格也十分好,更是通过自己出色的吃鸡技术赢得了大量玩家的关注。而最近沫子开始接触了CSGO这款游戏,不过在开箱环节却遭遇到了人生最“黑暗”时刻,甚至要气到打算卸载了游戏。

  • 美瑞时(MRISSTIME)发展历程

    美瑞时(MRISSTIME)是世界著名制表品牌之一,隶属于瑞士瑞时集团,瑞士瑞时集团创立于1978年,总部位于洛桑。集团旗下围绕世界名品钟表收藏及高雅格调文化生活方式交流的全球瑞时会俱乐部100余家,服务于全球近500万VIP客户。自19世纪中叶,Ammann家族开始从事钟表制造及收藏,拥有独立的制表企业及顶级腕表收藏艺术廊、钟表博物馆。Ammann家族所坚持的理念,为品牌开创独树一帜的视野,并留下经典隽永的传世作品。直到今天,美瑞时(MRISSTIM

  • 世纪互联蓝云获得红帽CCSP认证,携手助力企业数字化转型

    中国北京- 2020 年 6 月 3 日,上海蓝云网络科技有限公司(以下简称世纪互联蓝云),正式宣布加入红帽云计算及服务供应商认证(Red Hat Certified Cloud and Service Provider,CCSP)计划,让其客户和独立软件供应商(ISV)对使用红帽解决方案构建下一代IT项目充满信心。作为红帽云计算及服务供应商,世纪互联蓝云将整合平台资源,为用户提供自动化的购买及交付流程。无论是企业用户,还是渠道伙伴都可以通过世纪互联蓝云的线上自助系统

  • 女神异闻录4黄金版全boss攻略汇总 P4G全boss战详细攻略

    女神异闻录4黄金版中boss的数量还是非常多的,一些boss等级和人格面具等级没达到的话就会很难打,下面就来为大家分享一下女神异闻录4黄金版全boss攻略汇总。

  • 耶鲁智能锁与Yale Access完美组合 让生活事半功倍

    在对于生活质量与要求越来越高的年代,耶鲁这个拥有 180 年悠久历史的品牌,创新推出yaleaccessapp。通过该app,可以绑定家庭中的耶鲁智能设备,轻松管理耶鲁智能锁,让生活事半功倍。 YaleAccess可以做什么? 从功能上看,YaleAccess连结起了耶鲁旗下的智能门锁、智能家居门铃、智能闭路电视、电子猫眼等各类产品,用互联网与高科技构建起家庭安防牢不可破的保卫圈。 YaleAccess可以实时推送信息,将家中智能锁的开锁信息传递到

  • 安信证书:申请免费SSL证书?别被“免费”蒙蔽双眼

    大部分企业网站和个人站长,已经认识到给网站安装SSL证书升级为HTTPS协议的重要性。作为国内领先的网站HTTPS解决方案提供商,安信证书专注提供SSL证书的申请和安装。但发现不少用户在咨询时开口便是有没有免费的SSL证书类似的问题,觉得还是有必要说一说这事儿。有没有免费的SSL证书?有。而且互联网上搜索相关内容就有超过上千万条结果。但你以为这些服务商都是做慈善的吗?俗话说,天上不会无故掉馅饼!天下没有免费的午餐。这是

  • Strategy Analytics:2G和3G用户占全球移动用户总数的46%

    6月19日消息,Strategy Analytics基于其免费报告《低成本4G手机:市场动态和机遇》,并结合最新的产业发展情况,分析了当前2G/3G的退网趋势和4G用户迁移机会。Strategy Analytics最新的无线市场预测,今年初,2G和3G用户占全球移动用户总数的46%,但贡献的收入却只占全球移动总收入的27%。到2023年,这一收入占比将下降到10%。非洲可以认为是一个特例,在这个地区,各国的ARPU值低于2美元,因此通过补贴促进用户迁移可

    2G 3G 4G
  • 兰宝行业精品案例—斗山、丰鲁VOCs废气治理项目作示范工程受电视环保栏目专访

    2019年6月,环保局出台《重点行业挥发性有机物综合治理方案》(环大气〔2019〕53号),明确提出深入实施VOCs精细化管控,推行“一厂一策”制度。年后,山东烟台全面开展了治理效果后评估工作。兰宝项目成示范工程受电视栏目专访 兰宝客户——斗山工程机械和丰鲁精细化工,作为废气治理重点行业(涂装和化工)内影响力企业,其优异的企业废气减排成效得到了环保局的高度认可。山东烟台电视台环保栏目将其作为示范性工程,进行了VOC

  • TLC闪存扛不住要降价:SSD迎来新的入手好时机

    来自Digitimes的最新报道称,尽管整体来看,整个三季度的闪存价格预计保持平稳,但TLC(3bit/cell)芯片则面临越来越大的下行压力,这主要源自消费需求的放缓。由于SLC/MLC颗粒造价高、容量密

  • 手表品牌推荐| ISSEY MIYAKE三宅一生今夏最佳搭配

    腕表作为身份和品位的一个象征,其品牌和设计的重要性自然不言而喻,手表品牌推荐标准也不再像以前只认品牌,还要考虑产品本身的设计和品质。在当下这个普遍追热潮,出门就撞款的腕表市场环境下,不仅腕表设计缺乏新意,腕表品质和价格也往往难以让人满意,少有品牌能够保证手表的颜值与性价比兼顾。而在这几点上,ISSEY MIYAKE三宅一生做到了,不是在它享有盛誉的服装领域,而是ISSEY MIYAKE三宅一生手表品牌得到了行业和消费者的

  • 手表品质之选:ISSEY MIYAKE三宅一生1/6系列手表

    最近,国产职场剧频频刷屏,从收割一片好评的《欢乐颂》、《都挺好》、《前半生》再到最近毁誉参半的《安家》、《完美关系》。这些电视剧都反映出我国女性意识觉醒的趋势,但很遗憾,国产剧中所塑造的独立女性的形象仍是远不比CBS老牌美剧《傲骨之战》来的立体。 《The Good Fight(傲骨之战)》这部剧以戴安(Diane)、卢卡(Lucca)和玛娅(Maia)三个不同年龄段的女律师为主角,聚焦独立女性对于自己过往生活的自省和新生和探?

  • 内存新锐ZADAK首次转战SSD:性能、外观都没得挑

    ZADAK这个品牌大家可能还不太熟悉,此前专注于高性能内存,现在第一次转战SSD固态硬盘,而且出手不凡,首款产品“SPARK PCIe Gen 3x4 M.2 RGB SSD”从外观设计到规格性能都非常出色。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议

热文

  • 3 天
  • 7天