2301_80675900 2024-01-02 22:06 采纳率: 100%
浏览 11
已结题

九九乘法表这个边框序列实在想不出来了，如何解决？(语言-javascript)

img


黑灰面实在想不出来了，急需指导，还望各位能用闲暇时间帮忙看看

  • 写回答

3条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-01-02 22:07
    关注

    引自免费微信小程序：皆我百晓生

    HTML代码：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <link rel="stylesheet" type="text/css" href="css/nnstyle.css">
    <script src="js/nnscript.js"></script>
</head>
<body>
    <h1>九九乘法表</h1>
    <table id="multiplication-table"></table>
</body>
</html>

    CSS代码（css/nnstyle.css）：

    body {
    font-family: Arial, sans-serif;
    text-align: center;
}

h1 {
    color: #333;
    font-size: 24px;
}

table {
    margin: 0 auto;
    border-collapse: separate; /* 修改为separate */
    border-spacing: 10px; /* 添加间距 */
}

table th, table td {
    border: 1px solid #ccc;
    width: 30px;
    height: 30px;
    padding: 5px;
}

table th {
    background-color: #a8d8e8;
    font-weight: bold;
}

table td.highlight {
    background-color: #ffcc00;
}

table td.gray {
    color: #999;
}

    JavaScript代码（js/nnscript.js）：

    document.addEventListener("DOMContentLoaded", function() {
    var table = document.getElementById("multiplication-table");
 
    // 设置九九乘法表的最大宽度为9
    var maxWidth = 9;
 
    var headerRow = document.createElement("tr");
    var headerCell = document.createElement("th");
    headerRow.appendChild(headerCell);

    // 填充表头第一行：1到9
    for (var i = 1; i <= maxWidth; i++) {
        var headerCell = document.createElement("th");
        headerCell.textContent = i;
        headerRow.appendChild(headerCell);
    }
    table.appendChild(headerRow);
 
    // 动态生成九九乘法表
    for (var i = 1; i <= maxWidth; i++) {
        var row = document.createElement("tr");
        var headerCell = document.createElement("th");
        headerCell.textContent = i;
        row.appendChild(headerCell);
 
        for (var j = 1; j <= maxWidth; j++) {
            var cell = document.createElement("td");
            var text = document.createElement("span");
            text.textContent = i + "x" + j + "=" + (i * j);
            
            if (j > i) {
                cell.classList.add("gray");
            }
            
            cell.appendChild(text);
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
 
    // 鼠标悬停时变色
    table.addEventListener("mouseover", function(e) {
        if (e.target && e.target.tagName == "TD") {
            e.target.classList.add("highlight");
        }
    });
 
    table.addEventListener("mouseout", function(e) {
        if (e.target && e.target.tagName == "TD") {
            e.target.classList.remove("highlight");
        }
    });
});

    注意：上面的代码实现了乘法表的功能和样式，但没有限制乘法表的最大宽度，可以根据需要自行添加样式或调整代码来实现。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

  • 前端JavaScript自学复盘D3（前端JavaScript for循环、数组）
    2022-11-09 01:56
    淘气的Tom的博客 前端自学第三次复盘，javascipt 中for循环、for嵌套循环、数组使用与操作、js打印九九乘法表和倒三角、冒泡排序和生成柱形图
  • JavaScript学习笔记--【黑马程序员】
    2023-01-10 23:29
    m0_63077733的博客 学习JavaScript的记录，其中包括了对《JavaScript高级程序设计》的笔记
  • JavaScript
    2022-07-22 17:20
    阿煜yv的博客 声明多个变量 变量命名规范let与var的区别Js数据类型整体分为两大类：基本数据类型引用数据类型js与python一样，都是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才可以确认。而像Java这种强数据类型的，...
  • JavaScript pink老师学习内容详解
    2023-05-15 23:08
    星辰大海1412的博客 JavaScript 具有很多优点，例如语法...同时，JavaScript 还拥有丰富的生态系统，包括多种库、框架和工具，如 React.js、Vue.js、Angular.js、Jest、Webpack 等等，这些工具可以帮助开发者更加高效、简便地进行 Web 开发
  • JavaScript基础学习、复习笔记
    2022-06-08 22:19
    Neworend的博客 本文包含JavaScript基础大致内容，参考于pink老师所讲解视频通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用笔记，JavaScript高级知识以后也会更新。 如有做的不好地方，敬请谅解，欢迎指出，持续...
  • 前端七七八八
    2021-12-02 14:47
    sky666tzz的博客 1.软件架构 B/S（Brower/Server,浏览器/服务器）模式又称B/S结构,是Web兴起后的...2.前端流程 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hdg4fdZJ-1638427594679)(https://s3.jpg.cm/202
  • JavaScript知识整理
    2021-05-17 21:35
    河里的草的博客 编程软件：Dreamweaver 说明：这个编程工具对于css3的某些属性不能正常使用，所以有时会使用Webstorm，这次的内容一般的前端编程工具也可以正常运行。 下次更新jQuery和ES6，因为这本资料书上的jQuery和ES6不是很...
  • JavaScript(一)
    2021-07-22 17:40
    旺仔布丁的博客 JavaScript基本语法运算符与流程控制1. 运算符(操作符)2. 流程控制2.1. 选择结构2.2. 循环2.2.3. while循环2.2.4. do-while循环2.3. 跳转语句continue、break数组与函数1. 数组1.1. 创建数组1.2. 访问数组元素...
  • javascript
    2016-12-09 18:39
    qq_36106235的博客 弱语言：功能并不弱，变量的数据不需要规定数据类型，自动识别. JavaScript的书写位置  【内部】  在要书写JavaScript的网页中创建一个js代码标签。JavaScript在内容可以放到任何的一个位置，但这样的方式仅限于...
  • Python总复习-下
    2020-10-21 00:42
    花开如雨的博客 文章目录目录9、Python-web前端Day01-HTML-页面1. Web1. 什么是WEB2. 组成3. Web 服务器4. 浏览器2. HTML 概述1.HyperText Markup Language2. 标记3. 网页3. HTML基础语法1. 标签/标记2. HTML标签介绍3. 完整的网页...
  • 没有解决我的问题, 去提问

问题事件

  • 已结题 （查看结题原因） 1月4日
  • 已采纳回答 1月2日
  • 创建了问题 1月2日