<!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. Netty学习篇⑥--ByteBuf源码分析

    什么是ByteBuf? ByteBuf在Netty中充当着非常重要的角色:它是在数据传输中负责装载字节数据的一个容器;其内部结构和数组类似,初始化默认长度为256,默认最大长度为Integer.MAX ...

  2. PHP+Redis实现延迟任务，实现自动取消与完成订单

    简单定时任务解决方案:使用redis的keyspace notifications(键失效后通知事件) : (A)业务场景: 1.当一个业务触发以后需要启动一个定时任务,在指定时间内再去执行一个任务( ...

  3. 剑指Offer-32.丑数(C++/Java)

    题目: 把只包含质因子2.3和5的数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含质因子7. 习惯上我们把1当做是第一个丑数.求按从小到大的顺序的第N个丑数. 分析: ...

  4. 虚拟机配置net模式

    在cmd中输入ipconfig -all查看 更改网络适配器 进入虚拟机左上角编辑----虚拟机网络编辑器查看VMnet8,虚拟机会为我们分配的固定ip段:如下图: ip段是128---254,所以设 ...

  5. django-ajax传输数据

    AJAX简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步Javascript和XML". 即使用Javascript语言与服务器 ...

  6. C语言l-2019秋作业01

    2.1 你对软件工程专业或者计算机科学与技术专业了解是怎样? 在进入大学之前,我认为软件工程就是学习开发软件的,后来,从网上搜索了有关它的定义,软件工程是一门研究用工程化方法构建和维护软件的学科,它以 ...

  7. IDEA的控制台拖拽出来之后，如何恢复？

    大家搜到这个的时候,肯定遇到了如下图展示的尴尬情况,我们的控制台在不小心之间被拖拽出来,然后不知如何再拖回去?放心,我来告诉你怎么办. 点击左下角的  恢复按钮 就可以了.

  8. 如何用 Python 写一个简易的抽奖程序

    不知道有多少人是被这个头图骗进来的:) 事情的起因是这样的,上周有同学问小编,看着小编的示例代码敲代码,感觉自己也会写了,如果不看的话,七七八八可能也写的出来,但是一旦自己独立写一段程序,感觉到无从下 ...

  9. 程序员修神之路--打通Docker镜像发布容器运行流程

    菜菜哥,我看了一下docker相关的内容,但是还是有点迷糊 还有哪不明白呢? 如果我想用docker实现所谓的云原生,我的项目该怎么发布呢? 这还是要详细介绍一下docker了 Docker 是一个开 ...

  10. (转)oracle视图详解

    Oracle视图详解   一. 视图的定义 视图(view),也称虚表, 不占用物理空间,这个也是相对概念,因为视图本身的定义语句还是要存储在数据字典里的.视图只有逻辑定义.每次使用的时候,只是重新执 ...