WEB前端08-综合案例(动态表格)

news2024/11/13 9:12:03

使用 HTML、CSS 和 JavaScript 创建动态表格

在本教程中，我们将创建一个动态表格，允许用户添加行、选择项目，并执行批量操作，如全选或删除选中的行。我们将通过 HTML、CSS 和 JavaScript 来实现这一功能。让我们逐步了解每个部分是如何协同工作的。

image-20240720185405657

HTML 结构

我们的 HTML 文档设置了页面的基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态表格</title>
    <style>
        /* CSS 样式在这里 */
    </style>
</head>
<body>
    <div class="container">
        <!-- 输入字段和添加按钮 -->
        <div class="div_1">
            <input type="text" name="id" id="id" placeholder="请输入编号">
            <input type="text" name="name" id="name" placeholder="请输入用户名">
            <input type="text" name="sex" id="sex" placeholder="请输入性别">
            <input type="button" value="添加" id="bn_add">
        </div>

        <!-- 表格显示学生信息 -->
        <div class="div_2">
            <table>
                <caption>学生信息表</caption>
                <!-- 表头 -->
                <tr onmouseover="doOver(this);" onmouseout="doOut(this);">
                    <th><input type="checkbox" id="doChoose"></th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <!-- 示例数据行 -->
                <tr onmouseover="doOver(this);" onmouseout="doOut(this);">
                    <td><input type="checkbox" name="user"></td>
                    <td>1</td>
                    <td>张三</td>
                    <td>男</td>
                    <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
                </tr>
            </table>
        </div>

        <!-- 操作按钮 -->
        <div class="div_3">
            <input type="button" value="全选" id="chooseAll">
            <input type="button" value="全不选" id="chooseNull">
            <input type="button" value="反选" id="chooseFan">
            <input type="button" value="删除" id="deleteTable">
        </div>
    </div>
    <script>
        /* JavaScript 函数在这里 */
    </script>
</body>
</html>

HTML 元素说明

  1. 容器 Div:
    • .container 类将所有元素包裹在一起，为其添加了内边距和阴影效果，使页面看起来更像卡片。
  2. 输入字段和按钮:
    • .div_1 类包含 ID、姓名和性别的输入字段以及一个添加新行的按钮。
  3. 表格:
    • 表格显示学生信息，包含选择框、编号、姓名、性别和操作列。每一行都有一个删除选项。
  4. 操作按钮:
    • .div_3 类包含全选、全不选、反选和删除选中行的按钮。

CSS 样式

CSS 用于美化表格和输入字段。以下是 CSS 的简要说明：

body {
    font-family: Arial, sans-serif; /* 设置全局字体 */
    background-color: #f2f2f2; /* 设置背景颜色 */
    color: #333; /* 设置文本颜色 */
    margin: 0; /* 去除默认外边距 */
    padding: 20px; /* 设置页面内边距 */
}

.container {
    width: 80%; /* 设置容器宽度 */
    margin: auto; /* 居中容器 */
    background: #fff; /* 背景颜色为白色 */
    padding: 20px; /* 添加内边距 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.div_1 {
    text-align: center; /* 居中对齐内容 */
    margin-bottom: 20px; /* 添加下边距 */
}

.div_1 input[type="text"] {
    padding: 10px; /* 添加内边距 */
    margin-right: 10px; /* 添加右边距 */
    border: 1px solid #ccc; /* 设置边框 */
    border-radius: 5px; /* 设置圆角边框 */
}

.div_1 input[type="button"] {
    padding: 10px 20px; /* 添加内边距 */
    background-color: #007BFF; /* 背景颜色 */
    color: white; /* 文本颜色 */
    border: none; /* 去除边框 */
    border-radius: 5px; /* 设置圆角边框 */
    cursor: pointer; /* 设置鼠标样式 */
}

.div_1 input[type="button"]:hover {
    background-color: #0056b3; /* 悬停时背景颜色变化 */
}

table {
    width: 100%; /* 设置表格宽度 */
    border-collapse: collapse; /* 合并边框 */
    margin-bottom: 20px; /* 添加下边距 */
}

table,
td,
th {
    border: 1px solid #ddd; /* 设置边框 */
}

th,
td {
    padding: 12px; /* 添加内边距 */
    text-align: center; /* 居中对齐文本 */
}

