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 用循环嵌套输出乘法表。外循环控制行数,内循环控制当前行要输出的乘法表达式,在页面上输出九九乘法表
122 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
1316 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
96 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
123 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
81 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
73 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
93 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
84 3
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
63 3
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物医院系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物医院系统附带文章源码部署视频讲解等
56 2