动态CSS换肤技术

然后呢一

然后呢一

2016-02-19 12:08

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享动态CSS换肤技术,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。
见的例子就是:一个站点上有多个页面样式提供浏览者选择。
同时,在选择了某样式后,再次打开该页面时,将仍然保持该样式。
自然会想到了Cookie技术

 以下是程序代码:
HTML
HEAD
link ID="skin" rel="stylesheet" type="text/css"
TITLE换肤技术/TITLE
SCRIPT LANGUAGE=javascript
!--
function SetCookie(name,value){
     var argv=SetCookie.arguments;
     var argc=SetCookie.arguments.length;
     var expires=(2argc)?argv[2]:null;
     var path=(3argc)?argv[3]:null;
     var domain=(4argc)?argv[4]:null;
     var secure=(5argc)?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"
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;i4;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
展开更多 50%)
分享

猜你喜欢

动态CSS 换肤技术

电脑网络
动态CSS 换肤技术

动态CSS换肤技术

Web开发
动态CSS换肤技术

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS圆角技术

Web开发
CSS圆角技术

软件换肤技术在 BCB 中的实现

C语言教程 C语言函数
软件换肤技术在 BCB 中的实现

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

动态HTML技术精彩实例

Web开发
动态HTML技术精彩实例

CSS定位一:动态转换

Html CSS布局 Div+CSS XHTML
CSS定位一:动态转换

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Win 7扫清障碍让系统顺畅运行

Win 7扫清障碍让系统顺畅运行

MSSQL经典语句

MSSQL经典语句
下拉加载更多内容 ↓