当前位置: 代码迷 >> 综合 >> JS入门练习-九九乘法表(每次刷新时单元格随机变色)
  详细解决方案

JS入门练习-九九乘法表(每次刷新时单元格随机变色)

热度:70   发布时间:2023-11-26 22:39:48.0

效果图↑

首先,在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>

 此时的效果为:

 点击刷新页面,就可以随机颜色了