编程笔记 html5cssjs 002 一些基本概念 50以内的加法算式

编程笔记 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,用于动态插入生成的加法算式。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Elasticsearch - Java API【一】日期直方图

Elasticsearch 按时间进行聚合统计 需求&#xff1a; 1、统计某一个小时&#xff0c;每分钟的数据条数 2、统计某一天&#xff0c;每个小数的数据条数 3、统计一周&#xff0c;每天的数据条数 pom依赖 <dependency><groupId>org.springframework.boot</groupId&…

计算机毕业设计选题方向:Python与人工智能的结合

引言 在当今的计算机科学领域&#xff0c;Python语言因其简洁、易读和强大的库支持而备受青睐。特别是在人工智能&#xff08;AI&#xff09;领域&#xff0c;Python提供了丰富的工具和框架&#xff0c;使得开发智能应用变得更加高效。本指南旨在为计算机专业的学生提供一系列结…

mysql日常优化的总结

文章目录 一、数据表结构相关优化建字段类型注意事项1. int类型的选择2.varchar、char、text类型3.date、datetime、timestamp类型 表规划1. 垂直分表2. 水平分表 二、查询语句优化1.对于字段多的表&#xff0c;避免使用SELECT *2.避免使用!操作符3.避免使用null做条件4.like查…

ElasticSearchLinux安装和springboot整合的记录和遇到的问题

前面整合遇到的一些问题有的记录在下面了&#xff0c;有的当时忘了记录下来&#xff0c;希望下面的能帮到你们 1&#xff1a;Linux安装ES 下载安装&#xff1a; 参考文章&#xff1a;连接1 连接2 wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch…

PostgreSQL 安装部署

文章目录 一、PostgreSQL部署方式1.Yum方式部署2.RPM方式部署3.源码方式部署4.二进制方式部署5.Docker方式部署 二、PostgreSQL部署1.Yum方式部署1.1.部署数据库1.2.连接数据库 2.RPM方式部署2.1.部署数据库2.2.连接数据库 3.源码方式部署3.1.准备工作3.2.编译安装3.3.配置数据…

LightDB ecpg 支持 exec sql execute ... end-exec【24.1】【oracle 兼容】

LightDB 从24.1 版本开始支持 oracle pro*c 中执行匿名块的语法&#xff08;之前可以通过do 语句执行匿名块&#xff09;&#xff1a; EXEC SQL EXECUTEanonymous block END-EXEC;因为匿名块不是SQL标准的一部分&#xff0c;所以此用法也不存在于SQL标准中。 示例 #include …

手机app制作商用系统软件开发

手机端的用户占比已经超过了电脑端的用户量&#xff0c;企业想要发展手机端的业务就必须拥有自己的app软件&#xff0c;我们公司就是专门为企业开发手机软件的公司&#xff0c;依据我们多年的开发经验为大家提供在开发app软件的时候怎么选择开发软件的公司。 手机app制…

导出RWKV模型为onnx

测试模型&#xff1a; https://huggingface.co/RWKV/rwkv-5-world-3b 导出前对modeling_rwkv5.py进行一个修改&#xff1a; # out out.reshape(B * T, H * S) out out.reshape(B * T, H * S, 1) # <<--- modified out F.group_norm(out, nu…

vue element plus Border 边框

我们对边框进行统一规范&#xff0c;可用于按钮、卡片、弹窗等组件里。 边框样式# 我们提供了以下几种边框样式&#xff0c;以供选择。 NameThicknessDemoSolid1pxDashed2px 圆角# 我们提供了以下几种圆角样式&#xff0c;以供选择。 No Radius border-radius: 0px Small …

ros | 如何在ubuntu上安装ros

只能说小鱼真的强&#xff01;&#xff01;&#xff01; wget http://fishros.com/install -O fishros && bash fishros一行命令安装 至于版本下面这个可能不太准确&#xff0c;自己建议再去查以下 Ubuntu ROS1 14.04 LTS indigo 16.04 LTS Kinetic 18.…

【竞技宝】LOL:knight阿狸伤害爆炸 BLG2-0轻取RA