th {
    background-color: #007BFF; /* 表头背景颜色 */
    color: white; /* 表头文本颜色 */
}

caption {
    font-size: 1.5em; /* 设置标题字体大小 */
    margin: 10px; /* 添加边距 */
    color: #007BFF; /* 设置标题颜色 */
}

.div_3 {
    text-align: center; /* 居中对齐内容 */
    font-family: Arial, sans-serif; /* 设置字体 */
    color: #333; /* 设置文本颜色 */
}

.div_3 input[type="button"] {
    padding: 10px 20px; /* 添加内边距 */
    margin: 5px; /* 添加边距 */
    background-color: #28a745; /* 背景颜色 */
    color: white; /* 文本颜色 */
    border: none; /* 去除边框 */
    border-radius: 5px; /* 设置圆角边框 */
    cursor: pointer; /* 设置鼠标样式 */
}

.div_3 input[type="button"]:hover {
    background-color: #218838; /* 悬停时背景颜色变化 */
}

tr:hover {
    background-color: #f1f1f1; /* 行悬停时背景颜色变化 */
}

a {
    color: #007BFF; /* 链接颜色 */
    text-decoration: none; /* 去除下划线 */
}

a:hover {
    text-decoration: underline; /* 悬停时添加下划线 */
}

关键 CSS 特性

  1. 容器样式:
    • .container 类将内容居中，并添加了内边距和阴影效果，使页面更具吸引力。
  2. 按钮样式:
    • 按钮具有内边距、背景色和悬停效果，提高了可用性。
  3. 表格样式:
    • 表格有清晰的边框、内边距，并且行在悬停时有背景色变化效果，提升了用户体验。
  4. 链接样式:
    • 链接样式与整体主题一致，并在悬停时显示下划线。

JavaScript 功能

JavaScript 代码处理表格的动态功能：

// 获取添加按钮元素
let add = document.getElementById("bn_add");

// 点击添加按钮时触发的事件处理函数
add.onclick = function () {
    // 获取输入字段的值
    let id_text = document.getElementById("id").value;
    let name_text = document.getElementById("name").value;
    let sex_text = document.getElementById("sex").value;

    // 获取表格元素
    let table = document.getElementsByTagName("table")[0];
    // 插入新行
    let newRow = table.insertRow();
    newRow.innerHTML =
        "<td><input type='checkbox' name='user'></td>" +
        "<td>" + id_text + "</td>" +
        "<td>" + name_text + "</td>" +
        "<td>" + sex_text + "</td>" +
        "<td><a href='javascript:void(0);' οnclick='delTr(this);'>删除</a></td>";
    // 添加鼠标悬停效果
    newRow.onmouseover = function () {
        doOver(newRow);
    };
    newRow.onmouseout = function () {
        doOut(newRow);
    };
}

// 主选择框的点击事件处理函数
document.getElementById("doChoose").onclick = function () {
    let userArray = document.getElementsByName("user");
    for (let index = 0; index < userArray.length; index++) {
        userArray[index].checked = this.checked; // 根据主选择框的状态设置复选框的状态
    }
};

// 删除指定行的函数
function delTr(obj) {
    let table = obj.parentNode.parentNode.parentNode; // 获取表格
    let tr = obj.parentNode.parentNode; // 获取当前行
    table.removeChild(tr); // 删除当前行
}

// 全选操作
document.getElementById("chooseAll").onclick = function () {
    let userArray = document.getElementsByName("user");
    for (let index = 0; index < userArray.length; index++) {
        userArray[index].checked = true; // 全部勾选
    }
}

// 全不选操作
document.getElementById("chooseNull").onclick = function () {
    let userArray = document.getElementsByName("user");
    for (let index = 0; index < userArray.length; index++) {
        userArray[index].checked = false; // 全部取消勾选
    }
}

// 反选操作
document.getElementById("chooseFan").onclick = function () {
    let userArray = document.getElementsByName("user");
    for (let index = 0; index < userArray.length; index++) {
        userArray[index].checked = !userArray[index].checked; // 反转每个复选框的状态
    }
}

