<html lang="en">
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
<style>
table{
table-layout:fixed;
border-collapse:collapse;
display:inline-block;
margin:20px;
}
td{
border:1px solid #aaa;
/*padding:5px;*/
}
td:empty{
border:none;
}
h1:nth-of-type(1){
color:lightgreen;
}
h1:nth-of-type(2){
color:pink;
}
h1:nth-of-type(3){
color:lightblue;
}
</style>
</head>
<body>
<h1>使用for循环</h1>
<!-- 左三角 -->
<table>
<script>
for(var i=1;i<=9;i++){
document.write("<tr>");
for(var j=1;j<=i;j++){
document.write("<td>"+j+"×"+i+"="+(j*i)+"</td>");
}
document.write("</tr>");
}
</script>
</table>
<!-- 右三角 -->
<table>
<script>
for (var i = 1; i<=9; i++) {
document.write("<tr>");
for (var a = 1; a <= 9 - i; a ++) {
document.write("<td></td>");
}
for (var j = 1; j <= i; j ++){
document.write("<td>" + j + "×" + i + "=" + (j * i) + "</td>");
}
document.write("</tr>");
}
</script>
</table>
<!-- 倒左三角 -->
<table>
<script>
for(var i=9;i>=1;i--){
document.write("<tr>");
for(var j=1;j<=i;j++){
document.write("<td>"+j+"×"+i+"="+(j*i)+"</td>");
}
document.write("</tr>");
}
</script>
</table>
<!-- 倒右三角 -->
<table>
<script>
for (var i = 9; i >= 1; i --) {
document.write("<tr>");
for (var a = 1; a <= 9 - i; a ++) {
document.write("<td></td>");
}
for (var j = 1; j <= i; j ++){
document.write("<td>" + j + "×" + i + "=" + (j * i) + "</td>");
}
document.write("</tr>");
}
</script>
</table>
<hr>
<h1>使用while循环</h1>
<!-- 左三角 -->
<table>
<script>
var i=1;
while(i<=9){
document.write("<tr>");
var j=1;
while(j<=i){
document.write("<td>"+j+"×"+i+"="+(j*i)+"</td>");
j++;
}
document.write("</tr>");
i++;
}
</script>
</table>
<!-- 右三角 -->
<table>
<script>
var i=1;
while(i<=9){
document.write("<tr>");
var k=1;
while(k<=9-i){
document.write("<td></td>");
k++;
}
var j=1;
while(j<=i){
document.write("<td>"+j+"×"+i+"="+(j*i)+"</td>");
j++;
}
document.write("</tr>");
i++;
}
</script>
</table>
<!-- 倒左三角 -->
<table>
<script>
var i=9;
while(i>=1){
document.write("<tr>");
var j=1;
while(j<=i){
document.write("<td>"+j+"×"+i+"="+(j*i)+"</td>");
j++;
}
document.write("</tr>");
i--;
}
</script>
</table>
<!-- 倒右三角 -->
<table>
<script>
var i=9;
while(i>=1){
document.write("<tr>");
var k=1;
while(k<=9-i){
document.write("<td></td>");
k++;
}
var j=1;
while(j<=i){
document.write("<td>"+j+"×"+i+"="+(j*i)+"</td>");
j++;
}
document.write("</tr>");
i--;
}
</script>
</table>
<hr>
<h1>使用do-while循环</h1>
<!-- 左三角 -->
<table>
<script>
var i=1;
do{
document.write("<tr>");
var j=1;
while(j<=i){
document.write("<td>"+j+"×"+i+"="+(j*i)+"</td>");
j++;
}
document.write("</tr>");
i++;
}while(i<=9);
</script>
</table>
<!-- 右三角 -->
<table>
<script>
var i=1;
do{
document.write("<tr>");
var k=1;
while(k<=9-i){
document.write("<td></td>");
k++;
}
var j=1;
while(j<=i){
document.write("<td>"+j+"×"+i+"="+(j*i)+"</td>");
j++;
}
document.write("</tr>");
i++;
}while(i<=9);
</script>
</table>
<!-- 倒左三角 -->
<table>
<script>
var i=9;
do{
document.write("<tr>");
var j=1;
while(j<=i){
document.write("<td>"+j+"×"+i+"="+(j*i)+"</td>");
j++;
}
document.write("</tr>");
i--;
}while(i>=1);
</script>
</table>
<!-- 倒右三角 -->
<table>
<script>
var i=9;
do{
document.write("<tr>");
var k=1;
while(k<=9-i){
document.write("<td></td>");
k++;
}
var j=1;
while(j<=i){
document.write("<td>"+j+"×"+i+"="+(j*i)+"</td>");
j++;
}
document.write("</tr>");
i--;
}while(i>=1);
</script>
</table>
</body>
</html>