九九乘法表的不同表现形式;

2024-02-17 20:08

本文主要是介绍九九乘法表的不同表现形式;,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <style>
        table{
            width:700px;
            height:300px;
            border:1px solid red;
            border-collapse:collapse;
            margin:0 auto;
        }
        tr,td{
            border:1px solid red;
        }
        caption{
            font-size:24px;
            font-weight:700;
        }
    </style>
</head>
<body>


</body>
<script>


    //第一个;
    //获取body
    var body = document.getElementsByTagName("body")[0];
    //动态创建table
    tab = document.createElement("table");
    //动态创建caption
    var cap = document.createElement("caption");
    //将动态创建的caption添加到table中
    tab.appendChild(cap);
    //动态创建caption的文本;
    var captext = document.createTextNode("使用for循环实现九九乘法表--左上角");
    //将cap的文本添加到cap中;
    cap.appendChild(captext);
//    将动态创建的table添加到body中;
    body.appendChild(tab);
//    动态创建tr9行
    for(var i = 1;i<=9;i++){
//        动态创建tr
        var tr = document.createElement("tr");
//        将tr添加到table中;
        tab.appendChild(tr);
        for(var j = 1;j<=i;j++){
//           创建td
            var td  = document.createElement("td");
            tr.appendChild(td);
//            创建td的文本
            var tdtext = document.createTextNode(j+"*"+i+"="+i*j);
            td.appendChild(tdtext);
        }
    }




    //第二个;
    //获取body
    var body = document.getElementsByTagName("body")[0];
    //动态创建table
    tab = document.createElement("table");
    //动态创建caption
    var cap = document.createElement("caption");
    //将动态创建的caption添加到table中
    tab.appendChild(cap);
    //动态创建caption的文本;
    var captext = document.createTextNode("使用for循环实现九九乘法表--左下角");
    //将cap的文本添加到cap中;
    cap.appendChild(captext);
    //    将动态创建的table添加到body中;
    body.appendChild(tab);
    //    动态创建tr9行
    for(var i = 9;i>0;i--){
//        动态创建tr
        var tr = document.createElement("tr");
//        将tr添加到table中;
        tab.appendChild(tr);
        for(var j = 1;j<=i;j++){
//           创建td
            var td  = document.createElement("td");
            tr.appendChild(td);
//            创建td的文本
            var tdtext = document.createTextNode(j+"*"+i+"="+i*j);
            td.appendChild(tdtext);
        }
    }




    //第三个;
    /*
    思路:
        用空格代替,将有有文字的推到右边;
        1行----8个td
        2------7td
        3------6td
        9------0td
        空的td是放在tr中的,所以要放在tr的循环中
     */
    //获取body
    var body = document.getElementsByTagName("body")[0];
    //动态创建table
    tab = document.createElement("table");
    //动态创建caption
    var cap = document.createElement("caption");
    //将动态创建的caption添加到table中
    tab.appendChild(cap);
    //动态创建caption的文本;
    var captext = document.createTextNode("使用for循环实现九九乘法表--右上角");
    //将cap的文本添加到cap中;
    cap.appendChild(captext);
    //    将动态创建的table添加到body中;
    body.appendChild(tab);
    //    动态创建tr9行
    for(var i = 1;i<=9;i++){
//        动态创建tr
        var tr = document.createElement("tr");
//        将tr添加到table中;
        tab.appendChild(tr);


        for(var k = 1;k<=(9-i);k++){
            //创建td
            var td  = document.createElement("td");
            tr.appendChild(td);
        }
        for(var j = i;j>0;j--){
//           创建td
            var td  = document.createElement("td");
            tr.appendChild(td);
//            创建td的文本
            var tdtext = document.createTextNode(j+"*"+i+"="+i*j);
            td.appendChild(tdtext);
        }
    }




    //第四个;
    /*
        1.先将tr中的td倒置;
     */
    //获取body
    var body = document.getElementsByTagName("body")[0];
    //动态创建table
    tab = document.createElement("table");
    //动态创建caption
    var cap = document.createElement("caption");
    //将动态创建的caption添加到table中
    tab.appendChild(cap);
    //动态创建caption的文本;
    var captext = document.createTextNode("使用for循环实现九九乘法表--右下角");
    //将cap的文本添加到cap中;
    cap.appendChild(captext);
    //    将动态创建的table添加到body中;
    body.appendChild(tab);
    //    动态创建tr9行
    for(var i = 9;i>0;i--){
//        动态创建tr
        var tr = document.createElement("tr");
//        将tr添加到table中;
        tab.appendChild(tr);
        for(var k = 1;k<=(9-i);k++){
//           创建td
            var td  = document.createElement("td");
            tr.appendChild(td);
        }
        for(var j = i;j>0;j--){
//           创建td
            var td  = document.createElement("td");
            tr.appendChild(td);
//            创建td的文本
            var tdtext = document.createTextNode(j+"*"+i+"="+i*j);
            td.appendChild(tdtext);
        }
    }