// 删除选中行操作
document.getElementById("deleteTable").onclick = function () {
    let userArray = document.getElementsByName("user");
    for (let index = userArray.length - 1; index >= 0; index--) {
        if (userArray[index].checked) {
            delTr(userArray[index]); // 删除选中的行
        }
    }
}

// 行悬停效果函数
function doOver(row) {
    row.style.backgroundColor = "pink"; // 悬停时背景色变为粉色
}

// 行悬停离开效果函数
function doOut(row) {
    row.style.backgroundColor = "white"; // 离开时背景色恢复为白色
}

JavaScript 功能说明

  1. 添加行:

    • add.onclick 处理输入字段的值，并在表格中添加新行，同时设置了悬停效果。
    在插入行时使用let newRow = table.insertRow();可以有效的插入表格，使得表格为一体
或者使用childNode等属性插入
直接table.innerHTML += 表格代码不会将其拼接为一个整体表格。调整了使用 innerHTML 方法添加新行的方式，确保将新行正确插入表格中，而不是简单地将其附加到表格的 innerHTML。

  2. 全选/全不选操作:

    • doChoose 处理全选和全不选操作，根据主选择框的状态更新复选框。

  3. 删除操作:

    • delTr 函数通过获取父元素删除特定行。

  4. 批量操作按钮:

    • chooseAll、chooseNull 和 chooseFan 分别实现全选、全不选和反选复选框。
    //批量删除
document.getElementById("deleteTable").onclick = function () {
    let userArray = document.getElementsByName("user");
    for (let index = userArray.length - 1; index >= 0; index--) {
        if (userArray[index].checked) {
            delTr(userArray[index]); // 删除选中的行
        }
    }
}
如果我们正序删除时，userArray.length会不断变化这样会使我们每次只能删除一般，这时我们可以采取倒序删除的方法，原理如下：

倒着删除不会出现上述错误的原因是，当你从后往前删除时，每次删除一行后，不会影响到尚未遍历到的元素索引。具体来说：

当你正向删除时，如果删除的是索引较小的元素，后面的元素会向前移动一个位置，导致索引发生变化，从而跳过某些元素。
倒着删除时，每次删除操作都影响已经遍历过的元素，不会影响到尚未遍历到的元素的索引，因此不会跳过任何元素。
让我们详细看一下这两种删除方式的工作原理。

正向删除
假设你有一个数组 userArray，其长度为 5，其中元素分别为 A, B, C, D, E，并且你需要删除 B 和 D。

初始状态：[A, B, C, D, E]
第一次删除 B 后：[A, C, D, E]
C 和 D 分别移动到原来 B 和 C 的位置。
第二次遍历到原来的索引 3 位置：E，跳过了 D。
倒着删除
初始状态：[A, B, C, D, E]
第一次删除 D 后：[A, B, C, E]
E 移动到原来 D 的位置。
第二次删除 B 后：[A, C, E]
此时，C 和 E 的位置没有影响。
从后往前删除时，每次删除操作都不会影响到未遍历到的元素的索引，因此不会出现跳过的问题。

  5. 行悬停效果:

    • doOver 和 doOut 函数在行悬停时更改背景颜色，提高用户体验。

image-20240720185454032

完整源码：

