js实现input框文字动态变换显示效果

时间：2021-05-26

本文实例讲述了js实现input框文字动态变换显示效果。分享给大家供大家参考。具体如下：

这里演示js实现INPUT框中的特殊显示效果，一些文字慢慢交替显示，最终显示出完整的文字，需要显示的文字预先保存在数组中，依次调用显示，有意思吧。

运行效果截图如下：

在线演示地址如下：

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"><!-- 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程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章