快捷導(dǎo)航

js實(shí)現(xiàn)input框文字動(dòng)態(tài)變換顯示效果

更新時(shí)間：2015年08月19日 10:27:18 作者：企鵝

這篇文章主要介紹了js實(shí)現(xiàn)input框文字動(dòng)態(tài)變換顯示效果,涉及javascript隨機(jī)字符串與中文的動(dòng)態(tài)切換顯示效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(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] = "有沒(méi)有想過(guò)在頁(yè)面中不同地方出現(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)頁(yè)面向下滾動(dòng)，單擊鼠標(biāo)頁(yè)面停止?jié)L動(dòng)，很實(shí)用";
 this[5] = "鼠標(biāo)周圍的旋轉(zhuǎn)宣傳文字，又是一種很酷的效果，一定不可錯(cuò)過(guò)";
 this[6] = "所鼠標(biāo)放在鏈接上后在狀態(tài)欄顯示一大串的字符，可以用來(lái)隱藏鏈接.";
 this[7] = "在頁(yè)面上你用鼠標(biāo)選中什么，就會(huì)彈出警告框顯示選中的內(nèi)容";
 this[8] = "在頁(yè)面上點(diǎn)中鼠標(biāo)后隨意拖動(dòng)，會(huì)在頁(yè)面上顯示鼠標(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ì)有所幫助。

您可能感興趣的文章: