9*9乘法表

最新推荐文章于 2021-08-26 18:20:13 发布

lr-fcc

最新推荐文章于 2021-08-26 18:20:13 发布

阅读量370

点赞数

分类专栏：前端开发文章标签： javascript css html

本文链接：https://blog.csdn.net/lr200012/article/details/116723981

版权

前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

9*9乘法表

方式一、

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <script>
            window.onload=function(){
                init();
            }
           function init(){
               var htmlContent ='<div align="center" style="font-size:large;font-weight: 700;text-align: center;">9*9乘法表</div>';
               htmlContent+='<br/>';
               for(var i = 1;i<10;i++)
               {
                    
                   for(var j=1;j<=i;j++){
                    htmlContent += '<span style="width: 100px;height:35px;border: 1px solid black;>';
                    htmlContent+='<div style="width:450px">';
                    htmlContent+=i;
                    htmlContent += '<span align="center" style="display;inline-block;width:50px;font-size:25px">x</span>';
                    htmlContent+=j;
                    htmlContent+= '<span align="center" style="display;inline-block;width:50px;font-size:25px">=</span>';
                    htmlContent+=(i*j);
                    htmlContent+=' '; 
                    htmlContent+='</span>';   
                    } 
                   htmlContent+='</br>';
                   htmlContent+='</div>';
               }
               document.write(htmlContent);
           }
        </script>
    </body>
</html>

方式二、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>99乘法表</title>
    <style>
        #box span{
            display: inline-block;
            line-height: 40px;
            text-align: center;
            height:35px;
            width:100px;
            border: 1px solid black ;
        }
    </style>
</head>
<body> 
    <div style="font-size:xx-large;font-weight: 500;text-align:center;">
    <span>9*9乘法表</span>
    </div>
    <div id="box"></div>
    <script>
        
        let num = 9;
        let str= "" ;
        let box = document.getElementById("box");
        for(var i = 0 ; i < num; i++)
        {
            for(var j = 0 ; j <= i ; j++)
            {
                str += `<span>${(j+1)}x${(i+1)}=${(i+1)*(j+1)}</span>`;
            }
            str += "</br></br>";
        }
        box.innerHTML = str;
    </script>
</body>
</html>

lr-fcc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
9*9乘法表

9*9乘法表方式一、<!DOCTYPE html><html> <head> </head> <body> <script> window.onload=function(){ init(); } function init(){ var htmlContent
复制链接

扫一扫