js实现input框文字动态变换显示效果
本文实例讲述了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">
<!-- 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 动态文字滚动的例子
复制代码 代码如下: <!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> <title>这是一个动态Java
-
javascript实现的动态文字变换
实现文字渐淡显示的效果代码如下: <html> <head> <script> <!-- function HelpArray(len){this.length=len } HelpText= new HelpArray(5) HelpText[0]="视点闪客" HelpText[1]="智慧无边" HelpText[2]="魅力无限" HelpText[3]="十二亿中国人的
-
基于jQuery实现文字打印动态效果
本文实例为大家分享了jQuery实现文字打印动态效果的具体代码,供大家参考,具体内容如下 主体html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>打印文字效果</title> <script type="text/javascript" src="js/jquery-3.2.1.min.js"
-
javascript实现状态栏中文字动态显示的方法
本文实例讲述了javascript实现状态栏中文字动态显示的方法.分享给大家供大家参考,具体如下: <script> var child = window.open("information.html","_blank","width=200,height=200,toolbar=no"); function closeChild(){ if(!child.closed){ child.close(); } } //设置间隔1秒钟,调
-
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
本文实例讲述了jQuery实现的动态文字变化输出效果.分享给大家供大家参考,具体如下: 演示效果图如下: 1.完整实例代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Typ
-
js实现input框文字动态变换显示效果
本文实例讲述了js实现input框文字动态变换显示效果.分享给大家供大家参考.具体如下: 这里演示js实现INPUT框中的特殊显示效果,一些文字慢慢交替显示,最终显示出完整的文字,需要显示的文字预先保存在数组中,依次调用显示,有意思吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-txt-rand-show-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
-
JS实现搜索框文字可删除功能
废话不多说了,直接给大家贴js搜索框文字可删除功能,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS实现搜索框文字可删除</title> <style> *:focus {outline: none; } body {width: 400px;margin: 100px auto;} #topsearch {
-
PHP页面输出时js设置input框的选中值
关于php页面输出时js设置input框的选中值的代码如下所示: /* 设置表单的值 */ function setValue(name, value) { var first = name.substr(0, 1), input, i = 0, val; if (value === "") return; if ("#" === first || "." === first) { input = $(name); } else { input
-
js控制input框只读实现示例
复制代码 代码如下: <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content="
-
js 将input框中的输入自动转化成半角大写（税号输入框）
这两天出了这么一个需求,输入税号的时候,需要自动将其转化为半角大写,并且阻止标点符号中文汉字的输入.(下面会有:全半角转换.文本框选中.光标位置判断.设置光标位置 这些内容) 然后我就开始了慢慢查找资料之路. 首先查了全半角的区别以及如何转化. var str = "中文;:a"; for (var i = 0; i < str.length; i++) { if (str[i].match(/[\u0000-\u00ff]/)) { console.log("半角字符
-
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
本文实例讲述了JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果.分享给大家供大家参考,具体如下: 思路: 1.首先用把密码框用txt暂时替代,并赋上默认值 <input type="text" value="请输入密码" /> 2.当文本框获取焦点后,把默认值清空,把type改为password. 3.当文本框失去焦点后,把type改为txt,把默认值设为"请输入密码". JS代码: window.onload=functi
-
js实现选中复选框文字变色的方法
本文实例讲述了js实现选中复选框文字变色的方法.分享给大家供大家参考.具体如下: 这里实现选中复选框时,文字加上一个背景色,变通一下,还是很有用的. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-checkbox-cha-font-color-codes/ 具体代码如下: <html> <head> <title>选中复选框文字变色</title> <style> .checkbox {
-
js实现input密码框提示信息的方法(附html5实现方法)
本文实例讲述了js实现input密码框提示信息的方法.分享给大家供大家参考,具体如下: 今天我们主管说要在密码框加入个"请输入密码"的提示信息,第一次的时候本来想着用修改input type 属性的方法呢,结果有某些特别的浏览器不支持,IE的input的type属性是只读的,不能动态设置.所以换其它的方法,实例如下: <input type="text" onfocus="changeTip(this);" id="passTe
-
js显示文本框提示文字的方法
本文实例讲述了js显示文本框提示文字的方法.分享给大家供大家参考.具体实现方法如下: <!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"> <
-
修改js confirm alert 提示框文字的简单实例
修改js confirm alert 提示框文字的简单实例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style> *{padding: 0; margin: 0;} html{ height: 100%; } body{ font-size: 16px; font-family: "Microsoft Yahe