用js写九九乘法表格，附带背景颜色

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

padding: 0;

margin: 0;

}

table {

width: 800px;

height: 350px;

margin: 100px auto;

text-align: center;

border-collapse: collapse;

}

table,

td {

border: 1px solid #000;

}

</style>

</head>

<body>

</body>

// 原始版

// document.write("<table>");

// var j = 1;

// while (j <= 9) {

// document.write("<tr>");

// var i = 1;

// while (i <= j) {

// document.write("<td>" + i + "*" + j + "=" + (i*j) + "</td>");

// i++;

// }

// document.write("</tr>");

// j++;

// }

// document.write("</table>");

　//-　-　-分割线- - - -

// 附带奇偶数换色版

document.write("<table>");

for (var h = 1; h <= 9; h++) { //循环行数

// 奇偶数行换色

if (h % 2 == 1) {

document.write("<tr style='background:pink;'>");

} else {

document.write("<tr style='background:#6ff;'>");

}

for (var g = 1; g <= h; g++) { //循环列数，且列要小于等于行数

// 隔列变色

if (g % 2 == 1) {

document.write("<td style='background:pink;'>" + g + "*" + h + "=" + g * h + "</td>");

} else {

document.write("<td style='background:#6ff;'>" + g + "*" + h + "=" + g * h + "</td>");

}

document.write("</tr>");

}

document.write("<table>");

</script>

</html>

巴特西

用js写九九乘法表格，附带背景颜色

最新文章

热门文章