编程笔记 html5cssjs 003 协作、约定与标准 50以内的乘法算式

编程笔记 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.mzph.cn/news/729734.shtml

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

相关文章

RocketMQ的事务消息是如何实现的?

RocketMQ的事务消息是通过 TransactionListener接口来实现的。 在发送事务消息时,首先向RocketMQ Broker 发送一条‘half消息’(半消息),半消息将被存储在broker端的事务消息日志中,但是这个消息还不能被消费者消费。 接下来,在半消息发送成功后,应用程序通过执行本地事务…

C#,煎饼排序问题(Pancake Sorting Problem)算法与源代码

1 煎饼排序问题 给定一个未排序的数组&#xff0c;任务是对给定数组进行排序。您只能在阵列上执行以下操作。 翻转&#xff08;arr&#xff0c;i&#xff09;&#xff1a;将数组从0反转为i 示例&#xff1a; 输入&#xff1a;arr[]{23、10、20、11、12、6、7} 输出&#xff1a…

开发Chrome扩展插件

1.首先开发谷歌chrome扩展插件&#xff0c;没有严格的项目结构目录&#xff0c;但是需要保证里面有一个mainfest.json文件 (必不可少的文件)。在这个文件里有三个属性必不可少&#xff1a;name、version、mainfest_version&#xff1b; // 清单文件的版本&#xff0c;这个必须写…

查看Linux服务器配置

# chkconfig --list # 列出所有系统服务 # chkconfig --list | grep on # 列出所有启动的系统服务 # ifconfig # 查看所有网络接口的属性 # iptables -L # 查看防火墙设置 # route -n # 查看路由表 # netstat -lntp # 查看所有监听端口 # netstat -antp # 查看所有已经建立的连…

二叉搜索树(BST)的创建及增,删,查,改(详解)

目录 初识二叉搜索树&#xff08;BST&#xff09;&#xff1a; 二叉搜索树查找元素&#xff1a; 二叉搜索树修改元素: 二叉搜索树中的增加元素&#xff1a; 二叉搜索树中的删除元素&#xff1a; 初识二叉搜索树&#xff08;BST&#xff09;&#xff1a; 一张图简要概括二…

Qt桌面白板工具其三(解决半透明桌面画布刷新透明像素时产生耗时,导致的画笔卡顿问题)

一、问题 前两篇文章写了很多有关桌面画板的实现方法&#xff0c;这个过程中&#xff0c;画笔的卡顿问题还是无法彻底解决。 先简单回顾一下我实现桌面画板的逻辑&#xff1b; 1.父窗口&#xff1a;一个透明窗口&#xff0c;通过设置带有透明度的QColor bg_color&#xff0c;以…

高级语言讲义2016计专(仅高级语言部分)

1.斐波那契序列的第n项可以表示成以下形式&#xff0c;编写一个非递归函数&#xff0c;返回该数列的第n项的数值 #include <stdio.h>int func(int n) {if(n1||n2)return 1;int p1,q1,num;for(int i3; i<n; i) {numpq;qp;pnum;}return num; } 2.在MXN的二维数组A中&am…

Django框架连接数据库

这里以同时连接sqlite、mysql、redis为例 首先要下载对应的sqlite、mysql、redis相应的模块插件 开始上代码 settings.py 配置文件 import os # 引入mysql模块 import pymysql # pymysql.install_as_MySQLdb()来确保pymysql能够兼容这些代码 pymysql.install_as_MySQLdb()# 数…

Go中的控制反转 IoC

以嵌入组合的方式实现控制反转 IoC: 控制反转是一种解耦思想&#xff0c;将原本耦合在业务逻辑中的控制逻辑单独拆出来实现&#xff0c;不再让业务逻辑在处理业务的同时还要去实现控制逻辑&#xff0c;而是专注处理业务。在业务逻辑代码中耦合进控制逻辑&#xff0c;会导致在编…

window搭建本地mongo数据库并导入数据

