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


Posted in Javascript onAugust 19, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

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

Javascript 相关文章推荐
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
vue实现几秒后跳转新页面代码
Sep 09 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 #Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 #Javascript
easyui Droppable组件实现放置特效
Aug 19 #Javascript
js实现简单的联动菜单效果
Aug 19 #Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 #Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 #Javascript
easyui Draggable组件实现拖动效果
Aug 19 #Javascript
You might like
php在字符串中查找另一个字符串
2008/11/19 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
php实现文件上传基本验证
2020/03/04 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
浅析python参数的知识点
2018/12/10 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
python 常见的反爬虫策略
2020/09/27 Python
python中的测试框架
2020/11/13 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
上海某公司.net方向笔试题
2014/09/14 面试题
仓库门卫岗位职责
2013/12/22 职场文书
大学生新学期计划书
2014/04/28 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
先进事迹材料范文
2014/12/29 职场文书
技术负责人岗位职责
2015/02/10 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书