JavaScript实现Input框文字动态交替显示效果
作者:函数茶馆时间:2026-10-29 14:00:50浏览:559
本文介绍如何使用JavaScript实现Input输入框内文字的动态交替显示效果。通过预定义文字数组并依次调用显示,实现文字逐步完整呈现的视觉体验。包含完整HTML与JS代码示例及在线演示地址,适用于前端交互设计参考。
JavaScript实现Input框文字动态交替显示效果
本文通过具体实例,讲解如何利用JavaScript实现Input输入框中文字的动态变换显示效果。
该示例展示了在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">
<!-- Begin
var 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程序设计有所帮助。
作者最新文章
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
