JS实现彩色乘法口诀表

最新推荐文章于 2023-07-19 00:13:30 发布

小芒果cuty

最新推荐文章于 2023-07-19 00:13:30 发布

阅读量873

点赞数

分类专栏： web前端基础文章标签： html css javascript

csdn@小芒果cuty

本文链接：https://blog.csdn.net/caipital/article/details/106880607

版权

web前端基础专栏收录该内容

21 篇文章 0 订阅

订阅专栏

刚学JS，用比较简单的“循环”+“表格”实现了页面刷新，所有的乘法口诀表背景色都会变换的小案例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乘法口诀表</title>
    <style>
        body {
            width: 800px;
            height: 800px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    
</body>

<script>
    // 用表格存放数据
    document.write("<table id='tb'>");
    // 第一个大循环，新建表格并填写内容
    for(var i = 1; i < 10; i++ ) {
        document.write("<tr>");
        for (var j=1;j<=i;j++) {
            document.write("<td style='border:1px solid gray;'>");
            document.write(j+"*"+i+"="+i*j+"&nbsp;&nbsp;&nbsp;&nbsp;");
            document.write("</td>");
        }
        document.write("</tr>");
    }
    document.write("</table>");

    // 获取表格元素
    var tb=document.getElementById("tb");
    var r1=0;
    var g1=0;
    var b1=0;
    // 第二个大循环
    for(var m=0;m<10;m++) {
        for(var n=0;n<=m;n++) {
            // Math.random() 产生0-1之间的随机数
            // Math.ceil() 向上取整
            r1=Math.ceil(255*Math.random());
            g1=Math.ceil(255*Math.random());
            b1=Math.ceil(255*Math.random());
            // 用rgb色值来调背景色
            tb.rows[m].cells[n].style.background="rgb("+r1+","+g1+","+b1+")";
        }
    }
</script>


</html>

页面效果
在这里插入图片描述
刷新的话，颜色会改变。有任何问题小伙伴们可以留言哦！

小芒果cuty

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS实现彩色乘法口诀表

刚学JS，用比较简单的“循环”+“表格”实现了页面刷新，所有的乘法口诀表背景色都会变换的小案例。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>乘法口诀表</title&gt
复制链接

扫一扫