编程笔记 html5cssjs 003 50以内的乘法算式

news/2024/4/21 12:38:04/文章来源:https://blog.csdn.net/qq_40071585/article/details/136563160

编程笔记 html5&css&js 003 50以内的乘法算式

  • 一、代码
  • 二、解释

综合应用代码示例。50以内的乘法算式。

一、代码

<!DOCTYPE html>
<html lang="en">
<head><title>20以内的乘法</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>/*** 生成1到19以内乘法的表格*/function generateAdditionEquations() {let html = '';for(let i = 1; i <= 19; i++) {html += '<tr>';for(let j = 1; j <= i; j++) {// 每九个算式换一行,以保持表格的整洁if((j % 10) === 1) {html += '<tr>';}html += `<td>${j} * ${i} = ${i*j}</td>`;// 当j是10的倍数或者j等于i时,结束当前行的绘制if((j % 10) === 0 || i === j) {html += '</tr>';}}html += '</tr>';}// 将生成的HTML表格代码注入到页面中document.getElementById('additionTable').innerHTML = html;}// 页面加载完成后自动调用generateAdditionEquations函数window.onload = generateAdditionEquations;</script>
</head>
<body><!-- 乘法表格将在这里显示 --><table id="additionTable"><tbody></tbody></table>
</body>
</html>

二、解释

这段HTML代码定义了一个页面,该页面在加载完成后会自动生成一个乘法表格,展示1到19以内的乘法算式。生成的表格样式为整洁的网格状,每个乘法算式都以单元格的形式呈现。
具体实现上,通过JavaScript函数generateAdditionEquations来生成HTML代码字符串,然后将其注入到页面指定的

元素中。函数使用嵌套的循环遍历1到19之间的数字,生成对应的乘法算式,并按照每九个算式换一行的规则来组织表格的行。
页面加载完成后,通过window.onload事件自动调用generateAdditionEquations函数,确保乘法表格能及时生成并显示在页面上。

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

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

相关文章

怎么做不限扫码次数的文件活码?文件可长期扫描展现下载

如何制作不限扫码次数的文件二维码呢&#xff1f;将文件转二维码后分享给其他人&#xff0c;是现在非常方便的一种文件传输方式。很多小伙伴在制作文件二维码的时候&#xff0c;比较担心的一个问题&#xff0c;就是二维码可以扫码的次数&#xff0c;担心达不到自己预期的效果&a…

JVM系列:垃圾回收器(GC)

JVM系列&#xff1a;垃圾回收器&#xff08;GC&#xff09; &#x1f600; 执行引擎将class文件加载至JVM内存中运行。在运行过程中&#xff0c;需要在内存中动态创建和销毁对象。在传统的C/C语言中&#xff0c;需要手动进行对象销毁以避免内存泄漏。而在Java中&#xff0c;引入…

有名信号量、网络协议模型、UDP编程发送端

我要成为嵌入式高手之3月5日Linux高编第十五天&#xff01;&#xff01; ______________________________________________________ 学习笔记 有名信号量 1、创建semget #include <sys/types.h> #include <sys/ipc.h> #include <sys/sem.h> int semget(…

下载一些ROS的包的方式

ROS Index 我们可以去ROS Index网站下载一些我们需要的包。打开浏览器在网址框输入index.ros.org。或者点击此处链接ROS Index 在这个网站中我们可以浏览并找到我们需要的包&#xff0c;也可以下载它的源代码或者仅安装到我们的系统中来使用。&#xff08;安装过程在终端中进行…

云计算 3月5号 (DNS域名解析及部署)

DNS域名解析服务 1.DNS介绍 DNS 是域名系统 (Domain Name System) 的缩写&#xff0c;是因特网的一项核心服务&#xff0c;它作为可以将域名和IP地址相互映射的一个分布式数据库&#xff0c;能够使人更方便的访问互联网&#xff0c;而不用去记住能够被机器直接读取的IP数串。…

如何防御udp攻击

UDP Flood是互联网上最经典的DDoS&#xff08;Distributed Denial of Service&#xff09;攻击之一。攻击者在短时间内向目标设备发送大量的UDP报文&#xff0c;导致链路拥塞甚至网络瘫痪。一般的UDP报文由攻击工具伪造&#xff0c;通常在数据段具备相同的特征&#xff0c;另一…

Hadoop的UI页面介绍

文章目录 前言一、HDFS的UI页面介绍1. 概述页面2. 数据节点页面2.1 单个数据节点信息页面 3. 数据卷故障信息页面4. 快照信息页面5. 启动进度信息页面6. 文件系统页面 二、YARN的UI页面介绍1. 应用程序页面2. 集群相关信息页面3. 集群节点信息页面4. 应用程序调度信息页面5. 工…

请编程输出无向无权图各个顶点的度 ← STL vector 模拟邻接表存图

【题目描述】 请利用 STL vector 模拟邻接表存图&#xff0c;编程输出无向无权图各个顶点的度。【输入样例】 5 6 1 3 2 1 1 4 2 3 3 4 5 1【输出样例】 4 2 3 2 1【算法分析】 本例利用 STL vector 模拟实现邻接表。代码参见&#xff1a;https://blog.csdn.net/hnjzsyjyj/arti…

初阶数据结构之---二叉树的顺序结构-堆

引言 今天要讲的堆&#xff0c;不是操作系统虚拟进程地址空间中&#xff08;malloc&#xff0c;realloc等开空间的位置&#xff09;的那个堆&#xff0c;而是数据结构中的堆&#xff0c;它们虽然名字相同&#xff0c;却是截然不同的两个概念。堆的底层其实是完全二叉树&#x…

Web核心

JavaWeb技术栈 B/S架构&#xff1a;Browser/Server &#xff0c; 浏览器/服务器 架构模式&#xff0c;其特点为&#xff0c;客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器&#xff0c;获取Web资源&#xff0c;服务器把Web资源…

3.7号freeRtoS

1. 串口通信 配置串口为异步通信 设置波特率&#xff0c;数据位&#xff0c;校验位&#xff0c;停止位&#xff0c;数据的方向 同步通信 在同步通信中&#xff0c;数据的传输是在发送端和接收端之间通过一个共享的时钟信号进行同步的。这意味着发送端和接收端的时钟需要保持…

Postman(注册,使用,作用)【详解】

目录 一、Postman 1. Postman介绍 2. 安装Postman 3. 注册帐号再使用(可保存测试记录) 4. 创建workspace 5. 测试并保存测试记录 一、Postman postman工具可以发送不同方式的请求,浏览器只能发送get请求(所有用这个工具) 在前后端分离开发模式下&#xff0c;前端技术人员…

服务器配置禁止IP直接访问,只允许域名访问

联网信息系统需设置只允许通过域名访问&#xff0c;禁止使用IP地址直接访问&#xff0c;建议同时采用云防护技术隐藏系统真实IP地址且只允许云防护节点IP访问服务器&#xff0c;提升网络安全防护能力。 一、Nginx 修改配置文件nginx.conf&#xff0c;在server段里插入正则表达式…

某准网招聘接口逆向之WebPack扣取

​​​​​逆向网址 aHR0cHM6Ly93d3cua2Fuemh1bi5jb20v 逆向链接 aHR0cHM6Ly93d3cua2Fuemh1bi5jb20vc2VhcmNoP3BhZ2VOdW09MSZxdWVyeT1weXRob24mdHlwZT01 逆向接口 aHR0cHM6Ly93d3cua2Fuemh1bi5jb20vYXBpX3RvL3NlYXJjaC9qb2IuanNvbg 逆向过程 请求方式&#xff1a;GET 参数构成…

qt 添加 Mingw 组件 qt没有被正确安装,请运行make install QT License check failed! Giving up…

已经安装了qt&#xff0c;想添加mingw组件&#xff0c;步骤 1、双击打开MaintenanceTool.exe&#xff0c; 2、 3、这里只有mingw7.3.0 64-bit的qt库&#xff0c;选上&#xff0c;并在下面的tools中选择对应版本的mingw编译器&#xff0c;以及CDB Debugger。对于其他版本的Mi…

【解决方案】ArcGIS Engine二次开发时,运行后出现“正尝试在 OS 加载程序锁内执行托管代码。不要尝试在 DllMain...”

我们在做ArcGIS Engine二次开发时&#xff0c;特别是新手&#xff0c;安装好了开发环境&#xff0c;满怀信心的准备将按照教程搭建好的框架在Visual Studio中进行运行。点击运行后&#xff0c;却出现了“正尝试在 OS 加载程序锁内执行托管代码。不要尝试在 DllMain 或映像初始化…

【码银送书第十三期】《ChatGPT原理与架构》

OpenAI 在 2022 年 11 月推出了人工智能聊天应用—ChatGPT。它具有广泛的应用场景&#xff0c;在多项专业和学术基准测试中表现出的智力水平&#xff0c;不仅接近甚至有时超越了人类的平均水平。这使得 ChatGPT 在推出之初就受到广大用户的欢迎&#xff0c;被科技界誉为人工智能…

GPT-4 等大语言模型(LLM)如何彻底改变客户服务

GPT-4革命&#xff1a;如何用AI技术重新定义SEO策略 在当今快节奏的数字时代&#xff0c;客户服务不再局限于传统的电话线或电子邮件支持。 得益于人工智能 (AI) 和自然语言模型 (NLM)&#xff08;例如 GPT-4&#xff09;的进步&#xff0c;客户服务正在经历革命性的转变。 在这…

Web3 之路:构建开放、透明的数字生态系统

随着区块链技术的迅速发展&#xff0c;Web3正在成为数字世界的新引擎&#xff0c;重新定义着我们的生活和工作方式。在这个数字化的时代&#xff0c;我们目睹着一个全新的网络生态正在逐渐成形&#xff0c;其中开放性和透明性是其核心特征。让我们深入探讨&#xff0c;Web3如何…

HttpResponse响应模块设计与实现(http模块三)

目录 类功能 类定义 类实现 编译测试 类功能 类定义 // HttpResponse响应模块功能设计 class HttpResponse { private:int _statu;bool _redirect_flag; // 重定向标志std::string _body;std::string _redirect_url; // 重定向地址std::unordered_map<std::string, std…