如何利用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输出九九乘法表
  • hbuilderx怎么加入图片
  • 如何在HTML中插入图片
  • hbuilder怎么让图片排成一排
  • html添加图片的代码
  • css怎么让背景图片固定不动
  • 热门搜索
    书的手抄报 科学小常识手抄报 二年级手抄报内容 关于读书的手抄报花边 争做文明少年手抄报 放飞梦想手抄报图片 敬廉崇洁手抄报资料 讲普通话手抄报内容 中学生手抄报设计图 低碳环保手抄报资料