顯示具有 CSS、HTML 標籤的文章。 顯示所有文章
顯示具有 CSS、HTML 標籤的文章。 顯示所有文章

2008年9月1日 星期一

分析網址參數

假設我有一個網址如下:

http://mahdi0828.blogspot.com/search.html?p=1&arg=review&w=false

使用JavaScript內的函數location.search即可取得後面的參數部份

?p=1&arg=review&w=false

把"?"取代成"&"並再後面加一個"&"即變成

&p=1&arg=review&w=false&

以"&"+name+"="搜尋即可知道參數的位置(name為參數名稱)

下一個"="至下一個"&"之間就是參數的值


S1="&"+location.search.substring(1)+"&";

a=S1.search("&"+name+"=")+1; //name是參數名稱

arg=S1.substring(a+S1.substring(a).search("=")+1,a+S1.substring(a).search("&"));



##CONTINUE##

來舉例一下

<script language="javascript">

max=10;
S1="&"+location.search.substring(1)+"&";

if(S1=="&&") { S1="&p=1&"; }

a=S1.search("&"+"p"+"=")+1;
arg=S1.substring(a+S1.substring(a).search("=")+1,a+S1.substring(a).search("&"));

href=location.href.substring(0,location.href.search(location.search.substring(1))-1);

document.write("這是第"+arg+"頁");

if(parseInt(arg)!=1) { document.write("[上一頁]"); }

if(parseInt(arg)!=max) { document.write("[下一頁]"); }

</script>


結果展示

http://alumni.ee.ccu.edu.tw/~hayden0828/example/argument.htm


JS字串處理真的是很強大(看看西佳佳...唉~)

2008年4月24日 星期四

網誌背景日夜交替

研究了好久終於成功了!!

搞這個script搞了一整天,明明只有短短的幾行而已= =。

##CONTINUE##

眼尖的網友應該有發現早上和晚上的背景會不一樣
就是這個的元素的功能!!



把下面這個CODE貼在JAVAScript的網頁元素內就可以了


<!-- title背景日夜切換 start-->
<script language="JavaScript">

Stamp = new Date();

var Hours;
//var Minute;
//var Second;

//取得時間資料
Hours = Stamp.getHours();

//CSS抬頭
document.write('<style type="text/css">');

//判斷日夜
if (Hours >= 6 && Hours < 18)
{
//載入晝背景圖片
document.write('#header-inner {background: url("http://sites.google.com/site/hayden0828/blog/index_d.jpg") right 50%;}');
}
else
{
//載入夜背景圖片
document.write('#header-inner {background: url("http://sites.google.com/site/hayden0828/blog/index_n.jpg") right 50%;}');
}

document.write('</style>');

</script>
<!-- title背景日夜切換 end-->


我其實完全對JAVA外行,
程式碼也是參考很多範例而隨意拼湊出來的。
其實應該對毛玻璃上字的顏色也要同時作變色才對。

至於怎麼製作毛玻璃的效果能參考這篇


如果有更好的寫法希望能告訴我。

2008年4月22日 星期二

毛玻璃遮罩實驗

現在看到的佈景是在測試毛玻璃的效果。

之前找了很多把背景變成透明的方法,不過都不是我想要的。


filter:alpha(opacity=50); /* for IE */

opacity:0.5; /* CSS3 standard */

-moz-opacity:0.5;/* for Mozilla, Firefox */


上面是CSS的半透明語法,不過它會連內容文字和圖片都變成透明的。
之後有發現套用透明的GIF檔來達成目的,不過效果也不是很好。
後來乾脆自己再製一張毛玻璃的,直接套用到outer-wrapper上。
本來以為除了霧化之外還要作一些對齊的工作,結果發現完全不用,直接套用上去就好了。

兩張圖加起來快2M,真是辛苦大家了(鞠躬)。

原圖
http://alumni.ee.ccu.edu.tw/~hayden0828/biodome1600.jpg

霧化後
http://alumni.ee.ccu.edu.tw/~hayden0828/biodome1600_glass.jpg