当前位置： 首页 > news >正文

html5cssjs代码 002 50以内的加法算式

news 2026/2/10 11:16:12

html5&css&js代码 002 一些基本概念 50以内的加法算式

  • 一、代码
  • 二、解释

50以内的加法算式。

一、代码

<!DOCTYPE html>
<html lang="en">
<head><title>50以内的加法算式</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 设置表格样式 */table {border-collapse: collapse;width: 100%;}th, td {border: 1px solid black; /* 表格边框 */padding: 8px; /* 单元格内边距 */text-align: left; /* 文本对齐方式 */}</style><script>/*生成50以内的加法算式表格*/function generateAdditionEquations() {let html = '';// 双重循环生成所有加法算式for(let i = 1; i <= 50; i++) {for(let j = 1; j <= i; j++) {// 每九个算式换一行if((j % 9) === 1) {html += '<tr>';}// 生成每个算式单元格html += `<td>${i} + ${j} = ${i+j}</td>`;// 每九个算式或当前行最后一个算式关闭行if((j % 9) === 0 || i === j) {html += '</tr>';}}}// 将生成的HTML字符串插入表格document.getElementById('additionTable').innerHTML = html;}// 页面加载完成后自动调用生成函数window.addEventListener('load', generateAdditionEquations);</script>
</head>
<body>
<!--本页的主要内容是展示通过javascript生成表格-->
<h2>50以内的加法算式，请使用Ctrl+=和Ctrl+-来放大或缩小
</h2><table id="additionTable"><tbody></tbody></table>
</body>
</html>

二、解释

该HTML代码定义了一个页面，用于生成50以内的加法算式的表格。页面加载完成后，通过JavaScript函数generateAdditionEquations动态生成加法算式，并将其插入到HTML表格中进行展示。
<style>标签内定义了表格的样式，包括边框、内边距、文本对齐方式等。
<script>标签内定义了generateAdditionEquations函数，该函数通过双重循环生成所有加法算式，并将生成的HTML字符串插入到具有id="additionTable"的表格元素中。
使用window.addEventListener(‘load’, generateAdditionEquations)来监听页面加载完成事件，确保在页面加载完成后自动调用generateAdditionEquations函数。
页面的主要内容是一个标题和一个空的表格，表格的id为additionTable，用于动态插入生成的加法算式。

相关文章：

html5cssjs代码 002 50以内的加法算式

html5&css&js代码 002 一些基本概念 50以内的加法算式 一、代码二、解释 50以内的加法算式。 一、代码 <!DOCTYPE html> <html lang"en"> <head><title>50以内的加法算式</title><meta charset"UTF-8"><m…...

编程日记 2024/3/15 0:02:18

[React 进阶系列] React Context 案例学习：使用 TS 及 HOC 封装 Context

[React 进阶系列] React Context 案例学习&#xff1a;使用 TS 及 HOC 封装 Context 具体 context 的实现在这里&#xff1a;[React 进阶系列] React Context 案例学习&#xff1a;子组件内更新父组件的状态。 根据项目经验是这样的&#xff0c;自从换了 TS 之后&#xff0c;…...

编程日记 2024/3/15 0:01:17

网络编程：网络编程基础

一、网络发展 1.TCP/IP两个协议阶段 TCP/IP协议已分成了两个不同的协议&#xff1a; 用来检测网络传输中差错的传输控制协议TCP 专门负责对不同网络进行2互联的互联网协议IP 2.网络体系结构 OSI体系口诀&#xff1a;物链网输会示用 2.1网络体系结构概念 每一层都有自己独…...

编程日记 2024/3/14 23:57:14

力扣热题100_矩阵_73_矩阵置零

文章目录 题目链接解题思路解题代码 题目链接 73.矩阵置零 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&…...

编程日记 2024/3/14 23:56:13

C++程序设计-第四/五章 函数和类和对象【期末复习|考研复习】

前言 总结整理不易&#xff0c;希望大家点赞收藏。 给大家整理了一下C程序设计中的重点概念&#xff0c;以供大家期末复习和考研复习的时候使用。 C程序设计系列文章传送门&#xff1a; 第一章 面向对象基础 第四/五章 函数和类和对象 第六/七/八章 运算符重载/包含与继承/虚函…...

编程日记 2024/3/14 23:55:12

C#快速入门基础

本篇文章从最基础的C#编程开始学习&#xff0c;经过非常优秀的面向对象编程思想和方法的学习&#xff0c;为C#编程打下基础。 第 01 章 C#开发环境之VS使用和.NET平台基础 1.1 Visual Studio 开发环境 1.1.1 硬件环境 i5CPUi5CPU&#xff08;建议 4核 4线程或以上 &#xff0…...

编程日记 2024/3/14 23:53:11

UnityShader常用算法笔记(颜色叠加混合、RGB-HSV-HSL的转换、重映射、UV序列帧动画采样等，持续更新中)

一.颜色叠加混合 1.Blend混合 // 正常&#xff0c;透明度混合 Normal Blend SrcAlpha OneMinusSrcAlpha //柔和叠加 Soft Additive Blend OneMinusDstColor One //正片叠底 相乘 Multiply Blend DstColor Zero //两倍叠加 相加 2x Multiply Blend DstColor SrcColor //变暗…...

编程日记 2024/3/14 23:51:09

Vue3调用钉钉api，内嵌H5微应用单点登录对接

钉钉内嵌H5微应用单点登录对接 https://open.dingtalk.com/document/isvapp/obtain-the-userid-of-a-user-by-using-the-log-free 前端需要的代码 1、安装 dingtalk-jsapi npm install dingtalk-jsapi2、在所需页面引入 import * as dd from dingtalk-jsapi; // 引入钉钉a…...

编程日记 2024/3/14 23:50:08

UE5 局域网联机，寻找会话失败。

目录 参考资料&#xff1a; 尝试解决办法 1.1在【项目名.Build.cs】脚本中添加该行&#xff0c;添加后关闭编辑器&#xff0c;重新生成解决方案。​编辑 2.检查是否在同一个C类子网 参考资料&#xff1a; 1.Cant find session in LAN - Programming & Scripting / Mul…...

编程日记 2024/3/14 23:49:07

Windows系统安装MongoDB并结合内网穿透实现公网访问本地数据库

文章目录 前言1. 安装数据库2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射2.3 测试随机公网地址远程连接 3. 配置固定TCP端口地址3.1 保留一个固定的公网TCP端口地址3.2 配置固定公网TCP端口地址3.3 测试固定地址公网远程访问 前言 MongoDB是一个基于分布式文件存储的数…...

编程日记 2024/3/14 23:43:02

Hadoop伪分布式配置--没有DataNode或NameNode

一、原因分析 重复格式化NameNode 二、解决方法 1、输入格式化NameNode命令&#xff0c;找到data和name存放位置 ./bin/hdfs namenode -format 2、删除data或name&#xff08;没有哪个删哪个&#xff09; sudo rm -rf data 3、重新格式化NameNode 4、重新启动即可。...

编程日记 2024/3/14 23:41:01

柚见第十期(后端队伍接口详细设计)

创建队伍 用户可以 创建 一个队伍&#xff0c;设置队伍的人数、队伍名称&#xff08;标题&#xff09;、描述、超时时间 P0 队长、剩余的人数 聊天&#xff1f; 公开 或 private 或加密 信息流中不展示已过期的队伍 请求参数是否为空&#xff1f;是否登录&#xff0c;未登录不…...

编程日记 2024/3/14 23:35:57

【李沐论文精读】GPT、GPT-2和GPT-3论文精读

论文&#xff1a; GPT&#xff1a;Improving Language Understanding by Generative Pre-Training GTP-2&#xff1a;Language Models are Unsupervised Multitask Learners GPT-3&#xff1a;Language Models are Few-Shot Learners 参考&#xff1a;GPT、GPT-2、GPT-3论文精读…...

编程日记 2024/3/14 23:32:52

新版Android Studio火烈鸟 在新建项目工程时 无法选java的语言模板解决方法

前言 最近下载最新版androidstudio时 发现不能勾选java语言模板了 如果快速点击下一步 新建项目 默认是kotlin语言模板 这可能和google主推kt语言有关 勾选1 如图所示 如果勾选 No Activity 这个模板 是可以选java语言模板的 但是里面没有默认的Activity 勾选2 和以前的用法…...

编程日记 2024/3/14 23:29:47

github（不是git啊）操作记录（踩坑）

专栏介绍与文章目录-CSDN博客 github是程序员绕不开的东西。 网站打不开&#xff1f; 向雇主或有关部门申请合法信道连接互联网。 明明账号密码都对却登录失败&#xff1f; 向雇主或有关部门申请合法信道连接互联网。 重置密码失败&#xff1f; 向雇主或有关部门申请合法信道…...

编程日记 2024/3/14 23:28:47

【SpringCloud微服务实战01】Eureka 注册中心

前言 在 Eureka 架构中&#xff0c;微服务角色有两类&#xff1a; EurekaServer &#xff1a;服务端&#xff0c;注册中心 记录服务信息 心跳监控 EurekaClient &#xff1a;客户端 Provider &#xff1a;服务提供者&#xff0c;例如案例中的 user-service …...

编程日记 2024/3/14 23:27:46

Python之函数进阶-柯里化

Python之函数进阶-柯里化 柯里化是一种将多参数函数转化为单参数高阶函数的技术。 具体来说&#xff0c;柯里化过程会将一个接受多个参数的函数&#xff0c;转换成一系列接受一个参数的函数&#xff0c;这些函数在内部组合起来&#xff0c;最终完成原函数的运算。 柯里化是一…...

编程日记 2024/3/14 23:26:45

Spring Cloud项目整合Sentinel及简单使用

说明&#xff1a;Sentinel是阿里巴巴开发的微服务治理中间件&#xff0c;可用于微服之间请求的流量管控、权限控制、熔断降级等场景。本文介绍如何在Spring Cloud项目中整合Sentinel&#xff0c;以及Sentinel的简单使用。 环境 首先搭建一个简单的微服务环境&#xff0c;有以…...

编程日记 2024/3/14 23:22:42

【话题】人工智能迷惑行为大赏

随着ChatGPT热度的攀升&#xff0c;越来越多的公司也相继推出了自己的AI大模型&#xff0c;如文心一言、通义千问等。各大应用也开始内置AI玩法&#xff0c;如抖音的AI特效&#xff5e;在使用过程中往往会遇到一些问题&#xff0c;让你不得不怀疑&#xff0c;这真的是人工智能吗…...

编程日记 2024/3/14 23:17:34

Jsp在Javaweb中扮演什么角色？

1.什么是Jsp JSP&#xff08;Java Server Pages&#xff0c;Java 服务器页面&#xff09;是一种动态网页技术&#xff0c;它允许在 HTML 页面中嵌入 Java 代码&#xff0c;并由 Web 服务器在请求页面时动态生成 HTML 页面。JSP 通常用于创建动态 Web 内容&#xff0c;如交互式表…...

编程日记 2024/3/14 23:15:33

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2026/1/31 8:08:07

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2026/1/31 14:55:53

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2026/2/8 5:28:24

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2026/2/6 13:42:22

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2026/1/29 9:12:46

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2026/1/24 14:43:35

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2026/2/5 18:58:39

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2026/1/26 3:45:28