zoukankan      html  css  js  c++  java
  • js做的皮肤更换,可以记住最后更换的效果。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>换肤测试程序</title>
    <style type="text/css">
    .themes{border:1px solid #000;}
    </style>
    <script language="javascript" type="text/javascript">
    <!--
    var arrCSS=[
        ["<img src='http://www.east-dragon.cn/code/changeskin/images/ocean.gif' width='16' height='8' class='themes' alt='Ocean'>","http://www.east-dragon.cn/code/changeskin/css/ocean.css"],
        ["<img src='http://www.east-dragon.cn/code/changeskin/images/tangerine.gif' width='16' height='8' class='themes' alt='Tangerine'>","http://www.east-dragon.cn/code/changeskin/css/tangerine.css"],
        ["<img src='http://www.east-dragon.cn/code/changeskin/images/violet.gif' width='16' height='8' class='themes' alt='Violet'>","http://www.east-dragon.cn/code/changeskin/css/violet.css"],
        ["<img src='http://www.east-dragon.cn/code/changeskin/images/oyster.gif' width='16' height='8' class='themes' alt='Oyster'>","http://www.east-dragon.cn/code/changeskin/css/oyster.css"],
        ["<img src='http://www.east-dragon.cn/code/changeskin/images/grass.gif' width='16' height='8' class='themes' alt='Grass'>","http://www.east-dragon.cn/code/changeskin/css/grass.css"],
        ""
    ];


    // *** function to replace href="#" ***
    function v(){
    return;
    }

    // *** Cookies ***
    function writeCookie(name, value) { 
    exp = new Date(); 
    exp.setTime(exp.getTime() + (86400 * 1000 * 30));
    document.cookie = name + "=" + escape(value) + "; expires=" + exp.toGMTString() + "; path=/"; 

    function readCookie(name) { 
    var search; 
    search = name + "="; 
    offset = document.cookie.indexOf(search); 
    if (offset != -1) { 
    offset += search.length; 
    end = document.cookie.indexOf(";", offset); 
    if (end == -1){
    end = document.cookie.length;
    }
    return unescape(document.cookie.substring(offset, end)); 
    }else{
    return "";
    }
    }


    ////////////////////////////////////
    // StyleSheet
    ////////////////////////////////////
    function writeCSS(){
      for(var i=0;i<arrCSS.length;i++){
        document.write('<link title="css'+i+'" href="'+arrCSS[i][1]+'" rel="stylesheet" disabled="true" type="text/css" />');
      }
        setStyleSheet(readCookie("stylesheet"));
    }

    function writeCSSLinks(){
      for(var i=0;i<arrCSS.length-1;i++){
        if(i>0) document.write('  ');
        document.write('<a href="javascript:v()" onclick="setStyleSheet(/'css'+i+'/')">'+arrCSS[i][0]+'</a>');
      }
    }

    function setStyleSheet(strCSS){
      var objs=document.getElementsByTagName("link");
      var intFound=0;
      for(var i=0;i<objs.length;i++){
        if(objs[i].type.indexOf("css")>-1&&objs[i].title){
          objs[i].disabled = true;
          if(objs[i].title==strCSS) intFound=i;
        }
      }
      objs[intFound].disabled = false;
      writeCookie("stylesheet",objs[intFound].title);
    }

    writeCSS();
    setStyleSheet(readCookie("stylesheet"));

    // 隐藏显示换肤框
    function ShowHideDiv(init) {
    if(document.getElementById("Sright").style.display == "block"){
     document.getElementById("Sright").style.display = "none";
      }
      else{
      document.getElementById("Sright").style.display = "block";
      }
    }
    //-->
    </script>
    </head>
    <body>
    <div class="topNav"></div>
    <div class="blank4"></div>
    <div class="skin">
         <div id="page_options" onclick="ShowHideDiv()">
         皮肤设置选项
         <div id="Sright">
              颜色:<script type="text/javascript">writeCSSLinks();</script>
         </div>
     </div>
    </div>
    <div class="blank4"></div>
    <div class="newsbody">
         <div class="coleft">
              <div class="clear"></div>
         </div>
         <div class="cocenter">
          <div class="cconter"></div>    
         <div class="clear"></div>
         </div>
         <div class="coright">
              <div class="clear"></div>
         </div>
    <div class="clear"></div>     
    </div>
    <div class="blank4"></div>
    <div class="footer"></div>
    </body>
    </html>
  • 相关阅读:
    Python读写文件学习笔记
    前端轻量级、简单、易用的富文本编辑器 wangEditor 的基本用法
    选择本地文件上传控件 input标签
    push 和 append 以及appendchild 用法和区别
    关于时间获取和时间戳的换算
    动态设置html根字体大小(随着设备屏幕的大小而变化,从而实现响应式)
    JS 判断是否为安卓或IOS系统
    JS动态获取 Url 参数
    for 循环遍历数据动态渲染html
    VUE框架下安装自带http协议
  • 原文地址:https://www.cnblogs.com/zerogo/p/2209273.html
Copyright © 2011-2022 走看看