简单实现js页面切换功能


Posted in Javascript onJanuary 10, 2021

本文为大家介绍了js页面换肤功能处理原理  (*需要在有服务器环境下测试使用*),供大家参考,具体内容如下

原理:

1.换肤是让页面采用不用的样式设置
2.我们把要换肤的地方根据不用皮肤做成多个样式表文件
3.获取link的id
4.修改link的href属性改变样式表
5.采用了不用样式表,就是使用对应皮肤样式
6.利用cookie技术用户原则,用户再次打开页面也会采用上次选用皮肤
7.读取cookie要在页面载入开始,保证对应皮肤css提前加载

<html>
<head>
<title>js页面换肤功能</title>
<meta charset="utf-8">
<link href="public.css" rel="stylesheet" type="text/css" />
<link href="1.css" rel="stylesheet" type="text/css" id="skin" />
<script type="text/javascript"> 
/*
js页面换肤功能处理原理
1.换肤是让页面采用不用的样式设置
2.我们把要换肤的地方根据不用皮肤做成多个样式表文件
3.获取link的id
4.修改link的href属性改变样式表
5.采用了不用样式表,就是使用对应皮肤样式
6.利用cookie技术用户原则,用户再次打开页面也会采用上次选用皮肤
7.读取cookie要在页面载入开始,保证对应皮肤css提前加载
*/
 
//读取cookie,换肤
var skin=document.getElementById("skin");//拿到link元素
var cookieval=document.cookie;
var skipval=readcookie("skin");
if(!skipval){//如果cookie不存在记录
 skin.href="1.css";
}else{
 skin.href=skipval+".css";//有记录
};
window.onload=function(){
 //点击按钮换肤
 var skin1=document.getElementById("skin1");
 var skin2=document.getElementById("skin2");
 var skin3=document.getElementById("skin3");
 var Days = 30; //设置过期时间,30天以后
 var exp = new Date(); 
 exp.setTime(exp.getTime() + Days*24*60*60*1000);
 skin1.onclick=function(){ 
 skin.href="1.css";
 document.cookie = "skin=1;expires="+exp.toUTCString();
 };
 skin2.onclick=function(){
 skin.href="2.css";
 document.cookie = "skin=2;expires="+exp.toUTCString();
 };
 skin3.onclick=function(){
 skin.href="3.css";
 document.cookie = "skin=3;expires="+exp.toUTCString();
 };
};
//读取cookie指定值
function readcookie(key){ 
 var skinval=false;
 var arrkv=cookieval.split(";"); 
 for(var i=0;i<arrkv.length;i++){ 
 var itemc=arrkv[i].split("=");
 if(itemc[0]==key){ 
  skinval=itemc[1];
 }else{
 };
 }; 
 return skinval;
};
</script>
</head>
<body>
<div class="header skinheader">
 <div class="skinchange">
 <input type="button" value="皮肤1" id="skin1" />
 <input type="button" value="皮肤2" id="skin2" />
 <input type="button" value="皮肤3" id="skin3" />
 </div>
</div>
<div class="bodyer skinbodyer">
 <div class="con1">我是内容1</div>
 <div class="con2">我是内容2</div>
 <div class="con3">我是内容3</div>
</div>
<div class="footer skinfooter">
我是尾部信息
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery代码优化 事件委托篇
Nov 01 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
JavaScript作用域示例详解
Jul 07 #Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 #Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 #Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 #Javascript
jQuery之简单的表单验证实例
Jul 07 #Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 #Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 #Javascript
You might like
深入PHP autoload机制的详解
2013/06/09 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
python中有关时间日期格式转换问题
2019/12/25 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
Python2与Python3的区别详解
2020/02/09 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
退休感言
2014/01/28 职场文书
优秀经理事迹材料
2014/02/01 职场文书
小学教师师德感言
2014/02/10 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript
python画条形图的具体代码
2022/04/20 Python
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers