利用双层for
循环打印九九乘法表
美化效果代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td {
width: 100px;
height: 20px;
border: 1px solid skyblue;
border-radius: 5px;
color: black;
background-color: skyblue;
padding: 5px;
}
</style>
</head>
<body>
<script>
//document.write()可以识别HTML语言
document.write("<table cellspacing>")
//定义行
for (var i = 1; i <= 9; i++) {
document.write('<tr>')
//定义列
for (var j = 1; j <= i; j++) { //j<=i是观察九九乘法表知道每一行最大的列数是它的行数
document.write('<td>')
document.write(j + ' * ' + i + ' = ' + j * i + ' ')
// 小空格
document.write('</td>')
}
document.write('</tr>')
document.write('<br />') //每一行都得换行
}
document.write('</table>')
</script>
</body>
</html>
document.write("<table cellspacing>")
document.write('<tr>')
document.write('<td>')
document.write('</td>')
document.write('</tr>')
document.write('</table>')
输出的是表格
<table>
<tr>
<td></td>
</tr>
</table>
与之相同
效果图
纯效果代码
比较简单,容易理解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
document.write(j + ' * ' + i + ' = ' + j * i + ' ')
}
document.write('<br />')
}
</script>
</body>
</html>
效果图