Maison interface Web Questions et réponses frontales Javascript implémente la table de multiplication

Javascript implémente la table de multiplication

May 09, 2023 pm 06:08 PM

La table de multiplication est un outil important permettant aux débutants d'apprendre les bases de la multiplication, et c'est également un projet courant permettant aux programmeurs de mettre en pratique leurs compétences en programmation. Dans cet article, je vais vous montrer comment implémenter une table de multiplication simple à l'aide de JavaScript.

Tout d’abord, nous devons clarifier la structure de base de la table de multiplication. La table de multiplication est généralement une table carrée contenant des nombres de 1 à 10. Chaque ligne et colonne commence par ces nombres et remplit la grille du tableau en fonction de leur produit.

Nous pouvons utiliser des boucles imbriquées pour générer ce tableau. La boucle externe est utilisée pour contrôler le nombre de lignes dans le tableau et la boucle interne est utilisée pour générer des colonnes dans chaque ligne. Le code spécifique est le suivant :

for (let i = 1; i <= 10; i++) {
  let row = '';
  for (let j = 1; j <= 10; j++) {
    row += (i * j) + '    ';
  }
  console.log(row);
}
Copier après la connexion

Dans ce code, nous utilisons d'abord une boucle externe pour contrôler le nombre de lignes dans le tableau, en boucle de 1 à 10. Nous utilisons la boucle interne pour générer une ligne à chaque fois que la boucle externe s'exécute une fois.

La boucle interne boucle de 1 à 10. Chaque fois qu'elle est exécutée, le nombre actuel de lignes et de colonnes est multiplié et le résultat est ajouté à la chaîne de cette ligne. Ici, nous avons utilisé des chaînes modèles d'ES6 pour construire la chaîne, afin que le résultat puisse être séparé du résultat suivant à l'aide du caractère.

Enfin, nous utilisons la fonction console.log() pour afficher chaque ligne sur la console.

Si vous souhaitez imprimer les résultats dans une page HTML, vous pouvez modifier légèrement ce code. Plus précisément, vous pouvez utiliser la fonction document.createElement() pour créer un élément de tableau dans la page, puis utiliser l'attribut innerHTML pour ajouter chaque ligne au tableau. Le code est le suivant :

const table = document.createElement('table');
for (let i = 1; i <= 10; i++) {
  let row = '<tr>';
  for (let j = 1; j <= 10; j++) {
    row += '<td>' + (i * j) + '</td>';
  }
  row += '</tr>';
  table.innerHTML += row;
}
document.body.appendChild(table);
Copier après la connexion

Dans ce code, nous utilisons la fonction document.createElement() pour créer un élément de table nommé table. Dans la boucle externe, nous construisons chaque ligne comme un élément HTML <tr> et utilisons la boucle interne pour générer des éléments <td>, en prenant chaque produit comme contenu de la cellule.

Enfin, nous ajoutons ces éléments HTML à l'élément body pour l'intégrer au document.

Pour résumer, dans cet article, nous avons généré une simple table de multiplication en utilisant JavaScript. Qu'il s'agisse d'une sortie dans la console ou d'une génération dans une page Web, il s'agit d'un projet de bonne pratique. Parallèlement, nous avons également appris à utiliser des boucles imbriquées pour générer des structures de données complexes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires? Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires? Mar 19, 2025 pm 03:58 PM

Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires?

Expliquez le concept de chargement paresseux. Expliquez le concept de chargement paresseux. Mar 13, 2025 pm 07:47 PM

Expliquez le concept de chargement paresseux.

Comment fonctionne le currying en JavaScript et quels sont ses avantages? Comment fonctionne le currying en JavaScript et quels sont ses avantages? Mar 18, 2025 pm 01:45 PM

Comment fonctionne le currying en JavaScript et quels sont ses avantages?

Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable? Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable? Mar 18, 2025 pm 01:44 PM

Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable?

Comment fonctionne l'algorithme de réconciliation React? Comment fonctionne l'algorithme de réconciliation React? Mar 18, 2025 pm 01:58 PM

Comment fonctionne l'algorithme de réconciliation React?

Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants? Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants? Mar 19, 2025 pm 03:59 PM

Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants?

Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements? Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements? Mar 19, 2025 pm 04:10 PM

Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements?

Quels sont les avantages et les inconvénients des composants contrôlés et incontrôlés? Quels sont les avantages et les inconvénients des composants contrôlés et incontrôlés? Mar 19, 2025 pm 04:16 PM

Quels sont les avantages et les inconvénients des composants contrôlés et incontrôlés?

See all articles