JS打印三角形,平行四边形和九九乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
*{
padding: 0;
margin: 0;
}
table{
border: 1px solid #000;
margin: 100px auto;
background: #fbfbfb;
}
td{
box-sizing: border-box;
border-top: 1px solid #000;
border-right: 1px solid #000;
padding: 10px 20px;
width: 80px;
}
tbody tr:nth-child(1) td{
border-top: none;
}
tbody tr:last-child td:last-child{
border-right: none;
}
th{
height: 50px;
border-bottom: 1px solid #000;
}
.Tri-box{
padding-left: 100px;
}
</style>
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="9">九九乘法表</th>
</tr>
</thead>
<script>
for(var i = 1 ; i <= 9 ; i++){
document.write('<tr>');
for(var j = 1 ; j <= i ; j++){
pro = j + '*' + i + '=' + i * j;
document.write('<td>');
document.write(pro);
document.write('</td>');
}
document.write('</tr>');
}
</script>
</table>
<script>
document.write('<div class="Tri-box">');
for(var i = 1; i <= 5; i++){
for(var a = 1; a <= 5-i; a++){
document.write(' '); //每行星号前面的空格
}
for(var b = 1; b <= i; b++){
document.write('*' + ' '); //每行星号的数量
}
document.write('<br>');
}
document.write('</div>');
document.write('=======================aaa============================');
</script>
<script>
document.write('<div class="Tri-box">');
for(var i = 1; i <= 5; i++){
// for(var a = 1; a <= 5-i; a++){
// document.write(' '); //每行星号前面的空格
// }
for(var b = 1; b <= i; b++){
document.write('*' + ' '); //每行星号的数量
}
document.write('<br>');
}
document.write('</div>');
document.write('========================bbb===========================');
</script>
<script>
document.write('<div class="Tri-box">');
for(var i = 1; i <= 5; i++){
// for(var a = 1; a <= 5-i; a++){
// document.write(' '); //每行星号前面的空格
// }
for(var b = i; b <= 5; b++){
document.write('*' + ' '); //每行星号的数量
}
document.write('<br>');
}
document.write('</div>');
document.write('=========================ccc==========================');
</script>
<script>
document.write('<div class="Tri-box">');
for(var i = 1; i <= 5; i++){
for(var a = 1; a < i; a++){
document.write(' '); //每行星号前面的空格
}
for(var b = i; b <= 5; b++){
document.write(' ' + '*'); //每行星号的数量
}
document.write('<br>');
}
document.write('</div>');
document.write('=========================ddd==========================');
</script>
<script>
document.write('<div class="Tri-box">');
for(var i = 1; i <= 5; i++){
for(var a = i; a < 5; a++){
document.write(' '); //每行星号前面的空格
}
for(var b = 1; b <= i; b++){
document.write('*' + ' '); //每行星号的数量
}
document.write('<br>');
}
document.write('</div>');
document.write('========================eee===========================');
</script>
<script>
document.write('<div class="Tri-box">');
for(var i = 1; i <= 5; i++){
for(var a = i; a < 5; a++){
document.write(' ');
}
for(var b = 0; b <= 5; b++){
document.write('*' + ' ');
}
document.write('<br>');
}
document.write('</div>');
document.write('========================fff===========================');
</script>
<script>
document.write('<div class="Tri-box">');
for(var i = 1; i <= 5; i++){
for(var a = 1; a < i; a++){
document.write(' ');
}
for(var b = 0; b <= 5; b++){
document.write('*' + ' ');
}
document.write('<br>');
}
document.write('</div>');
document.write('========================ggg===========================');
</script>
<script>
document.write('<div class="Tri-box">');
for(var i = 1; i <= 5; i++){
// for(var a = 1; a < i; a++){
// document.write(' ');
// }
for(var b = 0; b <= 5; b++){
document.write('*' + ' ');
}
document.write('<br>');
}
document.write('</div>');
document.write('========================hhh===========================');
</script>
</body>
</html>
新手小白学习js三天,有待提高,仅供参考,有大佬也可以指点