分時段切換CSS
作者:Admin 日期:2008-07-02
一個網站能切換不同的CSS風格大家應該都瞭解,像眾所周知的騰訊在今年改版時也增加了切換皮膚的功能。 大家可以先看一下這兩個網站:
http://www.katgal.com
http://www.leemunroe.com/ 上面的這兩個網站就是根據時間自動調整站點風格,其實這種根據時間自動調整站點風格也不是什麼新鮮事了,記得好久以前也見過類似的文章或方法,只不過當時沒有特別注意。 下面說一下它們的實現方法,目前網上有這樣兩種實現方法:
1、採用服務端的代碼
ASP版本:
程序代碼
PHP版本:
程序代碼
2、採用JavaScript代碼
程序代碼
考慮到使用者端可能不支持或者禁止JavaScript,需要設置一種默認的CSS。
![程序代碼](http://www.wowbox.com.tw/blog/images/code.gif)
<link rel="stylesheet" type="text/css" href=" <% if hour(now)<12 then response.write "morning.css" elseif hour(now)<17 then response.write "day.css" else response.write "night.css" end if %> "/>
![程序代碼](http://www.wowbox.com.tw/blog/images/code.gif)
<link rel="stylesheet" type="text/css" href=" <?php $hour = date(」H」); if($hour < 12) echo 'morning.css'; else if($hour < 17) echo 'day.css'; else echo 'night.css'; ?> " />
![程序代碼](http://www.wowbox.com.tw/blog/images/code.gif)
<script type="text/javascript"> <!-- function getCSS(){ datetoday = new Date(); timenow=datetoday.getTime(); datetoday.setTime(timenow); thehour = datetoday.getHours(); if (thehour<12) display = "morning.css"; else if (thehour<17) display = "day.css"; else display = "night.css"; //(...想要更多再加即可...) var css = '<'; css+='link rel="stylesheet" href='+display+' //'; css+='>'; document.write(css); } --> </script>