js算法练习（三）

最新推荐文章于 2023-02-15 21:17:48 发布

学不会编程的程序猿

最新推荐文章于 2023-02-15 21:17:48 发布

阅读量378

点赞数

文章标签： js 九九乘法表

本文链接：https://blog.csdn.net/zzw811131619/article/details/82759966

版权

输出小九九，共有四种形状，有两种方式输出方式，第一种是用空格来实现，如果不用css的话空格的缩进不好控制；第二种是用表格实现，缩进很好控制。
（一）空格版
1.最常见的小九九
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			for (var i = 1;i <= 9;i ++) {
				for (var j = 1;j <= i;j ++) {
					document.write(i + "*" + j + "=" + i * j + "&nbsp;&nbsp;&nbsp;&nbsp;");
				}
				document.write("<br />");
			}
		</script>
	</body>
</html>

2.上下相反
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			for (var i = 9;i >= 1;i --) {
				for (var j = 1;j <= i;j ++) {
					document.write(i + "*" + j + "=" + i * j + "&nbsp;&nbsp;&nbsp;&nbsp;");
				}
				document.write("<br />");
			}
		</script>
	</body>
</html>

3.左右相反
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			for (var i = 1;i <= 9;i ++) {
				
				for (var k = 1;k <= 9 - i;k ++) {
					document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
				}
				
				for (var j = 1;j <= i;j ++) {
					
					document.write(i + "*" + j + "=" + i * j + "&nbsp;&nbsp;&nbsp;&nbsp;");
				}
				document.write("<br />");
			}
		</script>
	</body>
</html>

4.上下左右都相反
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			for (var i = 9;i >= 1;i --) {
				
				for (var k = 1;k <= 9 - i;k ++) {
					document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
				}
				
				for (var j = 1;j <= i;j ++) {
					
					document.write(i + "*" + j + "=" + i * j + "&nbsp;&nbsp;&nbsp;&nbsp;");
				}
				document.write("<br />");
			}
		</script>
	</body>
</html>

（二）表格版
看了空格版，表格版就很好理解了，就是边循环边建立了一个表格，所以直接四个全部输出：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			document.write('<table border="0" width="100%">')
			for (var i = 0;i <= 9;i ++) {
				document.write('<tr>')
				
				for (var j = 1;j <=i;j ++) {
					document.write('<td bgcolor="orange">' + j + '*' + i + '=' + i*j +'</td>')
				}
				document.write('<tr/>')
			}
			document.write('</table>')
		</script>
		
		<br /><br />
		
		<script type="text/javascript">
			document.write('<table border="0" width="100%">')
			for (var i = 9;i >= 0;i --) {
				document.write('<tr>')
				
				for (var j = 1;j <=i;j ++) {
					document.write('<td bgcolor="orange">' + j + '*' + i + '=' + i*j +'</td>')
				}
				document.write('<tr/>')
			}
			document.write('</table>')
		</script>
		
		<br /><br />
		
		<script type="text/javascript">
			document.write('<table border="0" width="100%">')
			for (var i = 1;i <= 9;i ++) {
				document.write('<tr>')
				
				//输出对应数量的空td
				for(var k = 1;k <= 9 - i;k ++){
					document.write('<td>&nbsp</td>')
				}
				
				
				for (var j = 1;j <= i;j ++) {
					document.write('<td bgcolor="orange">' + j + '*' + i + '=' + i*j +'</td>')
				}
				document.write('<tr/>')
			}
			document.write('</table>')
		</script>
		
		<br /><br />
		
		<script type="text/javascript">
			document.write('<table border="0" width="100%">')
			for (var i = 9;i >= 1;i --) {
				document.write('<tr>')
				
				//输出对应数量的空td
				for(var k = 1;k <= 9 - i;k ++){
					document.write('<td>&nbsp</td>')
				}
				
				
				for (var j = 1;j <= i;j ++) {
					document.write('<td bgcolor="orange">' + j + '*' + i + '=' + i*j +'</td>')
				}
				document.write('<tr/>')
			}
			document.write('</table>')
		</script>
	</body>
</html>

输出结果：
在这里插入图片描述