javascrip创建九九乘法表

最新推荐文章于 2024-07-14 15:54:59 发布
最新推荐文章于 2024-07-14 15:54:59 发布
阅读量171 收藏
点赞数 1
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h949910047/article/details/132146340
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            width: 100px;
            padding: 5px 10px;
            border: 1px solid pink;
            margin: 2px;
            border-radius: 5px;
            box-shadow: 2px 2px 2px rgba(255, 192, 204, .4);
            background-color: rgba(255, 192, 204, .1);
            color: hotpink;
        }
    </style>
</head>
<body>
    <script>
        for (let i = 1; i <= 9; i++) {
            for (let j =1; j <= i; j++) {
                document.write(`<span>${j} * ${i} = ${i * j}</span>`)
            }
            document.write('<br>')
        }
    </script>
</body>
</html>

 

弘治长安
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
java script实现九九乘法表
weixin_50027754的博客
03-18 627
1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
Java Script 经典案例九九乘法口诀表的打印
csgojingyu的博客
11-07 85
其中要注意的点是内层循环，内层循环（横向循环）的变量 j 一定要小于等于纵向循环 i ，因为横向的打印数是和纵向的层数是相等的，所以 j 是的值是不能超过 i 的。表分为横向打印和纵向打印，，那么就需要用到双重for循环嵌套，外层循环的作用是当这一层横向打印完毕继续打印下一行，内层循环实现横向打印。表格来包裹乘法口诀表，最为简单和简洁。最后添加css样式即可，下面附上完整代码。下面来看看Javascript部分的代码。
javascript实现九九乘法表
hyswl666的博客
07-25 525
在外层循环中，我们将每一行构造为一个HTML的<tr>元素，并使用内层循环生成<td>元素，将每个乘积作为单元格的内容。具体来说，您可以使用document.createElement()函数在页面中创建一个表格元素，然后使用innerHTML属性将每一行添加到表格中。内层循环从1循环到10，每当执行一次时，就将当前的行数和列数相乘，并将结果添加到该行的字符串中。在这个代码中，我们首先使用一个外层循环，控制表格的行数，从1循环到10。最后，我们将这些HTML元素添加到body元素中，使之成为文档的一部分。
html 视频列表页面,爱奇艺视频播放列表.html
weixin_30311521的博客
06-03 1564
爱奇异视频播放列表*{margin: 0;padding: 0;}div{width: 1000px;margin: 0 auto;}div h3{font-size: 18px;line-height: 40px;}li {display: inline-block;margin: 5px;padding: 10px;}img{border-radius: 10px;}div ul li:hov...
使用JavaScript和CSS实现不同行颜色的九九乘法表
如梦山河的博客
03-15 1231
源代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>乘法九九表</title> <style> table{ background-color: grey; } #odd{ background-color:blue ; } #even...
JavaScript——实现九九乘法表
热门推荐
Melonico的博客
06-22 1万+
这是一张99乘法表，我们需要用JavaScript来实现这个99乘法表 在观察表后，可以发现每一个表达式都可以用 a*b=c 来表示出来，而c可以借用算术计算出来，所以我们只需要用到两个变量 基础实现 var i,j; 我们可以将每个表达式理解为列数×行数，如2×5则为第二列×第五行 观察可得，行数最多为9行，列数最多也为9列 通过两个循环嵌套可以写出一个基础的乘法表 代码 var i; //定义行数 var j; //定义列数 for (i = 1;i <= 9;i++){ //循环9行 .
JavaScript实现九九乘法表的简单实例
10-22
下面小编就为大家带来一篇JavaScript实现九九乘法表的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript编写九九乘法表（两种任选）
10-20
在JavaScript编程中，九九乘法表是一种常见的练习，它可以帮助初学者理解循环、条件语句和字符串操作等基础知识。本文将详细介绍两种不同的方法来实现九九乘法表。 **方法一：使用嵌套循环与条件判断** 第一种方法...
用JS写九九乘法表.zip
10-20
在JavaScript编程语言中，"九九乘法表"是一个经典的练习项目，用于学习数组操作、循环结构以及字符串拼接等基础知识。在这个项目中，我们将详细探讨如何利用JS编写九九乘法表。 首先，让我们理解九九乘法表的结构。...
sql语句实现四种九九乘法表
12-15
以下将详细解释四种不同的方法来创建九九乘法表。 1. **左下角九九乘法表** 这种方法使用了两个嵌套的WHILE循环和一个IF条件来生成九九乘法表。变量`@I`和`@J`分别用于跟踪行和列，`@S`存储每一行的字符串。外层...
Java实现for循环嵌套——九九乘法表
m0_59401963的博客
03-23 1491
for循环结构= 循环条件（开始条件，结束条件，修改条件）+循环内容for循环嵌套是指在一个for循环语句内部再嵌套一个或多个for 循环语句。在 for 循环嵌套中，外层循环控制外层循环变量的变化，内层循环则控制内层循环变量的变化。每次外层循环执行一次，内层循环都会完整地执行一遍。
JavaScript 编写九九乘法表
新入菜鸟
01-09 1万+
//九九乘法口诀表 for(var i=1;i&amp;amp;amp;amp;amp;amp;lt;=9;i++){ // document.write(i); for(j=1;j&amp;amp;amp;amp;amp;amp;lt;=i;j++){ document.write('&amp;amp;amp;amp;amp;amp;amp;nbsp');
使用JavaScript在html中实现99乘法表
liangruilz的博客
05-09 1万+
使用JavaScript在html中实现99乘法表
JavaScript实现四种界面的九九乘法表
suwu150
11-05 1万+
实现效果如下所示： 1： 2： 3： 4： 实现代码如下所示： Insert title here function Mult_01() { document.write(""); document.write(""); for(var i=1;i<=9;i++) { for(var j=1
【JavaScript 报错】未捕获的URI错误：Uncaught URIError
Allen-
07-11 664
Uncaught URIError 是JavaScript中常见的一种错误，通常发生在全局URI处理函数（如 decodeURIComponent、encodeURIComponent）使用不当时。本文将详细介绍 Uncaught URIError 错误的常见原因及其解决方案。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 281
原生WebSocket： new WebSocket。
ReactRouter v6升级的步骤
最新发布
feixin369的博客
07-14 172
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
商品详情使用富文本编辑器
m0_74356429的博客
07-13 114
2、因为好多页面都需要用到，封装富文本编辑器组件。3、在商品编辑和商品添加页面添加富文本编辑器。Editor.vue代码。
javascript的高级用法(循环实现数组map方法)
阿乐的博客
07-13 106
值得一提的是，map的第二个参数就是第一个参数回调中的这个点。如果第一个参数是箭头函数，则设置第二个 this 将无效，因为箭头函数的词法绑定。另一个是稀疏数组的处理，HasOwnProperty 用于判断当前下标的元素是否存在于数组中，欢迎大家在评论区交流。使用方法：将selfMap注入到Array.prototype中（下面数组的迭代方法也是如此）
使用javascript打印九九乘法表，要求隔行换色
05-31
以下是使用 JavaScript 打印九九乘法表并隔行换色的代码实现： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>九九乘法表</title> <style> table { border-collapse: collapse; } td { width: 40px; height: 40px; text-align: center; border: 1px solid black; } .odd { background-color: #eee; } .even { background-color: #fff; } </style> </head> <body> <table> <tbody> <script> for (var i = 1; i <= 9; i++) { document.write('<tr>'); for (var j = 1; j <= i; j++) { var result = i * j; var className = (i + j) % 2 == 0 ? 'even' : 'odd'; document.write('<td class="' + className + '">' + i + '*' + j + '=' + result + '</td>'); } document.write('</tr>'); } </script> </tbody> </table> </body> </html> ``` 首先，我们创建了一个表格，并为表格中的单元格设置了样式。接着使用 JavaScript 进行循环，生成九九乘法表中的每一个元素。在生成单元格时，我们通过计算行列数的和来判断该单元格应该使用哪种颜色的背景，然后给单元格添加相应的 CSS 类名，来实现隔行换色。最后将生成的表格插入到 HTML 页面中。 运行代码，即可在网页上看到生成的九九乘法表。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值