css+js+cookie实现整站换模板。。
来源：互联网 发布：信息安全书籍知乎 编辑：程序博客网 时间：2024/05/19 00:13
对一个页面换模板比较简单，对整个网站换模板单纯用css+js貌似就不能实现了。。得用cookie进行存储一下子。。
简单的jsp页面代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link href="css/style1.css" rel="stylesheet" type="text/css" /> //每个页面里必须第一个link为引入样式文件的link...方便后边分析。
<script language="javascript" src="switchjs.js"></script>
</head>
<body>
<div align="center">
<p><a href="#" onclick="changestyle(0,'style1.css');return false;">样式一</a> <a href="#" onclick="changestyle(0,'style2.css');return false;">样式二</a> <a href="#" onclick="changestyle(0,'style3.css');return false;">样式三</a> </p>
<p>换肤选择：
<label>
<select name="selectstyle" id="selectstyle" onchange="changestyle(0,this.value)">
<option value="style1.css">样式一</option>
<option value="style2.css">样式二</option>
<option value="style3.css">样式三</option>
</select>
</label>
<br />
<br />
<br />
</p>
</div>
<input type="button" value="点击跳转" onclick="javascript:location.href='test2.jsp'"/>
</body>
</html>
测试用的test2.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'welcome.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link href="css/style1.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="switchjs.js"></script>
</head>
<body>
hi....bobo好。。<br>
<input type="button" value="点击返回" onclick="javascript:location.href='test1.jsp'">
</body>
</html>
js代码如下：
// JavaScript Document
function changestyle(i,cssfile) //根据传入的文件名和第一个link标签进行操作。。
{ // alert(1);
var linkobj=document.getElementsByTagName("link");
linkobj[i].setAttribute("href","css/"+cssfile); //linkobj[0]第一个link标签。。所以上边要把第一个link标签用来引用样式文件。
createCookie("defaultcss",cssfile,7);
}
function createCookie(name,value,days) //写cookie
{ // alert(2);
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/"; //cookie存放：defaultcss=style.css; expires="2343242"; path=/"
} //defaultcss=style.css; path=/"
function readCookie(name) //读cookie..
{ // alert(3);
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
// alert(c);
if (c.indexOf(nameEQ) == 0){
var d =c.substring(nameEQ.length,c.length);
// alert(d); //style1.css
return c.substring(nameEQ.length,c.length);
}
}
return null;
}
var csscookie=readCookie("defaultcss"); //先读cookie.. 然后 changestyle()..然后creatstyle()
if(csscookie) changestyle(0,csscookie);
ok ...
PS.求网站模板。。。以前没有收集几套模板。。现在用到了没得用了。。又严重缺少耐心。。谁有那耐心自己发明创造几套独一无二的模板呢。。美工不容易呀。。啊啊啊。。。美工的孩子你伤不起啊！！！！
- css+js+cookie实现整站换模板。。
- css+js+cookie实现整站换模板。。
- cookie js写法 案例模板
- js 实现Cookie
- JS 实现Cookie
- js实现cookie登陆
- js实现cookie
- django 模板使用css js
- 基于jQuery.cookie.js的Cookie实现
- js实现cookie记住密码
- js css 实现遮罩层
- JS+CSS实现幻灯片
- smarty 模板内嵌套 css js问题
- cookie模板
- cookie模板
- jquery.cookie.js操作cookie实现“记住密码”
- jquery.cookie.js操作cookie实现“记住密码”
- jquery.cookie.js操作cookie实现记住密码
- Centos底部面板图标不见的解决办法
- capwap学习笔记——capwap的前世今生
- 毕业后，2年的工作总结与分析
- css+js+cookie实现整站换模板。。
- java算法之冒泡排序
- css+js+cookie实现整站换模板。。
- iPhone代码片段收集(持续更新)
- 有理想的程序员必须知道的15件事
- edit grid
- edit grid
- 我的毕业设计
- VC++ OCX 控件注册
- iPhone代码片段收集(2)
- C++的虚函数相关知识点（一）
