Maison > Article > interface Web > Comment afficher la table de multiplication 99 en utilisant JavaScript

Comment afficher la table de multiplication 99 en utilisant JavaScript

PHP中文网original: 2017-06-22 13:49:154166parcourir

L'éditeur suivant vous présentera un exemple simple d'implémentation de la table de multiplication en JavaScript. L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Tous ceux qui ont appris la programmation ont écrit « Hello World »

Mais la table de multiplication 99, je pense, devrait également devenir un incontournable pour tout débutant en programmation. . Programmation

C'est la méthode d'implémentation de JavaScript, très adaptée aux débutants ! ! !

Ce qui suit est le code et les commentaires

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JavaScript九九乘法表</title> 
 
<style type="text/css"> 
table{ 
  width:600px;     //表格height属性可设置可不设置,建议不设置
  border-collapse:separate;
  } 
table td{ 
  border:#000000 1px solid;
  text-align: center;  //使<td>标签中的内容居中显示，若是<th>标签，没有此行代码亦可自动居中
  } 
</style>

</head> 
<body> 
 
<script type="text/javascript"> 
//下面部分是核心代码
 
document.write("<table>");   //<table></table>添加一个表格样式来显示乘法表 
for (var x = 1; x <= 9; x++) 
{ 
  document.write("<tr>");   //<tr></tr>标签
  for (var y = 1; y <= x; y++)
  { 
    document.write("<td>"+y+"x"+x+"="+y*x+"</td>");//亦可用<th>标签来起到居中加粗内容的作用
  }                          
  document.write("</tr>"); 
} 
document.write("</table>");  
</script> 
 
</body> 
</html>

Ce qui suit est un contenu impliqué dans le code ci-dessus

•La balisef5d188ed2c074f8b944552db028f98a1 définit un tableau !

a34de1251f0d9fe1e645927f19a896e8 - Définir les lignes du tableau

b4d429308760b6c2d20d6300079ed38e - Définir l'en-tête du tableau

b6c5a531a458a2e790c1fd6421739d1c table )

border=""L'attribut peut définir la bordure du tableau ! Les mots entre

b4d429308760b6c2d20d6300079ed38e sont en gras et centrés par défaut !

bgcolor=""Autrement dit, je suis habitué à définir la couleur d'arrière-plan du tableau !

•cellspacing="" et Cellspadding="" sont utilisés pour définir l'espacement entre les tableaux et l'espacement entre les cellules ! Mais les deux balises ont été supprimées par HTML5 et remplacées par border-collapse:separate Collapse |

separate	默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略border-spacing 和 empty-cells 属性。
inherit	规定应该从父元素继承border-collapse属性的值。

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：

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 des fonctions JavaScriptArticle suivant：Explication détaillée des fonctions JavaScript

Articles Liés

Voir plus