Code d'implémentation pour l'effet dynamique de la table de multiplication 9 * 9

Récemment, j'ai vu un sujet dans le groupe et je l'ai sorti et écrit.

Exiger:

Utilisez HTML, CSS et JS natif pour réaliser l'effet comme indiqué sur la figure, d'abord la sortie vers l'avant, puis en arrière en arrière et restez enfin dans l'image complète.

d'abord:

Code de pièce HTML:

<div id = "result"> </div>

C'est tout simplement simple.

Code CSS:

 #Result {largeur: 550px; marge: 30px automatique; taille de police: 0; Font-Family: Consolas, "Liberation Mono", Menlo, Courier, Monospace;} # Span de résultat {affichage: bloc en ligne; Largeur: 60px; hauteur: 25px; hauteur de ligne: 25px; taille de police: 12px; Texte-aligne: Centre; Border: 1px solide #eee; marge: -1px 0 0 -1px;}

Le code CSS est également très simple. La marge de la durée est principalement d'éliminer le problème des doubles frontières.

Le point clé suivant est

Code javascript:

Créez d'abord une fonction avec une table de multiplication 9 * 9

 fonction create () {var html = []; pour (var i = 1; i <= 9; i ++) {pour (var j = 1; j <= i; j ++) {html.push ('<span>' + j + '*' + i + '=' + (j * i) + '</span>'); } html.push ('<br/>'); } return html;}

1. Créez un nouveau tableau vide pour mettre des extraits de code HTML:

 var html = [];

2. Utilisez une boucle pour traverser le tableau de multiplication 9 * 9:

 pour (var i = 1; i <= 9; i ++) {pour (var j = 1; j <= i; j ++) {// contenu}}

3. Poussez le contenu de la boucle dans le tableau vide qui a été nouvellement créé:

 html.push ('<span>' + j + '*' + i + '=' + (j * i) + '</span>');

4. Notez que pour implémenter l'échelle, ajoutez un caractère Newline une fois la boucle J terminée:

 html.push ('<br/>');

5. Enfin, n'oubliez pas de retourner le tableau tout à l'heure:

 retour html;

La fonction qui crée une table de multiplication 9 * 9 est terminée.

Suivant s'affiche sur la page:

 fonction inhtml () {var html = create (), i = 0, tmp = create (), timer = null, result = document.getElementById ('result'); Timer = setInterval (function () {if (i> html.length) {html.splice (html.length-1,1) result.innerhtml = html.join ('');} else {result.innerhtml + = html [i ++];} if (! tmp.join ('');

Nous créons toujours une nouvelle fonction: inhtml ()

1. Déclarer d'abord certaines variables d'initialisation

 var html = create (), // appelant la fonction 9 * 9 i = 0, // initialiser la variable i tmp = create (), tempor = null, // initialize result = document.getElementByid ('result'); // get id

2. Ensuite, nous créons une minuterie pour afficher les données tour à tour:

 timer = setInterval (function () {// contenu}, 100)

Que cette minuterie soit exécutée une fois en 100 millisecondes

3. Ensuite, écrivez le contenu dans la minuterie:

 if (i> html.length) {// juger si i est supérieur à Html.length. S'il est supérieur à, affichez le résultat html.splice (html.length-1,1 ).innerhtml = html.join ('');} else {// si c'est inférieur à, affichez le résultat.innerhtml + = html [i ++];} if (! Html.Length) {// juge si html.Length. résultat.innerhtml = tmp.join (''); ClearInterval (Timer); // Clear Timer}

La fonction inhtml () a également été écrite, donc la seule chose qui reste est de l'appeler

 inhtml ();

Finition.

Vous pouvez l'essayer vous-même. Si vous avez de meilleures idées, laissez-moi un message.

Le code d'implémentation dynamique ci-dessus de l'effet de table de multiplication 9 * 9 est tout le contenu que j'ai partagé avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.