简单实现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 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
js字符串转成JSON
Nov 07 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
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的5个安全措施小结
2012/07/17 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
python操作ie登陆土豆网的方法
2015/05/09 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
python实现多进程通信实例分析
2019/09/01 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
车辆维修工自我评价怎么写
2013/09/20 职场文书
仓库组长岗位职责
2014/01/29 职场文书
授权委托书公证
2014/09/14 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
边城读书笔记
2015/06/29 职场文书
毕业典礼主持词
2015/06/29 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python