</script>
</html>

这篇关于九九乘法表的不同表现形式;的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/718848

相关文章

Python如何计算两个不同类型列表的相似度

《Python如何计算两个不同类型列表的相似度》在编程中,经常需要比较两个列表的相似度,尤其是当这两个列表包含不同类型的元素时,下面小编就来讲讲如何使用Python计算两个不同类型列表的相似度吧... 目录摘要引言数字类型相似度欧几里得距离曼哈顿距离字符串类型相似度Levenshtein距离Jaccard相

在不同系统间迁移Python程序的方法与教程

《在不同系统间迁移Python程序的方法与教程》本文介绍了几种将Windows上编写的Python程序迁移到Linux服务器上的方法,包括使用虚拟环境和依赖冻结、容器化技术(如Docker)、使用An... 目录使用虚拟环境和依赖冻结1. 创建虚拟环境2. 冻结依赖使用容器化技术(如 docker)1. 创

关于Spring @Bean 相同加载顺序不同结果不同的问题记录

《关于Spring@Bean相同加载顺序不同结果不同的问题记录》本文主要探讨了在Spring5.1.3.RELEASE版本下,当有两个全注解类定义相同类型的Bean时,由于加载顺序不同,最终生成的... 目录问题说明测试输出1测试输出2@Bean注解的BeanDefiChina编程nition加入时机总结问题说明

java中不同版本JSONObject区别小结

《java中不同版本JSONObject区别小结》本文主要介绍了java中不同版本JSONObject区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们... 目录1. FastjsON2. Jackson3. Gson4. org.json6. 总结在Jav

Python中连接不同数据库的方法总结

《Python中连接不同数据库的方法总结》在数据驱动的现代应用开发中,Python凭借其丰富的库和强大的生态系统,成为连接各种数据库的理想编程语言,下面我们就来看看如何使用Python实现连接常用的几... 目录一、连接mysql数据库二、连接PostgreSQL数据库三、连接SQLite数据库四、连接Mo

java脚本使用不同版本jdk的说明介绍

《java脚本使用不同版本jdk的说明介绍》本文介绍了在Java中执行JavaScript脚本的几种方式,包括使用ScriptEngine、Nashorn和GraalVM,ScriptEngine适用... 目录Java脚本使用不同版本jdk的说明1.使用ScriptEngine执行javascript2.

2. c#从不同cs的文件调用函数

1.文件目录如下: 2. Program.cs文件的主函数如下 using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using System.Windows.Forms;namespace datasAnalysis{internal static

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

uva 10061 How many zero's and how many digits ?(不同进制阶乘末尾几个0)+poj 1401

题意是求在base进制下的 n!的结果有几位数,末尾有几个0。 想起刚开始的时候做的一道10进制下的n阶乘末尾有几个零,以及之前有做过的一道n阶乘的位数。 当时都是在10进制下的。 10进制下的做法是: 1. n阶位数:直接 lg(n!)就是得数的位数。 2. n阶末尾0的个数:由于2 * 5 将会在得数中以0的形式存在,所以计算2或者计算5,由于因子中出现5必然出现2,所以直接一

速了解MySQL 数据库不同存储引擎

快速了解MySQL 数据库不同存储引擎 MySQL 提供了多种存储引擎,每种存储引擎都有其特定的特性和适用场景。了解这些存储引擎的特性,有助于在设计数据库时做出合理的选择。以下是 MySQL 中几种常用存储引擎的详细介绍。 1. InnoDB 特点: 事务支持:InnoDB 是一个支持 ACID(原子性、一致性、隔离性、持久性)事务的存储引擎。行级锁:使用行级锁来提高并发性,减少锁竞争