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 相关文章推荐
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
bootstrap table表格插件使用详解
May 08 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
纯JS实现简单的日历
Jun 26 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
详解TypeScript中的类型保护
Apr 29 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
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脚本过滤用户上传的图片
2015/07/03 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
华为慧通笔试题
2016/04/22 面试题
大专会计自我鉴定
2014/02/06 职场文书
英文自荐信常用句子
2014/03/26 职场文书
小学二年级评语
2014/04/21 职场文书
司法建议书范文
2014/05/13 职场文书
集中采购方案
2014/06/10 职场文书
三八活动策划方案
2014/08/17 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
工作一年自我鉴定
2019/06/20 职场文书
Oracle锁表解决方法的详细记录
2022/06/05 Oracle