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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
js转义字符介绍
Nov 05 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
ES2020 新特性(种草)
Jan 12 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中session过期时间设置及session回收机制介绍
2014/05/05 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
js获取页面description的方法
2015/05/21 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
详解JS数值Number类型
2018/02/07 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
用Python编写一个国际象棋AI程序
2014/11/28 Python
用python处理MS Word的实例讲解
2018/05/08 Python
Python 3.8 新功能全解
2019/07/25 Python
Tensorflow 多线程设置方式
2020/02/06 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
档案室主任岗位职责
2014/02/12 职场文书
幼儿园个人总结
2015/02/28 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
大学生求职意向书
2015/05/11 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技