Maison > interface Web > js tutoriel > Méthode JS pour acquérir des compétences effet de texte néon_javascript

Méthode JS pour acquérir des compétences effet de texte néon_javascript

WBOY
Libérer: 2016-05-16 15:46:37
original
1745 Les gens l'ont consulté

L'exemple de cet article décrit comment obtenir l'effet de texte néon avec JS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Ici, nous utilisons JS pour implémenter le code des effets spéciaux du texte néon sur la page Web. Jetez un œil à l'effet de course. Vous verrez que la couleur du texte est comme une lumière néon, changeant continuellement, colorée et éblouissante. c'est ce qu'on appelle le texte néon, vous pouvez également l'appeler effet de changement de couleur du texte.

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

Le code spécifique est le suivant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>霓虹灯</title>
</head>
<body>
<script>
var Tname="欢迎您的到来!";
var Tlen=Tname.length;
document.write("<div id='a' style='font-size:40px;'>"+Tname+"</div>");
var col=new Array("#FFCC00","#3333FF","#FFCC00","#FF0000","#FFCC00","#CC33FF");
var ic=0;
function Dcolor(){
 var Strname="";
 for (i=0;i<Tlen;++i){
  var Strname=Strname+"<font color="+col[ic]+">"+Tname.substring(i,i+1)+"</font>";
 ic=ic+1;
  if (ic==col.length) ic=0;
 }
 a.innerHTML=Strname;
 setTimeout("Dcolor()",200);
}
Dcolor();
</script>
<span class="style5"></span>
</body>
</html>

Copier après la connexion

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal