Simple implementation of js page switching function
- 2021-07-02 23:01:23
- OfStack
This article introduces the processing principle of js page skin changing function (* needs to be tested and used in a server environment *) for your reference, the specific contents are as follows
Principle:
1. Skin changing is to make the page use different styles
2. We make multiple style sheet files for the places to be skinned according to the non-skinned ones
3. Get id for link
4. Modify the href property of link to change the style sheet
5. Use no style sheet, that is, use the corresponding skin style
6. Using the user principle of cookie technology, the user will use the skin selected last time when opening the page again
7. Read cookie at the beginning of page loading, and ensure that the corresponding skin css is loaded in advance
<html>
<head>
<title>js Page skin changing function </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 Processing principle of page skin changing function
1. Skin changing is to make the page use different style settings
2. We make multiple style sheet files for the places to be skinned according to the non-skinned ones
3. Get link Adj. id
4. Modify link Adj. href Property changes the style sheet
5. Adopt no style sheet, that is, use the corresponding skin style
6. Utilization cookie Technical user principle, the user will use the skin selected last time when opening the page again
7. Read cookie At the beginning of page loading, make sure to correspond to skin css Load ahead of time
*/
// Read cookie , skin change
var skin=document.getElementById("skin");// Get link Element
var cookieval=document.cookie;
var skipval=readcookie("skin");
if(!skipval){// If cookie No record exists
skin.href="1.css";
}else{
skin.href=skipval+".css";// Have records
};
window.onload=function(){
// Click the button to change skin
var skin1=document.getElementById("skin1");
var skin2=document.getElementById("skin2");
var skin3=document.getElementById("skin3");
var Days = 30; // Set the expiration time, 30 Days later
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();
};
};
// Read cookie Specify value
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=" Skin 1" id="skin1" />
<input type="button" value=" Skin 2" id="skin2" />
<input type="button" value=" Skin 3" id="skin3" />
</div>
</div>
<div class="bodyer skinbodyer">
<div class="con1"> I am the content 1</div>
<div class="con2"> I am the content 2</div>
<div class="con3"> I am the content 3</div>
</div>
<div class="footer skinfooter">
I'm the tail message
</div>
</body>
</html>