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的超简单上下翻
Apr 20 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
常用jQuery选择器总结
Jul 11 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
gulp安装以及打包合并的方法教程
Nov 19 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
vue实现引入本地json的方法分析
Jul 12 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
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
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
Python实现简单的代理服务器
2015/07/25 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
python logging设置level失败的解决方法
2020/02/19 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
超市促销实习自我鉴定
2013/09/23 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
Python中常见的导入方式总结
2021/05/06 Python