本文实例讲述了js实现input框文字动态变换显示效果。分享给大家供大家参考。具体如下:
这里演示js实现INPUT框中的特殊显示效果,一些文字慢慢交替显示,最终显示出完整的文字,需要显示的文字预先保存在数组中,依次调用显示,有意思吧。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.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程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月27日
2024年09月27日
- 纯音入心系列纯音乐《中央民族乐团-古筝传奇》1CD[MP3][253.1MB]
- 江玲.1989-这样你才爱我,是吗?【新作有声】【WAV+CUE】
- 郭美美.2010-我是郭美美【华纳】【WAV+CUE】
- 黄心懋1991-轻忧郁【滚石】【WAV+CUE】
- 群星.2000-大地金曲世纪回顾2CD【大地】【WAV+CUE】
- 王菲.1996-浮躁(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 群星.2022-传家电视剧原声带【东阳欢娱】【FLAC分轨】
- 《摇滚教父 伍佰黄金精选 2CD》 [WAV+CUE][1GB]
- 《凤凰传奇 我从草原来》[WAV/分轨][400MB]
- 《叶倩文 真心真意过一生》[WAV+CUE][400MB]
- 潘越云.1985-世间女子(滚石25周年经典复刻版)【滚石】【WAV+CUE】
- 陈柏宇.2009-CANT.BE.HALF【SONY】【WAV+CUE】
- 李明依.1989-小女生【滚石】【WAV+CUE】
- 《李荣浩 新时代创作新人王》[WAV分轨][310MB]
- 《黑鸭子与马头琴 史上最动听草原音乐》[WAV+CUE][320MB]