網(wǎng)頁(yè)按鈕使用的各種代碼

1、網(wǎng)頁(yè)按鈕使用的各種代碼 - 按鈕總的來(lái)說是WINDOWIN中最學(xué)用的也是最基本的一種控制部件，比如在各種編程語(yǔ)言中及應(yīng)用程序中都少不了按鈕的參與，在網(wǎng)頁(yè)設(shè)計(jì)中也是如此，通過按鈕可以完成很多任務(wù)，以下將全面講解按鈕使用技巧及應(yīng)用實(shí)例。 - 一、按鈕的基本使用 - 一般的可視性網(wǎng)頁(yè)制作工具中，都有方便的按鈕填加工具，可直接在網(wǎng)頁(yè)的合適位置填加按鈕，如果你使用手工的網(wǎng)頁(yè)制作方法，那么可用下面的源代碼制作按鈕，其中onclick決定按下按鈕的動(dòng)作： < form method="POST" > < p >< input type="butto

2、n" name="B1" value= "按鈕" >< /p > onclick > < /p > < /form > - 如果只使用單獨(dú)的按鈕，那么可省略form標(biāo)簽，只使用單純的按鈕代碼，將節(jié)省按鈕所占的網(wǎng)頁(yè)空間： < p >< input type="button" name="B1" value= "按鈕" >< /p > onclick > < /p > - 二、按鈕的前景與

3、背景控制 - 絕大多數(shù)的人使用按鈕時(shí)，都直接使用缺省的灰白色按鈕有黑色的文字說明，其實(shí)按鈕的背景和前景是可以隨意改變的，請(qǐng)看下面的代碼： < form name="highlight" > < p align="center" >< input type= "button" value="變色按鈕" style="background-color: rgb(255,0,0); color: rgb(255,2550,0)" onclick > < /p

4、> < /form > - 其中background-color控制背景色，color按鈕前景色； - 三、按鈕的圖片背景 - 按鈕不僅可以修改前景色和背景顏色，而且可以使用圖片背景，下面的代碼分別演示了固定的背景圖片效果和動(dòng)態(tài)的圖片背景效果，動(dòng)態(tài)的效果即在鼠標(biāo)放到按鈕上時(shí)，按鈕的背景是另外一種圖像背景，而鼠標(biāo)離開時(shí)則恢復(fù)原來(lái)的圖片背景，下面代碼中的mainbb1.jpg和mainbb2.jpg 分別為兩個(gè)圖像文件： < script > < !- if (document.images) after=new Image() after.src="

5、mainbb1.jpg" function change2(image) var el=event.srcElement if (el.tagName="INPUT"&&el.type="button") event.srcElement.style.backgroundImage= "url"+"('"+image+"')" /- > < /script > < form onmouseover="change2(&#

6、39;mainbb1.jpg')" onmouseout="change2('mainbb2.jpg')" > < p align="center" >< input type=" button" name="frme2" value="變化背景" style="background-color: rgb(192,192,192); FONT-FAMILY: 宋體; FONT-SIZE: 12pt;background-imag

7、e: url('mainbb2.jpg')" class="initial" onclick="(h1.htm')" < br > < input type="submit" name="B1" value="固定背景" style="FONT-SIZE: 12pt; background-image: url('mainbb1.jpg')" >< /p > < /form >

8、- 四、按鈕字號(hào)和字型控制 - 按鈕上顯示的文字也可以隨意改變風(fēng)格，可以設(shè)置字體的字型和字號(hào)，請(qǐng)看以下代碼： < form name="highlight" > < p align="center" > < input type="button" value="變化字號(hào)" style="background-color: rgb(192,192,192); FONT-FAMILY: 宋體; FONT-SIZE: 9pt" color: rgb(255,2550,0)

9、"); onclick > < input type="button" value="變化字號(hào)" style="background-color: rgb(192,192,192); FONT-FAMILY: 宋體; FONT-SIZE: 12pt" color: rgb(255,2550,0)"); onclick > < /p > < /form > - 五、按鈕鼠標(biāo)移動(dòng)變色 - 上面已經(jīng)介紹了按鈕的顏色控制方法，加上鼠標(biāo)事件的參與即可實(shí)現(xiàn)鼠標(biāo)移動(dòng)變色，下面是完整的代碼

10、： < html > < head > < meta http-equiv="Content-Type" content="text/html; charset=gb_2312-80" > < meta name="GENERATOR" content= "Microsoft FrontPage Express 2.0" > < title >變色按鈕< /title > < style > .bigChange color:blu

11、e; font-weight:bolder; font-size:175%;letter-spacing:4px; text-transform: uppercase; background:yellow .start color:ff0000; background:c8ff4e .over color:ffff00; background:0000ff < /style > < /head > < body bgcolor="#83E09C" > < p > < script language="JAVAS

12、CRIPT" > function highlightButton(s) if ("INPUT"=event.srcElement.tagName) event.srcElement.className=s < /script > < /p > < form name="highlight" onmouseover= "highlightButton('start')" onmouseout="highlightButton('over')&quo

13、t; > < p align="center" >< input type= "button" value="變色按鈕"); onclick > < /p > < /form > < /body > < /html > - 六、鼠標(biāo)移動(dòng)按鈕變字號(hào) - 利用同樣的方法，也可以使按鈕在鼠標(biāo)移動(dòng)時(shí)變換字號(hào)，其實(shí)字號(hào)的變化也引起了按鈕尺寸的變化，這一效果能夠引起游覽者的注意力，當(dāng)然也可以合起來(lái)使字號(hào)和顏色同時(shí)發(fā)生變化： < html > < hea

14、d > < meta http-equiv="Content-Type" content="text/html; charset=gb_2312-80" > < title >變號(hào)按鈕< /title > < style > .bigChange color:blue; letter-spacing:4px; text-transform: uppercase; background:yellow .start font-size:12pt .over font-size:9pt < /styl

15、e > < /head > < body bgcolor="#83E09C" > < script language="JAVASCRIPT" > function highlightButton(s) if ("INPUT"=event.srcElement.tagName) event.srcElement.className=s < /script > < form name="highlight" onmouseover= "highli

16、ghtButton('start')" onmouseout="highlightButton('over')" > < p align="center" >< input type= "button" value="變號(hào)按鈕"); onclick > < /p > < /form > < /body > < /html > - 七、按鈕上顯示時(shí)鐘 - 按鈕上顯示的信息不僅可以事先定義成固定的字符

17、串，而且可以隨時(shí)更改，當(dāng)然你也可以把一些動(dòng)態(tài)的信息送到按鈕上，下面是在按鈕上顯示走動(dòng)的時(shí)鐘的例子，效果非常好： < script LANGUAGE="JavaScript" > day = new Date(); miVisit = day.getTime(); function clock() dayTwo = new Date(); hrNow = dayTwo.getHours(); mnNow = dayTwo.getMinutes(); scNow = dayTwo.getSeconds(); miNow = dayTwo.getTime(); if

18、(hrNow = 0) hour = 12;ap = " AM" else if(hrNow < = 11) ap = " AM"hour = hrNow; else if(hrNow = 12) ap = " PM"hour = 12; else if (hrNow >= 13) hour = (hrNow - 12);ap = " PM" if (hrNow >= 13) hour = hrNow - 12; if (mnNow < = 9) min = "0" +

19、mnNow; else (min = mnNow) if (scNow < = 9) secs = "0" + scNow; else secs = scNow; time = hour + ":" + min + ":" + secs + ap; document.form.button.value = time; self.status = time; setTimeout('clock()', 1000); document.write("< form name="form&quo

20、t; >" + "< input type=button value="Click for info!"" + " name=button >< /form >"); onError = null; clock(); < /script > - 八、按鈕控制顯示源文件 - 為了方便別人學(xué)習(xí)你的網(wǎng)頁(yè)設(shè)計(jì)方法，在主頁(yè)上放置一個(gè)按鈕，按下該按鈕后即自動(dòng)顯示源文件，是不是非常實(shí)用？代碼如下，放到主頁(yè)的正文區(qū)： < form method="POST" > &l

21、t; p align="center" >< input type= "button" name="B1" value="顯示源文件" onclick="window.location=" view-source:" +window.location.href" > < /p > < /form > - 九、按鈕鏈接站點(diǎn) - 這是按鈕的一種最簡(jiǎn)單使用方法，按下按鈕后轉(zhuǎn)到一個(gè)站點(diǎn)： < form > < p >&

22、lt; input type="button" value="進(jìn)入本站 > > >" onclick="parent.location='http: /'" >< /p > < /form > - 十、按鈕改變頁(yè)面背景 - 通過按鈕可以實(shí)時(shí)修改頁(yè)面的顏色，如果讓其自動(dòng)在兩種顏色之間快速切換背景顏色，就形成了閃爍效果，下面的代碼設(shè)置了兩個(gè)按鈕，分別演示修改背景和閃爍效果，代碼放到主頁(yè)的正文區(qū)： < form > < p >< input typ

23、e="button" value="背景色變換" onclick="BgButton()" >< /p > < /form > < script >function BgButton() if (document.bgColor='#00ffff') document.bgColor='#ffffff' elsedocument.bgColor='#00ffff' < /script > < FORM >< INPU

24、T TYPE="BUTTON" VALUE="閃爍" onClick="blinkit(self)" >< /FORM > < SCRIPT LANGUAGE="JavaScript" > function blinkOn() theWin.document.bgColor = "0000ff" nTimes+ JSCTimeOutID = window.setTimeout ("blinkOff()",50); function blinkOf

25、f() theWin.document.bgColor = "FFFFFF" if (nTimes < 3) JSCTimeOutID = window.setTimeout("blinkOn()",50); else theWin.history.go(0) function blinkit(aWin) nTimes = 0 theWin = aWin JSCTimeOutID = window.setTimeout("blinkOn()",50); < /SCRIPT > - 十一、按鈕刷新頁(yè)面 - 盡管瀏覽器上

26、都有刷新按鈕，但在主頁(yè)中設(shè)置上則顯得頁(yè)面更為完善，尤其是那些經(jīng)常需要刷新的場(chǎng)合，實(shí)現(xiàn)刷新有兩種方法，代碼分別如下，請(qǐng)放到主頁(yè)的正文區(qū)： 代碼一： < form > < p >< input type="button" value="刷新按鈕" onclick="history.go(0)" > < /p > < /form > 代碼二： < form > < p >< input type="button" value=&qu

27、ot;刷新按鈕一" onclick="ReloadButton()" >< /p > < /form > < script language="JavaScript" >< !- function ReloadButton()location.href="該網(wǎng)頁(yè)文件" / - >< /script > - 十二、滾屏按鈕 - 按下按鈕后，屏幕內(nèi)容開始向上滾動(dòng)，代碼如下，但一頁(yè)長(zhǎng)度必須超出一屏，否則將看不到滾動(dòng)效果： < form > < di

28、v align="center" > < center >< p >< input type="button" value= "向下滾屏" onClick="scrollit()" > < /p > < /center >< /div > < /form > < script Language="JavaScript" > < !- function scrollit() for (I=1; I< =500; I+) parent.scroll(1,I) /- > < /script > - 十三、加入書簽按鈕 - 利用文字鏈接也