网页换肤

最新推荐文章于 2023-08-29 20:03:14 发布

不善表演

最新推荐文章于 2023-08-29 20:03:14 发布

阅读量145

点赞数

分类专栏：网页效果

网页效果专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在script标签中编写保存cookie信息的方法，用于将CSS样式的文件的路径信息保存到客户端Cookie文件中

function writeCookie(csspath){
		var today=new Date();
		var expires=new Date();
		expires.setTime(today.getTime()+1000*60*60*24*30);//有效期为30天
		var str="cssPath="+csspath+";expires="+expires.toGMTString()+";";
		document.cookie=str;
	}

编写读取cookie信息的方法

 function readCookie(cookieName){ 		
 	var search=cookieName+"="; 		
 	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;
					return unescape(document.cookie.substring(offset,end));
		         } 			
        } 		
    } 	
}

编写超链接的onClick事件调用的方法

function change(type){
		if(type=="orange"){
			document.getElementById("myCss").href="orange.css";
			writeCookie("orange.css");
		}
		if(type=="gray"){
			document.getElementById("myCss").href="gray.css";
			writeCookie("gray.css");
		}
	}

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>统一样式页面</title>
<link id="myCss" href="orange.css" rel="stylesheet">
</head>
<body>
<a href="#" onclick="change('orange')">[橘色]</a>
<a href="#" onclick="change('gray')">[灰色]</a>
<from action="">
	<table align="center">
		<tr>
			<td>用户名:</td><td><input type="text" name="name"></td>
		</tr>
		<tr>
			<td>密码:</td><td><input type="password" name="pwd"></td>
		</tr>
		<tr>
			<td>确认密码</td><td><input type="password" name="pwd1"></td>
		</tr>
		<tr>
			<td>姓名:</td>
			<td>
				<input type="radio" name="sex" value="m">男
				<input type="radio" name="sex" value="f">女
		   	</td>
		 </tr>
		 <tr>
		 	<td>年龄</td><td><input type="text" name="age"></td>
		 </tr>
		 <tr>
		 	<td><input class="botton1" type="submit" value="注册"></td>
		 	<td><input class="botton2" type="button" value="重置"></td>
		 </tr>
	</table>
</from>

<script type="text/javascript">
	function writeCookie(csspath){
		var today=new Date();
		var expires=new Date();
		expires.setTime(today.getTime()+1000*60*60*24*30);//有效期为30天
		var str="cssPath="+csspath+";expires="+expires.toGMTString()+";";
		document.cookie=str;
	}
	
	function readCookie(cookieName){
		var search=cookieName+"=";
		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;
					return unescape(document.cookie.substring(offset,end));
				}
			}
		}
	}
	
	function change(type){
		if(type=="orange"){
			document.getElementById("myCss").href="orange.css";
			writeCookie("orange.css");
		}
		if(type=="gray"){
			document.getElementById("myCss").href="gray.css";
			writeCookie("gray.css");
		}
	}
</script>
</body>
</html>

orange.css

body{
margin:2em;
	background-color:#FF9900;
}
td{
	font-family:"Times New Roman",Times,serif;
	font-size:14px;
		font-weight:bold;
}
input{
	font-size:9pt;
	color:#003399;
	font-family:宋体;
	border:'1px' 'dashed' '#999999';
	background:#EEEEEE;
}
.td1{
	font-size:12pt;
	font-family:黑体;
}
.botton1{
	background:#FFFFFF;
	font-weight:bold;
	width:50px;
}

gray.css

body{
margin:2em;
	background-color:#999999;
}
td{
	font-family:"Times New Roman",Times,serif;
	font-size:14px;
		font-weight:bold;
}
input{
	font-size:9pt;
	color:#003399;
	font-family:宋体;
	border:'1px' 'dashed' '#999999';
	background:#EEEEEE;
}
.td1{
	font-size:12pt;
	font-family:黑体;
}
.botton1{
	background:#FFFFFF;
	font-weight:bold;
	width:50px;
}