Thaimisc.com : ทำเมนูสุ่มเลือกโดยใช้ option และ combo
ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us | Colocation | Web Hosting | เปิดร้านค้าฟรี


Category : Today's Tips Print Article Only Print Aticle With Comment
ทำเมนูสุ่มเลือกโดยใช้ option และ combo
เขียนโดย Poj , 09-10-2007
ทำเมนูสุ่มเลือกโดยใช้ option และ combo โดยเมื่อคลิกปุ่ม Random ก็จะเป็นการสุ่มเลือกเมนู เมื่อเลือกได้แล้วก็จะ Redirect ไปที่ Url นั้นๆ ดูตัวอย่างได้ ที่นี่ ครับ

1.นำโค้ดส่วนนี้ไปใส่ไว้ใน <head>....</head> ครับ

<script type="text/javascript">

/***********************************************
* Animated Random Option Combo- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/

var animatedList={

navigate:function(selectId){
this.selectObj=document.getElementById(selectId)
window.location=this.selectObj[this.selectObj.selectedIndex].value
},

randomizeInit:function(selectId){
this.selectObj=document.getElementById(selectId)
this.curframe=0
this.optionscount=this.selectObj.options.length
//calculate number of frames to animate (cycle through options before settling on one)
this.maxframes=Math.floor(Math.random()*this.optionscount)+Math.floor(Math.random()*this.optionscount)
this.randomize()
},

randomize:function(){
if (this.curframe<this.maxframes)
this.selectObj.selectedIndex=this.settledIndex=(this.curframe<this.optionscount)? this.curframe : this.curframe-this.optionscount
else{ //settle on and select this option
this.selectObj.selectedIndex=(this.selectObj.selectedIndex==-1)? this.settledIndex : -1
}
this.curframe++
if (this.curframe<this.maxframes+4) //Keep running this function until "maxframes" cycle plus 4 (4 being cycle for highlighting selected option)
setTimeout("animatedList.randomize()", 100)
else
window.location=this.selectObj[this.selectObj.selectedIndex].value
}

}

</script>



2.นำโค้ดส่วนนี้ไปใส่ไว้ใน <body>....</body> ครับ

<form>
<select id="webdevlinks" size="6" onChange="animatedList.navigate('webdevlinks')">
<option value="http://www.thaimisc.com">Thaimisc</option>
<option value="http://www.bbznet.com">BBZnet</option>
<option value="http://www.be2hand.com">Be2hand</option>
<option value="http://www.o2blog.com">O2blog</option>
<option value="http://www.pukpik.com":>Pukpik</option>
</select><br />
<input type="button" onClick="animatedList.randomizeInit('webdevlinks')" value="Random Link!" />
</form>

<form>
<select id="newslinks" size="1" onChange="animatedList.navigate('newslinks')">
<option value="http://www.thaimisc.com">Thaimisc</option>
<option value="http://www.bbznet.com">BBZnet</option>
<option value="http://www.be2hand.com">Be2hand</option>
<option value="http://www.o2blog.com">O2blog</option>
</select> <input type="button" onClick="animatedList.navigate('newslinks')" value="Go" /> <input type="button" onClick="animatedList.randomizeInit('newslinks')" value="Random" />
</form>



Credit : javascriptkit
<- Back | Next ->

ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us
Copyright 1999-2006 Thailand Miscellaneous. Allrights reserved. webmaster@thaimisc.com