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

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

1712 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.