Cet article décrit la méthode d'implémentation de plusieurs effets spéciaux JavaScript dans la même page Web. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
De manière générale, si la balise <script type = "text / javascript"> </ script> apparaît deux fois, tous les scripts JavaScript ne reviendront pas en vigueur, et seulement une fois que <script type = "text / javascript"> </ script> les balises apparaîtront. Cependant, plusieurs effets spéciaux JavaScript sont souvent nécessaires dans la même page Web.
1. Objectifs de base
Montez deux horloges JavaScript dans la page Web, dont l'une est le temps normal qui disparaît toutes les 1 secondes, et l'autre est une horloge anormale qui disparaît toutes les 3 secondes. Il s'agit juste de le distinguer et d'expliquer comment implémenter plusieurs effets spéciaux JavaScript dans la même page Web. L'effet est illustré dans la figure ci-dessous:
2. Processus de production
Méthode 1:
Copiez le code comme suit: <html>
<adal>
<script type = "text / javascript">
fonction Clocka () {
var time = new Date (). TolocaleString ();
document.getElementById ("Clocka"). InnerHTML = Time;
}
fonction a () {
Clocka ();
setInterval ("Clocka ()", 1000);
}
fonction horlogeb () {
var time = new Date (). TolocaleString ();
document.getElementById ("horlogeb"). innerHtml = time;
}
fonction b () {
ClockB ();
setInterval ("horlogeb ()", 3000);
}
</cript>
</ head>
<body onload = "a (), b ()">
<div id = "Clocka"> </div>
<div id = "horlogeb"> </div>
</docy>
</html>
Écrivez d'abord l'effet spécial à implémenter dans une fonction, fonctionne a (), b (), puis utilisez le chargement du corps pour charger la page Web et charger cette fonction immédiatement.
Quant à Clocka () et ClockB (), ils sont réécrits en fonction du code JavaScript d'origine. Le code JavaScript qui était à l'origine dans <body> est le suivant:
Copiez le code comme suit: <script type = "text / javascript">
fonction horloge () {
var time = new Date (). TolocaleString ();
document.getElementById ("horloge"). innerHtml = time;
}
setInterval ("horloge ()", 1000);
</cript>
Méthode 2:
Cela signifie ne pas écrire le type dans <Script>, mais le type est écrit directement. Cependant, cette méthode a un certain retard. Les effets spéciaux sont chargés un par un. S'il y a trop d'effets spéciaux, l'effet sera mauvais.
Cependant, la netteté et l'intuitivité du codage sont meilleures que la méthode ci-dessus.
Le code est le suivant:
Copiez le code comme suit: <! 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">
<adal>
<cript>
fonction Clocka () {
var time = new Date (). TolocaleString ();
document.getElementById ("Clocka"). InnerHTML = Time;
}
fonction horlogeb () {
var time = new Date (). TolocaleString ();
document.getElementById ("horlogeb"). innerHtml = time;
}
</cript>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> TwoJS </TITME>
</ head>
<body>
<cript>
setInterval ("Clocka ()", 1000);
</cript>
<cript>
setInterval ("horlogeb ()", 3000);
</cript>
<div id = "Clocka"> </div>
<div id = "horlogeb"> </div>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.