本文實例講述了js實現input框文字動態變換顯示效果。分享給大家供大家參考。具體如下：
這里演示js實現INPUT框中的特殊顯示效果，一些文字慢慢交替顯示，最終顯示出完整的文字，需要顯示的文字預先保存在數組中，依次調用顯示，有意思吧。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-input-txt-rand-show-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>input文字特殊顯示</title></head><body bgcolor="#ffffff" onLoad="startQuote();"><SCRIPT LANGUAGE="JavaScript"><!-- Beginvar quoteStr;var quoteNum;var quoteDis;var quoteLen;var quoteLoc;var quotePic;var quoteMax;var numQuote;function funcQuote() { this[0] = "有沒有想過在頁面中不同地方出現不同的鼠標形狀，這個就是了"; this[1] = "鼠標上出現蜘蛛網一樣的東東，放到文字鏈接上后會出現變化"; this[2] = "鼠標上面的晃動小球，效果非常新穎，你一定會喜歡的，酷極了"; this[3] = "鼠標右鍵入的彈出導航條，導航條上有背景變化，很有新意的，酷"; this[4] = "雙擊鼠標頁面向下滾動，單擊鼠標頁面停止滾動，很實用"; this[5] = "鼠標周圍的旋轉宣傳文字，又是一種很酷的效果，一定不可錯過"; this[6] = "所鼠標放在鏈接上后在狀態欄顯示一大串的字符，可以用來隱藏鏈接."; this[7] = "在頁面上你用鼠標選中什么，就會彈出警告框顯示選中的內容"; this[8] = "在頁面上點中鼠標后隨意拖動，會在頁面上顯示鼠標運動的軌跡"; this[9] = "圍著鼠標一圈的宣傳文字，隨鼠標移動，并且自身也在旋轉，酷"; this[10] = "跟隨鼠標的半透明圖片，看上去可是很酷的，可以做陰影效果.";}function getQuote() { quoteLen = 0; quoteLoc = 0; quoteNum = Math.floor(Math.random() * numQuote); quoteStr = makeQuote[quoteNum]; quoteLen = quoteStr.length; padQuote();}function disQuote() { quoteLoc = quoteLoc + 1; if (quoteLoc > quoteMax) { getQuote(); } quoteDis = quoteStr.substring(0, quoteLoc); for (var i = quoteLoc; i < quoteMax; i++){ var charone; charone = quoteStr.substring(i, i + 1); var rdnum; rdnum = Math.floor(Math.random() * 57) if (charone != " "){ quoteDis = "" + quoteDis + quotePic.substring(rdnum, rdnum + 1); } else { quoteDis = "" + quoteDis + " "; } }}function padQuote () { var spacePad = quoteMax - quoteStr.length; var frontPad = Math.floor(spacePad / 2); for (var i = 0; i < frontPad; i++) { quoteStr = " " + quoteStr; } for (var i = quoteStr.length; i < quoteMax; i++) { quoteStr= "" + quoteStr + " "; }}function loopQuote() { document.RandomText.box1.value=quoteDis; disQuote(); setTimeout ("loopQuote();", 100);}function startQuote() { quoteStr = ""; quoteNum = 0; quoteDis = ""; quoteLen = 0; quoteLoc = 0; quotePic = "abcdefghjkmnopqrstuvwxyzABCEDEFGHJKLMNOPQRSTUVXYZ234567890"; quoteMax = 50; numQuote = 11; makeQuote = new funcQuote(); getQuote(); disQuote(); loopQuote();}// End --></script><form name="RandomText"><input type="text" size="70" name="box1"></form></body></html>希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
