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 相关文章推荐
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 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
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
JS实现切换标签页效果实例代码
2013/11/01 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
Python 流程控制实例代码
2009/09/25 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
Python对象转换为json的方法步骤
2019/04/25 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
用Python 执行cmd命令
2020/12/18 Python
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
C语言笔试题
2014/09/04 面试题
岗位职责定义及内容
2013/11/08 职场文书
师范学院毕业生求职信范文
2013/12/26 职场文书
关于赌博的检讨书
2014/01/24 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
2015年试用期工作总结
2014/12/12 职场文书
加薪通知
2015/04/25 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书