收藏本站 收藏本站
积木网首页 - 技术学院 - 软件测试 - 网站黄页 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

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

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

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

运行效果截图如下:

查看图片

在线演示地址如下:

http://demo.gimoo.net/js/2015/js-input-txt-rand-show-codes/

具体代码如下:

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

JS实现方向键切换输入框焦点的方法
本文实例讲述了JS实现方向键切换输入框焦点的方法。分享给大家供大家参考。具体如下:这里实现js方向键控制切换输入框焦点效果,不过无法兼容Fire

纯CSS3代码实现滑动开关效果
废话不多说了,炫下效果图并附上演示和源码下载。实现效果如下:查看演示源码下载HTML结构代码:CSS代码:/*表单开关样式*/.ui-switch{position:absolute;font

js实现文本框支持加减运算的方法
本文实例讲述了js实现文本框支持加减运算的方法。分享给大家供大家参考。具体如下:这是一个网页表单效果,让表单内的文本框支持加减运算,不过

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号