1 window下载mongo数据库 官网&#xff1a;www.mongodb.com 选择 Products > Community Edition 就能进入社区版 在这里下载 windows 版对应的安装包 注意&#xff1a;6.0.1 版本的 MongoDB 配置环境变量有问题&#xff0c;并且我不知道怎么解决&#xff0c;如果想要避免出…

算法学习05:离散化、区间合并

算法学习05&#xff1a;离散化、区间合并 文章目录 算法学习05&#xff1a;离散化、区间合并前言需要记忆的模版&#xff1a;一、离散化1.例题&#xff1a;离散化 区间和&#xff1a;拓展: 二、区间合并&#xff08;贪心&#xff09;1.例题&#xff1a; 总结 前言 需要记忆的模…

基于FastAPI构造一个AI模型部署应用

前言 fastapi是目前一个比较流行的python web框架&#xff0c;在大模型日益流行的今天&#xff0c;其云端部署和应用大多数都是基于fastapi框架。所以掌握和理解fastapi框架基本代码和用法尤显重要。 需要注意的是&#xff0c;fastapi主要是通过app对象提供了web服务端的实现代…

tidyverse提取MergedGenes列包含“sss“字符的行

要使用tidyverse包在R中提取包含特定字符串“sss”字符的MergedGenes列的行&#xff0c;可以使用dplyr包中的filter()函数和str_detect()函数来实现。这里的str_detect()函数来自stringr包&#xff0c;它是tidyverse的一部分&#xff0c;用于检测字符串是否符合给定的模式。以下…

基于php的用户登录实现(v1版)(持续迭代)

目录 版本说明 数据库连接 登录页面&#xff1a;login.html 登录处理实现&#xff1a;login.php 用户欢迎页面&#xff1a;welcome.php 用户注册页面&#xff1a;register.html 注册执行&#xff1a;DoRegister.php 版本说明 v1实现功能&#xff1a; 数据库连接&#x…

SOCKS5代理与网络安全的舞蹈

在这个信息爆炸的时代&#xff0c;网络安全成为了每个网民乃至每个软件工程师的头等大事。今天&#xff0c;我们要聊的是如何使用SOCKS5代理和代理IP来保护我们的网络安全&#xff0c;同时还不失趣味性。这听起来可能有点枯燥&#xff0c;但别担心&#xff0c;我们会用一种轻松…

自定义限流注解

自定义注解 /*** 速率限制注解** author: 张定辉* date: 2024/3/5 21:29* description: 速率限制注解*/ Target({ElementType.TYPE,ElementType.METHOD}) Retention(RetentionPolicy.RUNTIME) public interface RateLimit {/*** SPEL表达式* <p>* 1.使用方法的基本类型参…

SpringAOP面向切面编程-代理

目录 1.静态代理 2.动态代理 代理在开发中实现的方式具体有两种&#xff1a;静态代理&#xff0c;[动态代理技术] 1.静态代理 主动创建代理类 public class CalculatorStaticProxy implements Calculator {// 将被代理的目标对象声明为成员变量private Calculator target;…

面试问答之MySQL数据库进阶

文章目录 &#x1f412;个人主页&#xff1a;信计2102罗铠威&#x1f3c5;JavaEE系列专栏&#x1f4d6;前言&#xff1a;&#x1f380; MySQL架构&#x1f415;数据库引擎&#x1f415; InnoDB存储存储引擎&#x1f415;MYISAM &#x1f3e8;索引&#x1f415;哪些情况需要创建…

vue3+element-plus el-input 自动获取焦点

虽然element有提供input的autofocus属性&#xff0c;但是当我们第二次进入页面就会发现autofocus已经不再生效&#xff0c;需要通过onMounted去触发input的focus解决这个问题。 1.先给el-input绑定一个ref&#xff1a;<el-input ref"inputRef" v-model"inp…

景联文科技:专业提供高质量大语言模型训练数据

2024年&#xff0c;数字经济被再次写入政府工作报告中&#xff0c;报告指出要深化大数据、人工智能等研发应用&#xff0c;打造具有国际竞争力的数字产业集群。 大模型作为生成式人工智能的基础&#xff0c;日益成为国际科技竞争的焦点。人大代表杨剑宇指出&#xff0c;尽管我国…