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. Django源码分析之server

    乍见 Django内置的server基本包括两部分:django.core.servers和django.core.handlers 相识 servers.basehttp是Django自身提供的一个 ...

  2. 1087 All Roads Lead to Rome (30 分)(最短路径)

    直接用Dijkstra做 #include<bits/stdc++.h> using namespace std; int n,m; map<string,int>si; ma ...

  3. [Effective Java] 创建和销毁对象篇

    [Effective Java] 创建和销毁对象篇 1. 优先考虑用静态工厂方法代替构造器 优点: - 静态工厂方法相比于构造器,它们有名称 - 不需要每次在使用的时候创建一个对象 - 可以返回原返回 ...

  4. 官方文档 恢复备份指南六 Configuring the RMAN Environment: Advanced Topics

    RMAN高级设置. 本章内容: Configuring Advanced Channel Options  高级通道选项 Configuring Advanced Backup Options 高级备 ...

  5. 一个简单的NetCore项目:2 - 登录

    1-UI,登陆界面布局 PS:使用的是metronic 框架,没有用过的可以自行百度. 1.1 metronic 放在wwwroot文件夹下面 1.2  metronic 中的 open sans 使 ...

  6. java 使用ByteArrayOutputStream和ByteArrayInputStream实现深拷贝

    首先介绍Java中的浅拷贝(浅克隆)和深拷贝(深克隆)的基本概念: 浅拷贝: 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.浅复制仅仅复制所考虑的对象,而 ...

  7. Socket常见错误代码与描述

    最近程序 出现 几次 Socket 错误, 为了便于 差错.. 搜了一些 贴在这里.. 出现网络联机错误Socket error #11001表示您的计算机无法连上服务器,请检查您的Proxy设定以及 ...

  8. P2574 XOR的艺术

    题目描述 AKN觉得第一题太水了,不屑于写第一题,所以他又玩起了新的游戏.在游戏中,他发现,这个游戏的伤害计算有一个规律,规律如下 1. 拥有一个伤害串为长度为n的01串. 2. 给定一个范围[l,r ...

  9. BZOJ1001:狼抓兔子(最小割最大流+vector模板)

    1001: [BeiJing2006]狼抓兔子 Description 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的,而且现在的兔子还比较笨, ...

  10. P2765 魔术球问题(网络流24题)

    题目描述 «问题描述: 假设有n根柱子,现要按下述规则在这n根柱子中依次放入编号为1,2,3,...的球. (1)每次只能在某根柱子的最上面放球. (2)在同一根柱子中,任何2个相邻球的编号之和为完全 ...