JS实现上下左右对称的九九乘法表

css样式

<style>

	table{

		table-layout:fixed;

		border-collapse:collapse;

	}

	td{

		padding:10px;

		border:1px solid #999;

	}

	td:empty{

		border:none;

	}

</style>

一 左下角为度的梯形乘法表：

1.for循环代码

<table>

	<script>

		for(var i=1;i<=9;i++){

			document.write("<tr>");

				for(var j=1;j<=i;j++){

					document.write("<td>"+j+"&times;"+i+"="+(j*i)+"</td>")

				}

			document.write("</tr>");

		}

	</script>

</table>

2.while循环

<table>

	<script>

		var i=1;

		while(i<=9){

			document.write("<tr>");

				var j=1;

				while(j<=i){

					document.write("<td>"+j+" x "+i+"="+(j*i)+"</td>");

					j++;

				}

			document.write("</tr>");

			i++;

		}

	</script>

</table>

3.do-while循环

<table>

	<script>

		var i=1;

		do{

			document.write("<tr>");

				var j=1;

				do{

					document.write("<td>"+j+"&times;"+i+"="+(j*i)+"</td>");

					j++;

				}while(j<=i);

			document.write("</tr>");

			i++;

		}while(i<=9);

	</script>

</table>

示例图

二 左上角为度的梯形乘法表：

1.for循环代码

<table>

	<script>

		for(var i=9;i>=1;i--){

			document.write("<tr>");

				for(var j=1;j<=i;j++){

					document.write("<td>"+j+"&times;"+i+"="+(j*i)+"</td>")

				}

			document.write("</tr>");

		}

	</script>

</table>

2.while循环

<table>

	<script>

		var i=9;

		while(i>=1){

			document.write("<tr>");

				var j=1;

				while(j<=i){

					document.write("<td>"+j+" x "+i+"="+(j*i)+"</td>");

					j++;

				}

			document.write("</tr>");

			i--;

		}

	</script>

</table>

3.do-while循环

<table>

	<script>

		var i=9;

		do{

			document.write("<tr>");

				var j=1;

				do{

					document.write("<td>"+j+"&times;"+i+"="+(j*i)+"</td>");

					j++;

				}while(j<=i);

			document.write("</tr>");

			i--;

		}while(i>=1);

	</script>

</table>

示例图

三 右下角为度的梯形乘法表：

1.for循环代码

<table>

	<script>

		for(var i=1;i<=9;i++){

			document.write("<tr>");

				for(var a=1;a<=9-i;a++){

					document.write("<td></td>");

				}

				for(var j=1;j<=i;j++){

					document.write("<td>"+j+"&times;"+i+"="+(j*i)+"</td>")

				}

			document.write("</tr>");

		}

	</script>

</table>

2.while循环

<table>

	<script>

		var i=1;

		while(i<=9){

			document.write("<tr>");

				var a=1;

				while(a<=9-i){

					document.write("<td></td>");

					a++;

				}

				var j=1;

				while(j<=i){

					document.write("<td>"+j+" x "+i+"="+(j*i)+"</td>");

					j++;

				}

			document.write("</tr>");

			i++;

		}

	</script>

</table>

3.do-while循环

<table>

	<script>

		var i=1;

		do{

			document.write("<tr>");

				var a=0;

				do{

					document.write("<td></td>");

					a++;

				}while(a<=9-i);

				var j=1;

				do{

					document.write("<td>"+j+"&times;"+i+"="+(j*i)+"</td>");

					j++;

				}while(j<=i);

			document.write("</tr>");

			i++;

		}while(i<=9);

	</script>

</table>

示例图

四 右上角为度的梯形乘法表：

1.for循环代码

<table>

	<script>

		for(var i=9;i>=1;i--){

			document.write("<tr>");

				for(var a=1;a<=9-i;a++){

					document.write("<td></td>");

				}

				for(var j=1;j<=i;j++){

					document.write("<td>"+j+"&times;"+i+"="+(j*i)+"</td>")

				}

			document.write("</tr>");

		}

	</script>

</table>

2.while循环

<table>

	<script>

		var i=9;

		while(i>=1){

			document.write("<tr>");

				var a=1;

				while(a<=9-i){

					document.write("<td></td>");

					a++;

				}

				var j=1;

				while(j<=i){

					document.write("<td>"+j+" x "+i+"="+(j*i)+"</td>");

					j++;

				}

			document.write("</tr>");

			i--;

		}

	</script>

</table>

3.do-while循环

<table>

	<script>

		var i=9;

		do{

			document.write("<tr>");

				var a=0;

				do{

					document.write("<td></td>");

					a++;

				}while(a<=9-i);

				var j=1;

				do{

					document.write("<td>"+j+"&times;"+i+"="+(j*i)+"</td>");

					j++;

				}while(j<=i);

			document.write("</tr>");

			i--;

		}while(i>=1);

	</script>

