js面试题---实现指定格式9*9乘法表

最新推荐文章于 2021-12-31 11:21:48 发布

cbat01

最新推荐文章于 2021-12-31 11:21:48 发布

阅读量271

点赞数

分类专栏：前端文章标签： javascript 前端面试题

本文链接：https://blog.csdn.net/weixin_36270908/article/details/98183305

版权

前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

使用JavaScript实现如下效果9*9乘法口诀表，要求和图片一致，不允许使用table。

js实现99乘法表

具体实现代码如下

js代码

<script>
	var str = '';
    	for(var i=1;i<=9;i++){       
            for(var j=1;j<=i;j++){              
                str += ('<span>'+i+'x'+j+'='+i*j+'</span>');             
            }
            str += "<br>";
            document.getElementById('main').innerHTML = str;           
        }
</script>

css代码

#main{
	text-align: center;
 }
 span{
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid #f0f0f0;
	width: 60px;	
	text-align: center;
	margin-right: -1px;
	margin-bottom: -1px;
}

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #main{
            text-align: center;
        }
        span{
            display: inline-block;
            padding: 5px 10px;
            border: 1px solid #f0f0f0;
            width: 60px;
            text-align: center;
            margin-right: -1px;
            margin-bottom: -1px;
        }
    </style>
</head>
<body>
    <div id="main"></div>
    <script>
        var str = '';
        for(var i=1;i<=9;i++){            
            for(var j=1;j<=i;j++){
                str += ('<span>'+i+'x'+j+'='+i*j+'</span>');
            }
            str += "<br>";
            document.getElementById('main').innerHTML = str;            
        }
    </script>
</body>
</html>

cbat01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js面试题---实现指定格式9*9乘法表

使用JavaScript实现如下效果9*9乘法口诀表，要求和图片一致，不允许使用table。具体实现代码如下js代码<script> var str = ''; for(var i=1;i<=9;i++){ for(var j=1;j<=i;j++){ st...
复制链接

扫一扫

专栏目录