JavaScript输出乘法口诀表

简介: JavaScript输出乘法口诀表

问题:用JavaScript编写一个乘法口诀表,然后输出在页面的指定位置。

1.在html部分写一个将要用来存放乘法口诀表的盒子。

  <div id="box">
 
    </div>

2.设置一下盒子的样式。

    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        table {
            /* border: 1px solid #222; */
            border-collapse: collapse;
            margin: 10px auto;
        }
 
        td {
            border: 1px solid #222;
            padding: 20px;
        }
 
        #box {
            width: 1000px;
            height: 1000px;
            border: 1px solid red;
            margin: 100px;
        }
    </style>

3.编写js部分的关键代码。

 <script>
        // 九九乘法口诀表
 
        let str = '<table>'
        //外层循环控制行数
        for (let i = 1; i <= 9; i++) {
            str += '<tr>'
            //内层循环控制td的个数
            for (let j = 1; j <= i; j++) {
                str += `<td>
                           ${j}x${i}=${j*i}
                        
                        
                        </td>`
            }
            str += '</tr>'
        }
        str += '</table>'
        // console.log(str);
        document.write(str);
        document.querySelector('#box').innerHTML = str;
    </script>
相关文章
|
JavaScript 前端开发
使用 JavaScript 用循环嵌套输出乘法表。外循环控制行数,内循环控制当前行要输出的乘法表达式,在页面上输出九九乘法表
使用 JavaScript 用循环嵌套输出乘法表。外循环控制行数,内循环控制当前行要输出的乘法表达式,在页面上输出九九乘法表
123 0
|
JavaScript 前端开发 Java
JavaScript中的字符串乘法
原文 原文地址:http://www.davidflanagan.com/2009/08/string-multipli.html 原作者:David Flanagan In Ruby, the "*" operator used with a string on the left and a number on the right does string repetition. "Ru
1317 0
|
20天前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
20 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
101 2
|
16天前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
15 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
140 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
85 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
76 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
97 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
86 3