ホームページ >ウェブフロントエンド >フロントエンドQ&A >99の九九をJavaScriptで実装する方法

99の九九をJavaScriptで実装する方法

青灯夜游
青灯夜游オリジナル
2021-09-06 16:21:0720624ブラウズ

JS では、2 レベルの for ループをネストすることで 99 の乗算表を実装できます。構文形式は "for(var i=1;i

99の九九をJavaScriptで実装する方法

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript で 99 の九九を実装します

まず、99 の九九を見てみましょう

99の九九をJavaScriptで実装する方法

グラフを描画するためのルールを取得できます。

  • 合計 9 行 9 列があり、各行にいくつかの式があります。

  • i 行目では、式は i*1 から始まり i*i で終わります。合計 i 個の式があります (ループを通じてこの効果を実現できます)。

したがって、出力を制御するには二重ループが必要です。外側のループは行数 i (i は最小 1、最大 9) を制御し、内側のループは行数を制御します。列 j (j の最小値は 1、最大値は i に等しい)。

実装コード:

for(var i = 1; i <= 9; i++){     //外层循环控制行
	for(var j = 1; j <= i; j++) //内层循环控制列
	{
		document.write(j+"*"+i+"="+j*i+"   ");
	}
	document.write("</br>");
}

出力結果:

99の九九をJavaScriptで実装する方法

冒頭のように99の九九を入れることもできます。 pic テーブルへの出力:

document.write("<table>");

for (var i = 1; i <= 9; i++) { //外层循环控制行
	document.write("<tr>");
	for (var j = 1; j <= i; j++) //内层循环控制列
	{
		document.write("<td>" + j + "*" + i + "=" + j * i + "</td>");
	}
	//换行,控制每行的输出几个表达式
	document.write("</tr>");
}
document.write("</table>");

次に、CSS スタイルを追加して変更します:

table {
	width: 600px;
	border-collapse: separate;
}

table td {
	border: #000 1px solid;
	text-align: center;
}

出力を確認します:

99の九九をJavaScriptで実装する方法

[推奨学習: JavaScript 上級チュートリアル]

以上が99の九九をJavaScriptで実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。