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>
效果图: