简单实现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 相关文章推荐
ie下动态加态js文件的方法
Sep 13 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
详解webpack 入门与解析
Apr 09 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
简单JS代码压缩器
2006/10/12 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
python框架django基础指南
2016/09/08 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
python通过实例讲解反射机制
2019/10/17 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
Araks官网:纽约内衣品牌
2020/10/15 全球购物
大学生开西餐厅创业计划书
2014/02/01 职场文书
2014年优秀党员材料
2014/12/18 职场文书
结婚通知短信大全
2015/04/17 职场文书
党员带头倡议书
2015/04/29 职场文书
让生命充满爱观后感
2015/06/08 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
python中取整数的几种方法
2021/11/07 Python