</table>

示例图

JS实现上下左右对称的九九乘法表的更多相关文章

  1. 用JS的for循环打印九九乘法表

    需要使用两个for循环嵌套,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  2. js写一个简单的九九乘法表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 记得初学JS时候练个九九乘法表都写的要死要活

    还记得当初刚接触JS时候,看到视频中老师写了个九九乘法表,觉得好神奇,可是自己在下面动手写了半天还是有各种问题,甚是懊恼啊.今又看到园子里有关于乘法表的博文,出于对过去的不舍与缅怀,遂重写一遍. &l ...

  4. js九九乘法表的应用

    <html> <head> <meta charset=utf-8" /> <title>js九九乘法表</title> < ...

  5. 用JS写九九乘法表

    本来JS部分觉得就不是很好,结果经过一个寒假,在家的日子过的太舒适,基本把学的都快忘干净了,今天老师一说九九乘法表,除了脑子里浮现出要满足的条件,其他的都不记得了,赶快整理了一下: <scrip ...

  6. 用js实现打印九九乘法表

    用js在打印九九乘法表 思考 在学习了流程控制和条件判断后,我们可以利用js打印各式各样的九九乘法表 不管是打印什么样三角形九九乘法表,我们都应该找到有规律的地方,比如第一列的数字是什么规律,第一行的 ...

  7. 利用js的for循环实现一个简单的“九九乘法表”

    For循环九九乘法表 for循环是javascript中一种常用的循环语句,可以很好的解决在程序中需要重复执行某些语句,利用for循环实现简单的“九九乘法表”的效果: 让循环从小到大,依次排序,并计算 ...

  8. 九九乘法表，全js编写，放入table表格带入页面渲染出来

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JS实现九九乘法表和时间问候语

    编码 小练习,练习使用循环实现一个九九乘法表 第一步,最低要求:在Console中按行输出 n * m = t 然后,尝试在网页中,使用table来实现一个九九乘法表 <!DOCTYPE htm ...

随机推荐

  1. PAT java大数 A+B和C

    题目描述: 给定区间[-, ]内的3个整数A.B和C,请判断A+B是否大于C. 输入格式: 输入第1行给出正整数T(<=),是测试用例的个数.随后给出T组测试用例,每组占一行,顺序给出A.B和C ...

  2. POI实现excel的数据验证

    目录 前言 难点1:合并单元格 代码实现策略: step 1: 合并单元格 step 2: 给单元格赋值 难点2:数据验证-下拉框 代码实现策略: step 1:设置需要进行数据验证的单元格范围和可供 ...

  3. Chromium之工程依赖关系.

    Chromium各版本可能有差异,我的版本是chromium.r197479,2013/08前后下载的source code. Visual Studio Ultimate版本有工具可以自动生成项目依 ...

  4. 【bzoj3813】奇数国 线段树

    题目描述 给出一个长度为n的序列,每个数都可以由前60个质数的乘积表示,初始每个数都是3.支持两种操作:(1)修改一个数 (2)查询一段区间内所有数的乘积的欧拉函数值模19961993. 输入 第一行 ...

  5. 【bzoj1180】[CROATIAN2009]OTOCI LCT

    题目描述 给出n个结点以及每个点初始时对应的权值wi.起始时点与点之间没有连边.有3类操作: 1.bridge A B:询问结点A与结点B是否连通.如果是则输出“no”.否则输出“yes”,并且在结点 ...

  6. WebSocket添加事件监听器(6)

    WebSocket编程遵循异步编程模型;打开socket后,只需要等待事件发生,而不需要主动向服务器轮询,所以需要在WebSocket对象中添加回调函数来监听事件. WebSocket对象有三个事件: ...

  7. Web.config配置文件中的属性add,key,value含义

    这是添加自定义字符串的方式,保存是以键-值的形式保存的,可以通过key获取value,一般用这种方法配置全局内使用的字符串. <configuration>是配置文件的根配置节. < ...

  8. 【NOIP模拟赛】藏宝图 最小生成树

    性质:我们把最小生成树建出来,如果其距离符合那么就是对的,不符合就是错的 因为这是个n^2的图所以不能Kruskal只能Prim #include <cstdio> #include &l ...

  9. CentOS系统缺少库文件解决办法

    By francis_hao    May 31,2017   程序在编译时出现缺少库文件的提示,如下: as: error while loading shared libraries: libz. ...

  10. JSONP以及Spring对象MappingJacksonValue的使用方式

    什么是JSONP?,以及Spring对象MappingJacksonValue的使用方式 原文: https://blog.csdn.net/weixin_38111957/article/detai ...