简单实现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 相关文章推荐
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
jquery下实现overlay遮罩层代码
Aug 25 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
详解JS深拷贝与浅拷贝
Aug 04 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 编写大型网站问题集
2010/05/07 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
js过滤数组重复元素的方法
2010/09/05 Javascript
js查错流程归纳
2012/05/04 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
layer弹窗插件操作方法详解
2017/05/19 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
tornado 多进程模式解析
2018/01/15 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
物业工作计划书
2014/01/10 职场文书
九年级体育教学反思
2014/01/23 职场文书
金榜题名主持词
2015/07/02 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书