zoukankan      html  css  js  c++  java
  • 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]);
    }
    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();

  • 相关阅读:
    【BZOJ2384】[Ceoi2011]Match KMP
    【BZOJ2482】[Spoj1557] Can you answer these queries II 线段树
    【BZOJ2506】calc 分段+vector+莫队
    【BZOJ2600】[Ioi2011]ricehub 双指针法
    【BZOJ4898】[Apio2017]商旅 分数规划+SPFA
    【BZOJ4417】[Shoi2013]超级跳马 矩阵乘法
    【BZOJ2707】[SDOI2012]走迷宫 Tarjan+拓扑排序+高斯消元+期望
    【BZOJ2730】[HNOI2012]矿场搭建 Tarjan
    【BZOJ4987】Tree 树形DP
    【BZOJ3502/2288】PA2012 Tanie linie/【POJ Challenge】生日礼物 堆+链表(模拟费用流)
  • 原文地址:https://www.cnblogs.com/hsapphire/p/1715322.html
Copyright © 2011-2022 走看看