zoukankan      html  css  js  c++  java
  • css 动态换肤

    今天朋友问我如果动态调用皮肤,我也没有做过,只好到网上搜索了一下,然后自己分析了一下:
    原理是利用js动态加载css文件,然后把信息用cookie保存到客户段。这样就可以使用户下次访问的时候显示的格式就是上次设计的。不过如果用户的浏览器禁止cookie的写入(mafee 8.5 就禁止cookie的写入),这个就是问题了。。。。。希望大虾们能够解决一下。。。
    提醒一下(copy代码的时候不要忘记自己创建 css文件,不然就会没有效果的  -v-)

    <html>
    <head>
        <link id="skin" rel="stylesheet" type="text/css" />
        <title>换肤技术</title>

        <script language="javascript" type="text/javascript">
    function SetCookie(name,value){
       var argv=SetCookie.arguments;
       var argc=SetCookie.arguments.length;
       var expires=(2<argc)?argv[2]:null;
       var path=(3<argc)?argv[3]:null;
       var domain=(4<argc)?argv[4]:null;
       var secure=(5<argc)?argv[5]:false;
       document.cookie=name+"="+escape(value)+((expires==null)?"":("; expires="+expires.toGMTString()))+((path==null)?"":("; path="+path))+((domain==null)?"":("; domain="+domain))+((secure==true)?"; secure":"");
    }

    function GetCookie(Name) {
       var search = Name + "=";
       var returnvalue = "";
       if (document.cookie.length > 0) {
          offset = document.cookie.indexOf(search);
          if (offset != -1) {  
             offset += search.length;
             end = document.cookie.indexOf(";", offset);           
             if (end == -1)
                end = document.cookie.length;
             returnvalue=unescape(document.cookie.substring(offset,end));
          }
       }
       return returnvalue;
    }

    var thisskin;
    thisskin=GetCookie("nowskin");
    if(thisskin!="")
       skin.href=thisskin;
    else
       skin.href="css.css";

    function changecss(url){
       if(url!=""){
          skin.href=url;
          var expdate=new Date();
          expdate.setTime(expdate.getTime()+(24*60*60*1000*30));
          //expdate=null;
                      //以下设置COOKIES时间为1年,自己随便设置该时间..
          SetCookie("nowskin",url,expdate,"/",null,false);
       }
    }

        </script>

    </head>
    <body>
        <p>
            请选择下面的下拉菜单测试换肤效果</p>
        <a href="#" onclick="changecss('css.css')">css.css</a> <a href="#" onclick="changecss('css1.css')">
            css1.css</a> <a href="#" onclick="changecss('css2.css')">css2.css</a> <a href="#"
                onclick="changecss('css3.css')">css3.css</a>
        <br/>
        <select onchange="changecss(this.value)">
            <option>选择样式单文件</option>

            <script language="javascript" type="text/javascript">
    var csss=new Array();
    csss[0]="css.css";
    csss[1]="css1.css";
    csss[2]="css2.css";
    csss[3]="css3.css";
    var i;
    for(i=0;i<4;i++)
       if(thisskin==csss[i])
          document.write("<option value=\""+csss[i]+"\" selected>"+csss[i]+"样式单文件</option>");
       else
          document.write("<option value=\""+csss[i]+"\">"+csss[i]+"样式单文件</option>");
            </script>

        </select>
    </body>
    </html>

  • 相关阅读:
    python分布式进程
    python协程
    python线程同步
    Linux内核-链表
    java基础-003
    java基础-002
    JVM-class文件完全解析-魔数
    JVM-JDK命令行工具
    JVM-类文件结构
    Linux内核-模块编译和安装
  • 原文地址:https://www.cnblogs.com/xinlang/p/1310341.html
Copyright © 2011-2022 走看看