JavaScript——实现九九乘法表

这是一张99乘法表，我们需要用JavaScript来实现这个99乘法表

基础实现

在观察表后，可以发现每一个表达式都可以用 a*b=c 来表示出来，而c可以借用算术计算出来，所以我们只需要用到两个变量

var i,j;

我们可以将每个表达式理解为列数×行数，如2×5则为第二列×第五行
观察可得，行数最多为9行，列数最多也为9列
通过两个循环嵌套可以写出一个基础的乘法表
代码

var i; //定义行数
var j; //定义列数
for (i = 1;i <= 9;i++){ //循环9行for(j = 1;j <= 9;j++){ //循环9列//输出“列*行=结果”document.write(j + "*" + i + "=" + i*j + "&nbsp;&nbsp;&nbsp;");}document.write("<br/>"); // 一行输出完毕后换行
}

结果显示为

99乘法表可以满足，但是多出了许多重复的内容
再次观察99乘法表可以发现，每一行最大的列数等于他所在的行数，第一行有一列，第二行有二列，第三行有三列……所以在for循环中，循环列数时，最大值应等于行数，即列数小于等于行数时进行循环，优化后代码为

var i; //定义行数
var j; //定义列数
for (i = 1;i <= 9;i++){ //循环9行for(j = 1;j <= i;j++){ //循环9列 j <= i时循环//输出“列*行=结果”document.write(j + "*" + i + "=" + i*j + "&nbsp;&nbsp;&nbsp;");}document.write("<br/>"); // 一行输出完毕后换行
}

显示结果为

添加格式

接下来要为99乘法表添加显示效果，使得显示效果与图片相同
我们可以使用< table >< /table >标签将整个循环定义为一个表格

var i; //定义行数
var j; //定义列数
document.write("<table align='center' cellspacing='0'>"); //使用table标签包裹住循环体for (i = 1;i <= 9;i++){ //循环9行for(j = 1;j <= i;j++){ //循环9列 j <= i时循环//输出“列*行=结果”document.write(j + "*" + i + "=" + i*j + "&nbsp;&nbsp;&nbsp;");}document.write("<br/>"); // 一行输出完毕后换行
}document.write("</table>");

使用tr标签包裹住每一行的输出

var i; //定义行数
var j; //定义列数
document.write("<table align='center' cellspacing='0'>"); //使用table标签包裹住循环体for (i = 1;i <= 9;i++){ //循环9行document.write("<tr>") //使用tr包裹住一行for(j = 1;j <= i;j++){ //循环9列 j <= i时循环//输出“列*行=结果”document.write(j + "*" + i + "=" + i*j + "&nbsp;&nbsp;&nbsp;");}document.write("</tr>");
}document.write("</table>");

使用td标签定义每一个表达式的显示

var i; //定义行数
var j; //定义列数
document.write("<table align='center' cellspacing='0'>"); //使用table标签包裹住循环体for (i = 1;i <= 9;i++){ //循环9行document.write("<tr>") //使用tr包裹住一行for(j = 1;j <= i;j++){ //循环9列 j <= i时循环document.write("<td>");//输出“列*行=结果”document.write(j + "*" + i + "=" + i*j + "&nbsp;&nbsp;&nbsp;");document.write("</td>");}document.write("</tr>");
}document.write("</table>");

使用css给每个td添加一个边框

td{border: black solid 1px;
}

显示效果

JavaScript——实现九九乘法表相关推荐

【九九乘法表】javascript做九九乘法表
javascript做九九乘法表,满满的干货!!! 基本代码: <script type="text/javascript">var factorOne , facto ...
jquery打99乘法表_基于javascript实现九九乘法表
基于javascript实现九九乘法表本文实例为大家分享了javascript实现九九乘法表的相关代码,具体内容如下 var sum=0; var wite; for (var i = 1; i & ...
JavaScript输出九九乘法表
背景使用JavaScript实现九九乘法表. 实现 <!DOCTYPE html> <html lang="en"> <head><me ...
JavaScript实现九九乘法表
上次我们利用递归实现了一个简单的九九乘法表,这次我们换一个方法,利用JavaScript(简称JS)来实现,首先复习一下:JavaScript是一种直译式脚本语言,是一种动态类型.基于原型的语言,内置 ...
九九乘法表居中c语言,JavaScript实现九九乘法表的简单实例
每个学过编程的人都写过"HelloWorld" 但99乘法表,我想也应该成为每个编程初学者的必编程序这是JavaScript的实现方法,非常适合初学者!!! 以下是代码及注释 J ...
javascript实现九九乘法表（四种形式）
1.使用for循环 1.1实现靠左的九九乘法表代码 <!DOCTYPE html> <html lang="en"> <head><me ...
JavaScript实现九九乘法表四种方法（附代码）
几行代码就能轻松学会 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
JavaScript中九九乘法表制作
练习一下表格,利用Javascript制作出来: 代码赏析: <!DOCTYPE html> <html lang="en"> <head> & ...
JavaScript打印九九乘法表
思路:使用二重循环进行打印,第一个乘数与行号相同,第二个乘数从1开始,最大与行号相同.用i表示第一个乘数,用j表示第二个乘数,则每一行i与j的关系是:j<=i. 代码如下: HTML部分: &l ...

JavaScript——实现九九乘法表

基础实现

添加格式

JavaScript——实现九九乘法表相关推荐

最新文章

热门文章