网站添加多种样式让用户自由切换

发布于 / 代码·杂谈 / 0 条评论


前言:本站这套主题用了蛮长时间的,可能有点审美疲劳了,最近总是修修改改,看到很多博客都带有昼夜样式切换,用户可以根据自己的喜好选择不同的风格,动了心也小改了一下,权当是分享吧!估计很多人像我一样喜欢折腾玩儿?还是那句话,修改前记得备份,别到最后啥也不是,so easy~

首先你需要有两套CSS,如果没有就不用往下看了,其实... 你完全可以偷啊,啊.. 不对,是借鉴...     和你使用同样主题的站点,很多博主都喜欢魔改,如果借鉴都不会就可以右上角关闭了,因为操作起来很简单,我们就..就细细的说~  奥力给

步骤一

拷贝以下代码保存为styleswitch.js,并将其上传网站主题目录。

//Style Sheet Switcher version 1.1 Oct 10th, 2006
//Author: Dynamic Drive: http://www.dynamicdrive.com
//Usage terms: http://www.dynamicdrive.com/notice.htm

var manual_or_random="manual" //"manual" or "random"
var randomsetting="3 days" //"eachtime", "sessiononly", or "x days (replace x with desired integer)". Only applicable if mode is random.

//////No need to edit beyond here//////////////

function getCookie(Name) { 
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}

function setCookie(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}

function deleteCookie(name){
setCookie(name, "moot")
}


function setStylesheet(title, randomize){ //Main stylesheet switcher function. Second parameter if defined causes a random alternate stylesheet (including none) to be enabled
var i, cacheobj, altsheets=[""]
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) { //if this is an alternate stylesheet with title
cacheobj.disabled = true
altsheets.push(cacheobj) //store reference to alt stylesheets inside array
if(cacheobj.getAttribute("title") == title) //enable alternate stylesheet with title that matches parameter
cacheobj.disabled = false //enable chosen style sheet
}
}
if (typeof randomize!="undefined"){ //if second paramter is defined, randomly enable an alt style sheet (includes non)
var randomnumber=Math.floor(Math.random()*altsheets.length)
altsheets[randomnumber].disabled=false
}
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
}

function chooseStyle(styletitle, days){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}

function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (var i=0; i<element.length; i++){
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else //else if it's a radio button
element[i].checked=true
break
}
}
}
}

if (manual_or_random=="manual"){ //IF MANUAL MODE
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet from cookie if there is one stored
setStylesheet(selectedtitle)
}
else if (manual_or_random=="random"){ //IF AUTO RANDOM MODE
if (randomsetting=="eachtime")
setStylesheet("", "random")
else if (randomsetting=="sessiononly"){ //if "sessiononly" setting
if (getCookie("mysheet_s")==null) //if "mysheet_s" session cookie is empty
document.cookie="mysheet_s="+setStylesheet("", "random")+"; path=/" //activate random alt stylesheet while remembering its "title" value
else
setStylesheet(getCookie("mysheet_s")) //just activate random alt stylesheet stored in cookie
}
else if (randomsetting.search(/^[1-9]+ days/i)!=-1){ //if "x days" setting
if (getCookie("mysheet_r")==null || parseInt(getCookie("mysheet_r_days"))!=parseInt(randomsetting)){ //if "mysheet_r" cookie is empty or admin has changed number of days to persist in "x days" variable
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting)) //activate random alt stylesheet while remembering its "title" value
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting)) //Also remember the number of days to persist per the "x days" variable
}
else
setStylesheet(getCookie("mysheet_r")) //just activate random alt stylesheet stored in cookie
} 
}

步骤二

将以下代码添加到网站上的 HEAD 部分,一般都是在header.php文件,必须添加到 HEAD 中的最后一项,否则会发生意想不到的问题。

<script src="https://cdn.jsdelivr.net/gh/wulaca/img@master/assets/js/styleswitch.js" type="text/javascript"></script>

上面js的路径可以修改成你自己的,也可直接引入使用。

步骤三

我博客使用两个CSS,分别主题自带的style.css和准备增加样式theme.css,主题默认为样式一,后者为样式二,将代码添加到网站上的 HEAD 部分,一般都是在header.php文件。值得注意的是title ="theme" 红色部分自定义,不可重复title内容。

<link rel="stylesheet" type="text/css" href="style.css" /> //一般都不需要引入默认CSS
<link rel="alternate stylesheet" type="text/css" media="screen" title ="theme" href="thmem.css" /> //修改成你的新样式CSS的路径

步骤四

添加切换界面,让用户自由切换样式,value="theme" 红色部分修改成title内容
演示:

1.单选按钮

<form id="switchform">
<input type="radio" name="choice" value="none" onClick="chooseStyle(this.value, 60)">默认样式<br />
<input type="radio " name="choice" value="theme" onClick="chooseStyle(this.value, 60)">样式二<br />
</form>

2.选择菜单

<form id="switchform">
<select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)">
<option value="none" selected=" selected">默认样式</option>
<option value="theme">样式二</option>
</select>
</form>

3.常规链接

<a href="javascript:chooseStyle('none', 60)" checked="checked">默认样式</a>
<a href="javascript:chooseStyle('theme', 60)">样式二</a>

至此结束,很简单,有什么问题下方评论,请自行美化样式选择界面,反正我很懒,直接插到小工具里了!

转载原创文章请注明,转载自: 阿恰博客 » 网站添加多种样式让用户自由切换
Not Comment Found