<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- CSS样式 -->
    <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>
<script>
    // 原始版
    // 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写九九乘法表格，附带背景颜色的更多相关文章

  1. 用JS写九九乘法表

    本来JS部分觉得就不是很好,结果经过一个寒假,在家的日子过的太舒适,基本把学的都快忘干净了,今天老师一说九九乘法表,除了脑子里浮现出要满足的条件,其他的都不记得了,赶快整理了一下: <scrip ...

  2. 用js实现九九乘法口诀两种方式

    js实现九九乘法口诀两种方式: 第一种是用户输入一个数弹出所对应的乘法口诀: <script type="text/javascript"> function art( ...

  3. 用python写九九乘法表

    用python来写九九乘法表,九九乘法表的结构是这样子的: 第一行是1 * 1 = 1,第二行是1 * 2 = 2 | 2 * 2 = 4...以此类推.注意到没,每一行的第一个乘的数字在从1到当行变 ...

  4. JS实现九九乘法表和时间问候语

    编码 小练习,练习使用循环实现一个九九乘法表 第一步,最低要求:在Console中按行输出 n * m = t 然后,尝试在网页中,使用table来实现一个九九乘法表 <!DOCTYPE htm ...

  5. js实现九九乘法表

    <script type="text/javascript"> var sum=0; var wite; for (var i = 1; i < 10; i++) ...

  6. 用JS实现九九乘法表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JavaScript写九九乘法表

    <script language=javascript> for(i=1;i<=9;i++){ for(j=1;j<=9;j++){ document.write (i+&qu ...

  8. JS怎么控制input框的背景颜色

    $("input").css("background-color","red"); 参考:https://zhidao.baidu.com/ ...

  9. 使用PHP几种写99乘法表的方式

    首先按照规矩,还是先废话一番,对于刚学PHP的新手来讲,用php写九九乘法表无疑是非常经典的一道练习题. 但不要小看这道练习题,它对于逻辑的考验还是相当到位的. 也许有人会觉得,九九乘法表有什么难的, ...

随机推荐

  1. GeoServer 查询sql视图

    说明: 最近项目中遇到一个需求,需要统计管网的长度,但管网数据量非常大,前端用openlayers接口统计直接就奔溃了. 后尝试使用调后台接口查数据库的方式,虽然可行但是又要多一层与后台交互的工作. ...

  2. PostGIS 用Navicat工具添加自增

    1.新建查询,新增序列(从66开始,每次自增1): CREATE SEQUENCE seq_area INCREMENT 1 MINVALUE 66 MAXVALUE 999999999 START ...

  3. 线程中synchronized关键字和lock接口的异同

    一.synchronized关键字 1.可以用来修饰代码块 synchronized (this) { // 同步的关键字 this 表示当前线程对象 if (num == 0) { break; } ...

  4. win上找到host文件的方法

    在运行的位置输入 C:\WINDOWS\system32\drivers\etc

  5. scikit-learn网格搜索来进行高效的参数调优

    内容概要¶ 如何使用K折交叉验证来搜索最优调节参数 如何让搜索参数的流程更加高效 如何一次性的搜索多个调节参数 在进行真正的预测之前,如何对调节参数进行处理 如何削减该过程的计算代价 1. K折交叉验 ...

  6. java学习引言

    Java学习之路:不走弯路,就是捷径 0．引言 软件开发之路是充满荆棘与挑战之路,也是充满希望之路.Java学习也是如此,没有捷径可走.梦想像<天龙八部>中虚竹一样被无崖子醍醐灌顶而轻松获 ...

  7. Python存储数据的方式

    在Python开发中,数据存储.读取是必不可少的环节,而且可以采用的存储方式也很多,常用的方法有json文件.csv文件.MySQL数据库.Redis数据库以及Mongdb数据库等. 1. json文 ...

  8. FF.PyAdmin 接口服务/后台管理微框架 (Flask+LayUI)

    源码(有兴趣的朋友请Star一下) github: https://github.com/fufuok/FF.PyAdmin gitee: https://gitee.com/fufuok/FF.Py ...

  9. Tomcat eclipse 启动时一个工程影响另一个工程

    两个project:A, B;  工程 A 的 Jersey 服务是正常的, 工程 B 的 Jersey 服务是不正常的:如果工程 B 不存在的话, 工程 A 的 Jersey 服务可以在 Tomca ...

  10. Internet History,Technology,and Security - Dawn of Electronic Computing（Week 1)

    一 War Time Computing and Communication 讲到电子计算机,你不得不提起第二次世界大战,虽说二战是人类历史上史无前例的大灾难,不过从某种程度来说,它确实促进了社会的发 ...