简单实现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 相关文章推荐
js判断变量是否空值的代码
Oct 26 Javascript
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
vue使用节流函数的踩坑实例指南
May 20 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中处理模拟rewrite 效果
2006/12/09 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
python requests.post带head和body的实例
2019/01/02 Python
matplotlib实现区域颜色填充
2019/03/18 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
django序列化serializers过程解析
2019/12/14 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
Shell如何接收变量输入
2016/08/06 面试题
幼儿园教师自我鉴定
2014/03/20 职场文书
简单租房协议书
2014/04/09 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书