手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

如何利用HBuilder使用Javascript输出九九乘法表

时间:2024-10-11 23:50:19

1、首先打开HBu坡纠课柩ilder,选择新建项目。在弹出的对话框中填写项目名称,在模板中选择基础HTML项目。如下图所示。

如何利用HBuilder使用Javascript输出九九乘法表
如何利用HBuilder使用Javascript输出九九乘法表

2、我们可以在左侧项目目录中看到我们刚刚创建好的目录。点击index.html文件。开始编写代码。如下图所示。

如何利用HBuilder使用Javascript输出九九乘法表

3、先写js的script标签,如果不写,是不会实现相应的效果的。如下图所示。

如何利用HBuilder使用Javascript输出九九乘法表

4、为了使输出的九九乘法表美观一些,我们要输出一个表格。当然,在js代码中标签也必须是双标签。如下图所示。

如何利用HBuilder使用Javascript输出九九乘法表

5、接下来我们使用一个for循环,来让我们的表格输出十行。如下图所示。

如何利用HBuilder使用Javascript输出九九乘法表
如何利用HBuilder使用Javascript输出九九乘法表

6、然后我们在tr标签中在使用一个for循环输出十列。这里注意j<=i;因为我们输出的是一个阶梯形状的九九乘法表,这条语句就限定了在每一行的列数不会超过其所在行的行数。

如何利用HBuilder使用Javascript输出九九乘法表

7、我们使用for循环动态添加列数。并写出在单元格中输出的内容。如下图所示。

如何利用HBuilder使用Javascript输出九九乘法表

8、接下来我们运行看一下效果。点击菜单栏中的运行--运行到浏览器--选择适合的浏览器。

如何利用HBuilder使用Javascript输出九九乘法表
如何利用HBuilder使用Javascript输出九九乘法表

9、我们发现整体并不是很美观。这时我们可以用css来写表格的样式。如下图所示。

如何利用HBuilder使用Javascript输出九九乘法表

10、写完样式后我们来看一下效果。那么九九乘法表的输出就做好啦。图2是完整代码。

如何利用HBuilder使用Javascript输出九九乘法表
如何利用HBuilder使用Javascript输出九九乘法表
© 手抄报圈