recherche

Maison  >  Article  >  interface Web  >  js réalise la transformation dynamique et l'effet d'affichage des compétences text_javascript de la zone de saisie

js réalise la transformation dynamique et l'effet d'affichage des compétences text_javascript de la zone de saisie

WBOY
WBOYoriginal
2016-05-16 15:44:231557parcourir

L'exemple de cet article décrit l'effet d'affichage de transformation dynamique du texte de la zone de saisie à l'aide de js. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Voici une démonstration de js implémentant l'effet d'affichage spécial dans la zone INPUT. Certains textes sont affichés lentement en alternance, et enfin le texte complet est affiché à l'avance dans un tableau, et l'affichage est appelé en séquence. C'est intéressant.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant : 

<!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>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Tutoriel de base Jquery sur le fonctionnement du DOMArticle suivant：Tutoriel de base Jquery sur le fonctionnement du DOM

Articles Liés

Voir plus