<!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 {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            color: #333;
            margin: 0;
            padding: 20px;
        }

        .container {
            width: 80%;
            margin: auto;
            background: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .div_1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .div_1 input[type="text"] {
            padding: 10px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .div_1 input[type="button"] {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .div_1 input[type="button"]:hover {
            background-color: #0056b3;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        table,
        td,
        th {
            border: 1px solid #ddd;
        }

        th,
        td {
            padding: 12px;
            text-align: center;
        }

        th {
            background-color: #007BFF;
            color: white;
        }

        caption {
            font-size: 1.5em;
            margin: 10px;
            color: #007BFF;
        }

        .div_3 {
            text-align: center;
            font-family: Arial, sans-serif;
            color: #333;
        }

        .div_3 input[type="button"] {
            padding: 10px 20px;
            margin: 5px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .div_3 input[type="button"]:hover {
            background-color: #218838;
        }

        tr:hover {
            background-color: #f1f1f1;
        }

        a {
            color: #007BFF;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="div_1">
            <input type="text" name="id" id="id" placeholder="请输入编号">
            <input type="text" name="name" id="name" placeholder="请输入用户名">
            <input type="text" name="sex" id="sex" placeholder="请输入性别">
            <input type="button" value="添加" id="bn_add">
        </div>

        <div class="div_2">
            <table>
                <caption>学生信息表</caption>
                <tr onmouseover="doOver(this);" onmouseout="doOut(this);">
                    <th><input type="checkbox" id="doChoose"></th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>

                <tr onmouseover="doOver(this);" onmouseout="doOut(this);">
                    <td><input type="checkbox" name="user"></td>
                    <td>1</td>
                    <td>张三</td>
                    <td>男</td>
                    <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
                </tr>
            </table>
        </div>

        <div class="div_3">
            <input type="button" value="全选" id="chooseAll">
            <input type="button" value="全不选" id="chooseNull">
            <input type="button" value="反选" id="chooseFan">
            <input type="button" value="删除" id="deleteTable">
        </div>
    </div>

    <script>
        let add = document.getElementById("bn_add");
        add.onclick = function () {
            let id_text = document.getElementById("id").value;
            let name_text = document.getElementById("name").value;
            let sex_text = document.getElementById("sex").value;

            let table = document.getElementsByTagName("table")[0];
            let newRow = table.insertRow();
            newRow.innerHTML =
                "<td><input type='checkbox' name='user'></td>" +
                "<td>" + id_text + "</td>" +
                "<td>" + name_text + "</td>" +
                "<td>" + sex_text + "</td>" +
                "<td><a href='javascript:void(0);' οnclick='delTr(this);'>删除</a></td>";
            newRow.onmouseover = function () {
                doOver(newRow);
            };
            newRow.onmouseout = function () {
                doOut(newRow);
            };
        }

        document.getElementById("doChoose").onclick = function () {
            let userArray = document.getElementsByName("user");
            for (let index = 0; index < userArray.length; index++) {
                userArray[index].checked = this.checked;
            }
        };

        function delTr(obj) {
            let table = obj.parentNode.parentNode.parentNode;
            let tr = obj.parentNode.parentNode;
            table.removeChild(tr);
        }

        document.getElementById("chooseAll").onclick = function () {
            let userArray = document.getElementsByName("user");
            for (let index = 0; index < userArray.length; index++) {
                userArray[index].checked = true;
            }
        }

        document.getElementById("chooseNull").onclick = function () {
            let userArray = document.getElementsByName("user");
            for (let index = 0; index < userArray.length; index++) {
                userArray[index].checked = false;
            }
        }

        document.getElementById("chooseFan").onclick = function () {
            let userArray = document.getElementsByName("user");
            for (let index = 0; index < userArray.length; index++) {
                userArray[index].checked = !userArray[index].checked;
            }
        }

        document.getElementById("deleteTable").onclick = function () {
            let userArray = document.getElementsByName("user");
            for (let index = userArray.length - 1; index >= 0; index--) {
                if (userArray[index].checked) {
                    delTr(userArray[index]);
                }
            }
        }

        //悬停在每一行上面变化颜色
        function doOver(row) {
            row.style.backgroundColor = "pink";
        }
        
        function doOut(row) {
            row.style.backgroundColor = "white";
        }
    </script>
</body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1939437.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

分类预测 | Matlab实现BES-LSSVM秃鹰算法优化最小二乘支持向量机多特征分类预测/故障诊断

分类预测 | Matlab实现BES-LSSVM秃鹰算法优化最小二乘支持向量机多特征分类预测/故障诊断

分类预测 | Matlab实现BES-LSSVM秃鹰算法优化最小二乘支持向量机多特征分类预测/故障诊断 目录 分类预测 | Matlab实现BES-LSSVM秃鹰算法优化最小二乘支持向量机多特征分类预测/故障诊断分类效果基本介绍程序设计参考资料 分类效果 基本介绍 Matlab实现BES-LSSVM秃鹰算法优化最…
阅读更多...
Windows原生环境配置Tensorflow使用GPU

Windows原生环境配置Tensorflow使用GPU

1 缘起 最近在折腾Transformer，选择Tensorflow作为基础框架， 距离上次应用Tensorflow跑项目已经有2年之多，同时，也换了电脑， 基础环境也没有了，开始重新搭建开发环境， 此时，Tensorflow 2.x版本已经来到了2.17.0， 上上本书里使用的还是初代Tensorflow2.0.0，发展太快了…
阅读更多...
【python】OpenCV—Extreme Points in the Contour

【python】OpenCV—Extreme Points in the Contour

文章目录 1、需求描述2、功能实现3、更多的例子4、完整代码5、参考 1、需求描述 给一张图片&#xff0c;找出其轮廓&#xff0c;并画出轮廓的上下左右极值点 输入图片 输出效果 2、功能实现 # 导入必要的包 import imutils import cv2 # 加载图像&#xff0c;将其转换为灰度…
阅读更多...
【python】错误 SyntaxError: invalid syntax的解决方法总结

【python】错误 SyntaxError: invalid syntax的解决方法总结

【python】错误 SyntaxError: invalid syntax的解决方法总结 在Python编程中&#xff0c;SyntaxError: invalid syntax是一个常见的错误&#xff0c;通常表示Python解释器在尝试解析代码时遇到了语法错误。这种错误可能由多种原因引起&#xff0c;包括拼写错误、缺少关键字、不…
阅读更多...
区间加减使得数组变成指定类型

区间加减使得数组变成指定类型

这个问题要怎么去考虑呢&#xff0c;首先我们将两个数组做差得到相对大小&#xff0c;问题就变成了把我们构造的数组通过区间加一或者区间减一变成全部都是0的最小次数 这里就涉及到我们的一个技巧&#xff0c;我们需要把负数序列和正数序列分开处理&#xff0c;如何能得到最小…
阅读更多...
SpringCloud的认识和初步搭建

SpringCloud的认识和初步搭建

目录 一.认识SpringCloud 二.SpringCloud的部署 2.1开发环境 2.2数据库的建立 2.3SpringCloud的部署 第一步&#xff1a; 创建Maven项目 第二步&#xff1a;完善pom文件 第三步&#xff1a;创建两个子项目 第四步&#xff1a;声明项目依赖以及构建插件 第五步&#xf…
阅读更多...
vue2集成markdown编辑器及前台渲染

vue2集成markdown编辑器及前台渲染

效果展示 后台编辑器 前台渲染 后台编辑器步骤 安装包 npm i kangc/v-md-editor -Smain.js里全局注册 编辑器VueMarkdownEditor组件 import Vue from vue; import VueMarkdownEditor from kangc/v-md-editor; import kangc/v-md-editor/lib/style/base-editor.css; im…
阅读更多...
Docker核心技术：应用架构演进

Docker核心技术：应用架构演进

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 Docker核心技术 系列文章&#xff1a;应用架构演进&#xff0c;其他文章快捷链接如下&#xff1a; 应用架构演进&#xff08;本文&#xff09;容器技术要解决哪些问题Docker的基本使用Docker是如何实现的 1.1.架…
阅读更多...
matlab simulink气隙局部放电仿真技术研究

matlab simulink气隙局部放电仿真技术研究

1、内容简介 略 87-可以交流、咨询、答疑 2、内容说明 略 为了解决目前国内外局部放电仿真方法难以计算气隙局部放电暂态过程的问题 , 利用 MATLAB (SIMULINK ) 的公共模块库和电力系统专业模块库 , 根据单气隙局部放电仿真物理模型 , 构造了气隙局部放 电仿真计算的电…
阅读更多...
进程间通信——共享内存，信号量，信号

进程间通信——共享内存，信号量，信号

进程 VS 线程通信 进程&#xff1a;共享内存&#xff0c;消息队列&#xff0c;管道&#xff0c;信号&#xff08;条件变量&#xff0c;锁&#xff0c;信号量需要搭配共享内存使用&#xff09;&#xff1b; 线程&#xff1a;信号&#xff0c;条件变量&#xff0c;锁&#xff0c…
阅读更多...
C语言·分支和循环语句(超详细系列·全面总结)

C语言·分支和循环语句(超详细系列·全面总结)

前言&#xff1a;Hello大家好&#x1f618;&#xff0c;我是心跳sy&#xff0c;为了更好地形成一个学习c语言的体系&#xff0c;最近将会更新关于c语言语法基础的知识&#xff0c;今天更新一下分支循环语句的知识点&#xff0c;我们一起来看看吧~ 目录 一、什么是语句&#xf…
阅读更多...
C语言航空售票系统

C语言航空售票系统

以下是系统部分页面 以下是部分源码&#xff0c;需要源码的私信 #include<stdio.h> #include<stdlib.h> #include<string.h> #define max_user 100 typedef struct ft {char name[50];//名字char start_place[50];//出发地char end_place[50];//目的地char …
阅读更多...
【专项刷题】— 归并

【专项刷题】— 归并

1、排序数组 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 先找一个中间值&#xff0c;然后递归左边部分和递归右半部分直到左边和右边只剩一个数了就返回&#xff0c;然后再合并左右两个部分代码&#xff1a; class Solution {int[] tmp;public int[] sortArray(…
阅读更多...
canvas：矢量点转栅格

canvas：矢量点转栅格

案例描述 ArcGIS提供了“点转栅格”的工具，可以将矢量点转换为栅格数据，以下尝试基于canvas绘图技术，实现经纬度矢量点转换为canvas栅格数据，并在Cesium.js三维地图中进行渲染。 原始数据 转出栅格 案例分析 实现的关键点在于：如何将经纬度坐标与canvas画布坐标进…
阅读更多...
Java代码基础算法练习-三角形判断-2024.07.21

Java代码基础算法练习-三角形判断-2024.07.21

任务描述&#xff1a; 解决思路&#xff1a; 一个函数&#xff0c;带入输入的三个边长参数&#xff0c;条件满足计算其周长、面积&#xff0c;否则不计算 代码示例&#xff1a; package a4_2024_07;import java.util.Scanner;public class j240721_2 {public static void mai…
阅读更多...
Pytorch学习笔记【B站：小土堆】

Pytorch学习笔记【B站：小土堆】

文章目录 1 基础环境配置&#xff08;CPU版&#xff09;2 PyTorch学习2.1 Dataset和DataLoader2.1.1 Dataset2.1.2 DataLoader 2.2 Tensorboardadd_scalaradd_imageadd_graph 2.3 Transforms2.3.1 ToTensor2.3.2 Normalize2.3.3 Resize2.3.4 Compose 2.4 torchvision中的数据集…
阅读更多...
MQTTX连接华为云IoTDA

MQTTX连接华为云IoTDA

目录 华为IoTDA平台 MQTTX连接参数的设置 物模型的构建 属性上报 基本数据格式 时戳 我以前上课都是用巴法云服务器来演示MQTT的&#xff0c;前几天因为测试工业互联网关使用了华为的IoTDA&#xff0c;觉得也不算太复杂&#xff0c;今天尝试用MQTTX连接华为云&#xff0c…
阅读更多...
NLP： 词袋模型和TFIDF模型

NLP： 词袋模型和TFIDF模型

文章目录 词袋模型TF-IDF模型词汇表模型 词袋模型 文本特征提取有两个非常重要的模型&#xff1a; 词集模型&#xff1a;单词构成的集合&#xff0c;集合自然每个元素都只有一个&#xff0c;也即词集中的每个单词都只有一个。 词袋模型&#xff1a;在词集的基础上如果一个单词…
阅读更多...
DDPM扩散模型（模型结构图与公式推导）

DDPM扩散模型（模型结构图与公式推导）

DDPM扩散模型 一、前置知识 1. 条件概率知识 P ( A ∣ B ) P ( A B ) P ( B ) P(A|B) \frac{P(AB)}{P(B)} P(A∣B)P(B)P(AB)​ P ( A B C ) P ( C ∣ B A ) P ( B A ) P ( C ∣ B A ) P ( B ∣ A ) P ( A ) P(A B C) P(C|B A)P(BA) P(C|B A)P(B|A)P(A) P(ABC)P(C∣BA)P…
阅读更多...
Java | 自制AWT单词猜一猜小游戏(测试版)

Java | 自制AWT单词猜一猜小游戏(测试版)

目录 游戏标题 开发过程 开发想法 技术栈 代码呈现 导包 核心代码 游戏标题 探索知识的迷宫&#xff0c;体验自制AWT单词猜一猜小游戏 在数字时代&#xff0c;学习可以是多彩的&#xff0c;游戏可以是智慧的。我们自豪地推出“单词猜猜猜”是一款结合了教育与娱乐的自制…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023