JavaScript 基础之 九九乘法表
2018-12-24 本文已影响0人
limengzhe
首先打开我们的编译器,新建一个 html
文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>JavaScript 九九乘法表</title>
</head>
<body></body>
</html>
然后在 html
里面写一对 script
标签,用 JS
的 for
循环,生成一个表格
<script type="text/javascript">
document.write("<table>");
for (let x = 1; x <= 9; x++) {
document.write("<tr>");
for (let y = 1; y <= x; y++) {
document.write("<td>" + y + "×" + x + "=" + y * x + "</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
最后简单的写一下样式就可以了
<style type="text/css">
table {
width: 720px;
}
table td {
text-align: left;
}
</style>
最终效果
![](https://img.haomeiwen.com/i7845221/d5964813dd65e27e.png)
完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>JavaScript 九九乘法表</title>
<script type="text/javascript">
document.write("<table>");
for (let x = 1; x <= 9; x++) {
document.write("<tr>");
for (let y = 1; y <= x; y++) {
document.write("<td>" + y + "×" + x + "=" + y * x + "</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
<style type="text/css">
table {
width: 720px;
}
table td {
text-align: left;
}
</style>
</head>
<body></body>
</html>