不少網友發E-mail問我
怎麼每次去你的主頁
看到的圖片都不一樣
難道你時時刻刻都在更換圖片嗎?
天啊
我哪有那麼多錢支付電話費?我只不過用了JavaScript的小技巧做了個
隨機圖片
而已
其HTML源代碼為
< !隨機圖片開始 >
< script language=″JavaScript″ >
< !--
imglink=new Date();
var thisimg=″
jpg″;
if(imglink
getSeconds()<
){var thisimg=″
jpg″;}
if(imglink
getSeconds()<
){var thisimg=″
jpg″;}
if(imglink
getSeconds()<
){var thisimg=″
jpg″;}
if(imglink
getSeconds()<
){var thisimg=″
jpg″;}
if(imglink
getSeconds()<
){var thisimg=″
jpg″;}
if(imglink
getSeconds()<
){var thisimg=″
jpg″;}
if(imglink
getSeconds()<
){var thisimg=″
jpg″;}
document
write(″< img src=″+thisimg+″ border=
alt=″每次打開本頁
看到的圖片都不同!″ >″);
//-- >
< /script >
< !隨機圖片結束 >
在這個例子中
設置了
張圖片
與網頁放置於同一目錄下
當浏覽器打開此網頁時
立即從電腦裡讀取時間
並根據秒數的不同選擇不同的圖片
我們也常常埋怨在網頁裡插入的圖片與網頁背景不能很好地融合在一起
如果圖片周圍有一圈朦胧的過渡色該多好!用Photoshop制作圖片當然能實現這個效果
其實還有更好的辦法
在網頁中用 CSS 濾鏡來實現!
< p style=″line-height:
pt;filter:Glow
(Color=#FFFFFF
Strength=
);height:auto;position:relative;padding:
pt″ >
< img src=″
jpg″ border=
>
< /p >
其中
Color=#FFFFFF
是定義陰影的顏色
Strength=
是定義陰影寬度
怎麼樣
圖片是不是有了
月朦胧
鳥朦胧
的感覺?
如果你不喜歡
溫馨浪漫
的主頁類型
這裡還有一款
魔幻豪放
派的——
在< head >< /head >中加入以下內容
< !開始定義變色函數 >
< script language=″JavaScript″ >
< !--hide
function RandomNumber(max) //定義隨機函數
{var today=new Date();
var num=Math
round((Math
abs(Math
sin(today
getTime()))*
))%max+
;return num;}
function makearray(n)
{this
length=
;for(var i=
;i< n;i++)this[i]=
;return this;}function changecolor()
{clearTimeout();
linkarray=new makearray(
); //用linkarray數組定義十種常用顏色
linkarray[
]=″#ff
″;
linkarray[
]=″#ffff
″;
linkarray[
]=″#
ff
″;
linkarray[
]=″#
ff″;
linkarray[
]=″#
ff″;
linkarray[
]=″#ff
ff″;
linkarray[
]=″#
″;
linkarray[
]=″#
″;
linkarray[
]=″#ff
″;
linkarray[
]=″#ff
″;
document
bgColor=(linkarray[RandomNumber(
)]); //利用隨機函數從十種顏色中任選一種作為網頁背景色
setTimeout(″changecolor()″
); //設置時鐘
讓背景色每秒變換一次
return;}
//-- >
< /script >
< !定義變色函數結束 >
然後在中調用changecolor()函數即可
< body OnLoad=″javascript:changecolor()″ >
網頁背景顏色每秒鐘變換一次
夠酷吧?
如果把
document
bgColor=(linkarray[RandomNumber(
)]);
一句中的
bgColor
換成
fgColor
也能實現網頁文字不斷地變色
此外
你也可以自己定義變色的時間周期
改變
setTimeout(″changecolor()″
);
中的
即可
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19768.html