效果图↑
首先,在script中建立输出一个table
<script>document.write(`<table width="800px" height="500px" style="border:1px solid">`)//同时设置好table的宽高,设置一个边框,方便查看效果document.write(`</table>`)</script>
第一层for循环,输出行<tr></tr>
<script>document.write(`<table width="800px" height="500px" style="border:1px solid">`)//同时设置好table的宽高,设置一个边框,方便查看效果for(var i = 1;i <= 9;i++){ //定义i = 1,总共9行document.write('<tr></tr>')document.write('<br>') //设置换行 不设置也可以,主要为了好看}document.write(`</table>`)</script>
加入第二层循环,开始输出每行内的每列<td></td>,同时给每一个td设置一个边框方便查看效果
<script>document.write(`<table width="800px" height="500px" style="border:1px solid">`)//同时设置好table的宽高,设置一个边框,方便查看效果for(var i = 1;i <= 9;i++){ //定义i = 1,总共9行document.write('<tr></tr>')//第二层for循环for (var j = 1; j <= i; j++) { //j根据i的值逐行增多,i多一行,每行的j就会多一个document.write(`<td style="border:1px solid"></td>`)}document.write('<br>') //设置换行 不设置也可以,主要为了好看}document.write(`</table>`)</script>
此时效果为:
现在我们可以去掉最外层的边框了
同时开始写九九乘法表的内容,因为要用 i 和 j 循环出来的值来填写内容,所以 i 和 j 是从1开始的,九九乘法表也是从1开始运算的
<script>document.write(`<table width="800px" height="500px"`)//同时设置好table的宽高for(var i = 1;i <= 9;i++){ //定义i = 1,总共9行document.write('<tr></tr>')//第二层for循环for (var j = 1; j <= i; j++) {//j根据i的值逐行增多,i多一行,每行的j就会多一个document.write(`<td style="border:1px solid">${j}*${i}=${i*j}</td>`)//i代表的是每行,第一行就是1,第二行就是2//j代表的是每列,第一列就是1,第二列就是2,以此类推//为了符合九九乘法表的书写规律,第一列开头为1,第二列开头为2,所以把j的值放在前面}document.write('<br>') //设置换行 不设置也可以,主要为了好看}document.write(`</table>`)</script>
这个时候的效果就是:
可以看到,我书写输出内容时最外层用的不是" ",也不是‘ ’
而是反引号 ` ` ,是在英文状态中,单击波浪号的按键,也就是感叹号上方的按键
这样的话,在内部设置style等属性时,不用担心单双引号的问题 ,使用变量的值时可以用${ }的形式
一个九九乘法表做好了,接下来是设置每个单元格的随机背景颜色
考虑到随机性,使用Math的随机数方法,也就是Math.random( ),此方法的随机数范围为0~1的随机小数,而颜色设置不仅有十六进制的形式,也有rgb(r,g,b)的形式,范围为0~255,所以我们可以这么设置
var r = Math.random() * 255;
var g = Math.random() * 255;
var b = Math.random() * 255;
这样就可以取0~255间的随机数了,RGB内的数字会自动取整,所以我们不用特意取整
将上段代码加进我们的代码,这个时候为了代码好看,其实就可以把td的边框去掉了
<script>document.write(`<table width="800px" height="500px"`)//同时设置好table的宽高for(var i = 1;i <= 9;i++){ //定义i = 1,总共9行document.write('<tr></tr>')//第二层for循环for (var j = 1; j <= i; j++) {//j根据i的值逐行增多,i多一行,每行的j就会多一个var r = Math.random() * 255;var g = Math.random() * 255;var b = Math.random() * 255;//因为我们设置的是随机的单元格的背景颜色,所以变量写在第二层循环中document.write(`<td style="background-color: rgb(${r} ,${g} , ${b})">${j}*${i}=${i*j}</td>`)//i代表的是每行,第一行就是1,第二行就是2//j代表的是每列,第一列就是1,第二列就是2,以此类推//为了符合九九乘法表的书写规律,第一列开头为1,第二列开头为2,所以把j的值放在前面}document.write('<br>') //设置换行 不设置也可以,主要为了好看}document.write(`</table>`)</script>
此时的效果就完成了
然后点击刷新,就可以看见随机不同颜色的九九乘法表了
当然,如果是只想整个背景颜色随机而不是单元格的话,把变量更改到最外层的表格中就可以了,如下
<script>document.write(`<table width="800px" height="500px"`)//同时设置好table的宽高var r = Math.random() * 255;var g = Math.random() * 255;var b = Math.random() * 255;for(var i = 1;i <= 9;i++){ //定义i = 1,总共9行document.write('<tr></tr>')//第二层for循环for (var j = 1; j <= i; j++) {//j根据i的值逐行增多,i多一行,每行的j就会多一个document.write(`<td style = "background-color: rgb(${r} ,${g} , ${b}) ">${j}*${i}=${i*j}</td>`)//i代表的是每行,第一行就是1,第二行就是2//j代表的是每列,第一列就是1,第二列就是2,以此类推//为了符合九九乘法表的书写规律,第一列开头为1,第二列开头为2,所以把j的值放在前面}document.write('<br>') //设置换行 不设置也可以,主要为了好看}document.write(`</table>`)</script>
此时的效果为:
点击刷新页面,就可以随机颜色了