北京时间2024年3月11日,英雄联盟LPL2024春季常规赛继续进行,昨日共进行三场比赛,首场比赛由BLG对阵RA。本场比赛BLG选手个人实力碾压RA2-0轻松击败对手。以下是本场比赛的详细战报。 第一局: BLG:剑魔、千珏、妮蔻、卡牌、洛 RA:乌迪尔、蔚、阿卡丽、斯莫德、芮尔 首局比赛,B…

QMS质量管理系统在离散型制造业的应用及效益

在离散型制造行业中&#xff0c;质量管理是确保产品满足客户期望和市场需求的关键环节。QMS质量管理系统的实施为企业提供了一种全面、系统的方法来管理和改进质量。 例如&#xff0c;在汽车制造行业&#xff0c;QMS质量管理系统可以应用于零部件采购和装配过程的质量控制。通过…

语音合成(TTS) 声音生成(TTA)最新技术 - 2024- 附论文地址和代码地址

文章目录 1. 我们的模型2. 声音生成模型&#xff1a;AudioLDM3. 语音合成模型&#xff1a;VoiceLDM 生成式 AI 是最近一年最受关注的课题&#xff0c;可以应用于游戏、虚拟现实等智能交互场景。 1. 我们的模型 由中国科学院计算所和东芝中国研发中心联合发表于AAAI 2024 论文…

Spring Cloud GateWay整合熔断器实现限流

其实网关是很强大&#xff0c;能做的事情很多&#xff0c;包含很多过滤器包括限流&#xff0c;具体的网关可以参考我的另外一篇博文Spring Cloud GateWay-过滤器 今天我们来说下网关如何限流&#xff0c;主要两种方案&#xff1a; Spring Cloud GateWay整合hystrx environme…

PCBA方案设计充气泵设计

随着科技的不断进步&#xff0c;充气泵在户外活动、露营和旅行中变得越来越常见。而充气泵的性能和稳定性主要依赖于其控制系统&#xff0c;其中芯片的设计和开发是充气泵方案的关键。SIC8833芯片是一款专门为充气泵设计的芯片&#xff0c;接下来我们来讲下充气泵方案芯片SIC88…

计网Lesson19 - 应用层之WWW

文章目录 1. 应用层概念1.1 应用层协议的定义 2. 应用层体系结构2.1 客户/服务器模式2.2 P2P模式&#xff08;点对点方式&#xff09; 3. 万维网3.1 概述3.2 统一资源定位符3.3 万维文档HTMLCSSJavaScript 1. 应用层概念 应用层是计算机网络体系结构的最顶层&#xff0c;是设计…

面试官:Spring Boot 是否可以使用 XML 配置?如果可以的话怎么配置

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:Spring Boot 是否可以使用 XML 配置?如果可以的话怎么配置 Spring Boot 主要推崇使用注解驱动的 Java 配置方式,尤其是通过 @Configuration、@C…

USACO 2023 December, SilverProblem 1. Bovine Acrobatics题解

有n件物品&#xff0c;m组叠罗汉&#xff0c;相邻罗汉差值至少为k。 第i件物品的重量和数量 由于m最大范围为1e9&#xff0c;开辟m组罗汉槽存储罗汉值&#xff0c;内存空间不够。 分析样例&#xff1a; 3 5 2 9 4 7 65 5 一开始我想的是层数&#xff0c;但是一层中存在数据…

初学Vue——Vue路由

0 什么是Vue路由 类似于Html中的超链接(<a>)一样&#xff0c;可以跳转页面的一种方式。 前端路由&#xff1a;URL中hash(#号之后的内容)与组件之间的对应关系&#xff0c;如下图&#xff1a; 当我们点击左侧导航栏时&#xff0c;浏览器的地址栏会发生变化&#xff0c;路…

python的数据容器--元组

元组的定义 #元组的定义 t1 (1,"hello",True) t2() t3tuple() t4("hello",) print(f"t4的数据类型{type(t4)},t4的内容是{t4}")#元组的嵌套使用 t5((1,2,3),(4,5,6)) print(f"t5的类型是{type(t5)}")#元组的元素提取 print(f"{t…