<!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. 2019-9-28：渗透测试，基础学习，DNS投毒

    该文章仅供学习,利用方法来自网络文章,仅供参考 DNS劫持 目标机:虚拟机下的win7系统 目标ip:192.168.20.131 目标:使用ettercap进行apr投毒,对win7系统就行,DNS ...

  2. 洛谷P1402——乒乓球

    原题链接: https://www.luogu.com.cn/problem/P1042 题面简述 国际乒联现在主席沙拉拉自从上任以来就立志于推行一系列改革,以推动乒乓球运动在全球的普及.其中11分制 ...

  3. 设计模式之观察者模式--PHP

    列举一个场景:下班之后回家,打开家门,开始做饭,之后睡觉 以上场景如果按照传统的开始方式就是封装一个用户类,里面有回家方法,打开门方法,做饭方法,睡觉方法,之后在外面依次调用. 假设你代码开发完了,这 ...

  4. Spring Boot通过ImportBeanDefinitionRegistrar动态注入Bean

    在阅读Spring Boot源码时,看到Spring Boot中大量使用ImportBeanDefinitionRegistrar来实现Bean的动态注入.它是Spring中一个强大的扩展接口.本篇文 ...

  5. Integer的比较==和String的比较==总结

    一.序言 今天发现了一个很有趣的问题,在群里和朋友们讨论的也比较激烈,我现在给大家阐述一下问题. 二.发现问题 上代码... package com.hzwealth.test.question; p ...

  6. 【Android - 自定义View】之不同事件的处理

    在Android的自定义View中,往往需要处理一系列的事件,如触摸事件.双击事件.缩放事件等.本文将这些事件及其处理进行总结.本文将持续更新,将我在自定义View的实践中用到的事件及其处理进行总结. ...

  7. plot()与dev 函数族的使用

    1. plot()的类型选择 plot()函数,属于graphics包中. plot(a,b,type="value") type:以什么样的形式来画a,b之间的关系: ·&quo ...

  8. php-fpm的pool、php-fpm慢执行日志、open_basedir、php-fpm进程管理

    6月13日任务 12.21 php-fpm的pool12.22 php-fpm慢执行日志12.23 open_basedir12.24 php-fpm进程管理 12.21 php-fpm的pool p ...

  9. 前端常用得CSS代码分享

    前端常用得CSS代码分享 本文首发于公众号:小夭同学,同步更新个人博客:故事影片,转载请署名.代码不断更新中!! 1,垂直居中对齐 .vc { position: absolute; top: 50% ...

  10. 在Linux下生成crypt加密密码

    [摘要]当我们用红帽Kickstart脚本或useradd或其他方式写东西的时候,经常会需要用到crypt命令加密生成的密码格式.那么,有没有其他方式可以生成这种格式的密码?事实上,方法有很多 1.我 ...