简单实现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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
js post方式传递提交的实现代码
May 31 Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
4个顶级开源JavaScript图表库
Sep 29 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的网址
2006/11/25 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
JS 文件传参及处理技巧分析
2010/05/13 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
python计算时间差的方法
2015/05/20 Python
Python 文件操作的详解及实例
2017/09/18 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
美国羊皮公司:Overland
2018/01/15 全球购物
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
环保倡议书300字
2014/05/15 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
党支部意见范文
2015/06/02 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
2015年度女工工作总结
2015/10/22 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js