Maison >interface Web >js tutoriel >Comment implémenter plusieurs effets JavaScript dans la même page Web_javascript skills

Comment implémenter plusieurs effets JavaScript dans la même page Web_javascript skills

WBOYoriginal: 2016-05-16 16:16:301546parcourir

L'exemple de cet article décrit comment implémenter plusieurs effets JavaScript dans la même page Web. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

De manière générale, si la balise apparaît deux fois sur une page Web, tous les scripts JavaScript ne prendront plus effet et ne pourront apparaître qu'une seule fois< "text/javascript">, cependant, plusieurs effets 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 une heure normale qui s'exécute une fois toutes les secondes et l'autre est une horloge anormale qui ne s'exécute qu'une fois toutes les 3 secondes, juste pour distinguer et illustrer la même page Web. . Comment implémenter plusieurs effets JavaScript. L'effet est le suivant :

2. Processus de production

Méthode 1 :

Copier le code Le code est le suivant :

Écrivez d'abord l'effet spécial à implémenter dans une fonction, les fonctions a(), b(), puis utilisez le onLoad du corps pour charger cette fonction immédiatement après le chargement de la page Web. 

Quant à clocka() et clockb(), elles sont réécrites sur la base du code JavaScript original. Le code JavaScript original dans  est le suivant : 

Copier le code

 Le code est le suivant :

Méthode 2 :

 Écrivez simplement le type directement dans <script> au lieu d'écrire le type. Cependant, cette méthode a un certain retard. S'il y a trop d'effets spéciaux, l'effet ne sera pas bon. <br>
<br>Mais la précision et l'intuitivité du codage surpassent complètement la méthode ci-dessus. <br>
<br>Le code est le suivant : <br>
<br>
</div>
<p><strong>Copier le code</strong></p>
<p> Le code est le suivant :</p>
<div class="codebody" id="code91393"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <br>
<html xmlns="http://www.w3.org/1999/xhtml">  <br>
<tête>  <br>
<script>  <br>
fonction clocka() {  <br>
            var time = new Date().toLocaleString();  <br>
            document.getElementById("clocka").innerHTML = heure;  <br>
        }  <br>
fonction clockb() {  <br>
            var time = new Date().toLocaleString();  <br>
            document.getElementById("clockb").innerHTML = heure;  <br>
        }     <br>
</script>  

  

twojs  

≪/tête>  

  



<script>  <br>
setInterval("clocka()", 1000);  <br>
</script>  

<script>  <br>
setInterval("horlogeb()", 3000);  <br>
</script>  


  

希望本文所述对大家的javascript程序设计有所帮助。

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：Explication détaillée de jQuery function_jqueryArticle suivant：Explication détaillée de jQuery function_jquery

Articles Liés

Voir plus