0313 JS

最新推荐文章于 2020-01-06 16:15:47 发布

shuren1991

最新推荐文章于 2020-01-06 16:15:47 发布

阅读量197

点赞数 1

分类专栏：学习文章标签： js javascript

本文链接：https://blog.csdn.net/shuren1991/article/details/61922268

版权

学习专栏收录该内容

28 篇文章 0 订阅

订阅专栏

0313 JS

1.乘法口诀对齐问题

正常情况下，因为乘法口诀结果的位数不一样，导致最后不能整齐排列，如下：

解决办法1:循环加入表格，此方法不在这里叙述，可以百度；
解决办法2:加入一个<span>标签，并将标签转换为inline-block,然后设定宽度即可，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<script type="text/javascript">
var c ="";
for(var i=1;i<=9;i++){
    for(var j=1;j<=i;j++){
        c=i*j
        document.write("<span style='display:inline-block;width:70px'>"+j+"x"+i+"="+c++"</span>")
    }
    document.write("<br/>")
}

</script>
</body>
</html>

最后效果如下：

2.金字塔对齐问题：

在打印金字塔的时候，我们会用空格打印空白的部分，但是因为不同浏览器对空格的占的字符不一样，所以打印出来的金子塔是歪的，如下图：

解决办法：
空格 用*代替，然后*用<span>包括，并设定颜色为color:white.代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<script type="text/javascript">

    var a = prompt("请输入需要打印的行数");
    var i = 0;
    var b = a;
    
    do{
        var j = b;
        do{
            document.write("<span style='color:white' >"+"*"+"</span>");
            j--;
        }
        while(j>0);

        var l=0;
        do{
            document.write("*")
            l++;
        }
        while(l<=i);
        document.write("<br>");
        i+=2;
        b--;
    }
    while (i<a*2);
</script>
</body>
</html>

效果图：

shuren1991

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0313 JS

0313 JS1.乘法口诀对齐问题正常情况下，因为乘法口诀结果的位数不一样，导致最后不能整齐排列，如下：解决办法1:循环加入表格，此方法不在这里叙述，可以百度；解决办法2:加入一个标签，并将标签转换为inline-block,然后设定宽度即可，代码如下：html>head> meta charset="utf-8"> title>
复制链接

扫一扫