js實(shí)現(xiàn)input框文字動(dòng)態(tài)變換顯示效果
本文實(shí)例講述了js實(shí)現(xiàn)input框文字動(dòng)態(tài)變換顯示效果。分享給大家供大家參考。具體如下:
這里演示js實(shí)現(xiàn)INPUT框中的特殊顯示效果,一些文字慢慢交替顯示,最終顯示出完整的文字,需要顯示的文字預(yù)先保存在數(shù)組中,依次調(diào)用顯示,有意思吧。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/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"> <!-- Begin var quoteStr; var quoteNum; var quoteDis; var quoteLen; var quoteLoc; var quotePic; var quoteMax; var numQuote; function funcQuote() { this[0] = "有沒有想過在頁面中不同地方出現(xiàn)不同的鼠標(biāo)形狀,這個(gè)就是了"; this[1] = "鼠標(biāo)上出現(xiàn)蜘蛛網(wǎng)一樣的東東,放到文字鏈接上后會(huì)出現(xiàn)變化"; this[2] = "鼠標(biāo)上面的晃動(dòng)小球,效果非常新穎,你一定會(huì)喜歡的,酷極了"; this[3] = "鼠標(biāo)右鍵入的彈出導(dǎo)航條,導(dǎo)航條上有背景變化,很有新意的,酷"; this[4] = "雙擊鼠標(biāo)頁面向下滾動(dòng),單擊鼠標(biāo)頁面停止?jié)L動(dòng),很實(shí)用"; this[5] = "鼠標(biāo)周圍的旋轉(zhuǎn)宣傳文字,又是一種很酷的效果,一定不可錯(cuò)過"; this[6] = "所鼠標(biāo)放在鏈接上后在狀態(tài)欄顯示一大串的字符,可以用來隱藏鏈接."; this[7] = "在頁面上你用鼠標(biāo)選中什么,就會(huì)彈出警告框顯示選中的內(nèi)容"; this[8] = "在頁面上點(diǎn)中鼠標(biāo)后隨意拖動(dòng),會(huì)在頁面上顯示鼠標(biāo)運(yùn)動(dòng)的軌跡"; this[9] = "圍著鼠標(biāo)一圈的宣傳文字,隨鼠標(biāo)移動(dòng),并且自身也在旋轉(zhuǎn),酷"; this[10] = "跟隨鼠標(biāo)的半透明圖片,看上去可是很酷的,可以做陰影效果."; } 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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS實(shí)現(xiàn)判斷有效的數(shù)獨(dú)算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)判斷有效的數(shù)獨(dú)算法,結(jié)合實(shí)例形式分析了javascript數(shù)獨(dú)判斷的原理及相關(guān)算法實(shí)現(xiàn)、使用操作技巧,需要的朋友可以參考下2019-02-02詳解ES6新增字符串?dāng)U張方法includes()、startsWith()、endsWith()
這篇文章主要介紹了詳解ES6新增字符串?dāng)U張方法includes()、startsWith()、endsWith(),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05bootstrap動(dòng)態(tài)調(diào)用select下拉框的實(shí)例代碼
今天小編就為大家分享一篇bootstrap動(dòng)態(tài)調(diào)用select下拉框的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08js實(shí)現(xiàn)點(diǎn)擊復(fù)制當(dāng)前文本到剪貼板功能(兼容所有瀏覽器)
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊復(fù)制當(dāng)前文本到剪貼板功能,兼容所有瀏覽器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-12-12一個(gè)簡(jiǎn)單的Node.js異步操作管理器分享
這篇文章主要介紹了一個(gè)簡(jiǎn)單的Node.js異步操作管理器分享,需要的朋友可以參考下2014-04-04