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


Posted in Javascript onFebruary 22, 2016

九九乘法表使用很多种语言都可以实现。本文讲述JavaScript中常用的两种循环(For、While)来完成这四种对称的九九乘法表,这个例子是一个练习循环基础很好的方法,由于排版上对不整齐,因此循环了一个表格。

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

For循环代码

document.write("<table width='' border='>");
for(var i=; i<=; i++){
document.write("<tr>");
for(var j=; j<=i; j++){
document.write("<td>"+ j +"*"+ i +"="+ i*j +"</td>");
}
document.write("</tr>");
}
document.write("</table>");

While循环代码

document.write("<table width='' border='>");
var i = ;
while(i<=){
document.write("<tr>");
var j = ;
while(j<=i){
document.write("<td>"+ j +"*"+ i +"="+ i*j +"</td>");
j++;
}
document.write("</tr>");
i++;
}
document.write("</table>");

示例图

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

二、右下角为度的梯形乘法表:

For循环代码

document.write("<table width='' border='>");
for(var i=; i<=; i++){
document.write("<tr>");
for(var n=i; n<; n++){
document.write("<td> </td>");
}
for(var j=i; j>=; j--){
document.write("<td>"+ j +"*"+ i +"="+ i*j +"</td>");
}
document.write("</tr>");
}
document.write("</table>");

While循环代码

document.write("<table width='' border='>");
var i = ;
while(i<=){
document.write("<tr>");
var n = i;
while(n<){
document.write("<td> </td>");
n++;
}
var j = i;
while(j>=){
document.write("<td>"+ j +"*"+ i +"="+ i*j +"</td>");
j--;
}
document.write("</tr>");
i++;
}
document.write("</table>");

示例图

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

三、左上角为度的梯形乘法表:

For循环代码

document.write("<table width='' border='>");
for(var i=; i>=; i--){
document.write("<tr>");
for(var j=; j<=i; j++){
document.write("<td>"+ j +"*"+ i +"="+ i*j +"</td>");
}
document.write("</tr>");
}
document.write("</table>");

While循环代码

document.write("<table width='' border='>");
var i = ;
while(i>=){
document.write("<tr>");
var j = ;
while(j<=i){
document.write("<td>"+ j +"*"+ i +"="+ i*j +"</td>");
j++;
}
document.write("</tr>");
i--;
}
document.write("</table>");

示例图

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

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

For循环代码

document.write("<table width='' border='>");
for(var i=; i>=; i--){
document.write("<tr>");
for(var j=; j>=i; j--){
document.write("<td> </td>");
}
for(var j=i; j>=; j--){
document.write("<td>"+ j +"*"+ i +"="+ i*j +"</td>");
}
document.write("</tr>");
}
document.write("</table>");

While循环代码

document.write("<table width='' border='>");
var i = ;
while(i>=){
document.write("<tr>");
var j = ;
while(j>=i){
document.write("<td> </td>");
j--;
}
var j = i;
while(j>=){
document.write("<td>"+ j +"*"+ i +"="+ i*j +"</td>");
j--;
}
document.write("</tr>");
i--;
}
document.write("</table>");

示例图

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

以上内容是本文给大家分享的JavaScript中常用的两种循环(For、While)来完成这四种对称的九九乘法表,希望对大家有所帮助!

Javascript 相关文章推荐
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
基于Javascript实现倒计时功能
Feb 22 #Javascript
TypeOf这些知识点你了解吗
Feb 21 #Javascript
详谈javascript异步编程
Feb 21 #Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 #Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 #Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 #Javascript
JavaScript编程学习技巧汇总
Feb 21 #Javascript
You might like
德生BCL3000的电路分析和打磨
2021/03/02 无线电
ThinkPHP分页类使用详解
2014/03/05 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
layui实现三级联动效果
2019/07/26 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
python 剪切移动文件的实现代码
2018/08/02 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
Python阶乘求和的代码详解
2020/02/14 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
5款实用的python 工具推荐
2020/10/13 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
文秘自荐信
2013/10/20 职场文书
领导调研接待方案
2014/02/27 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
优秀党员事迹材料
2014/12/18 职场文书
小兵张嘎观后感
2015/06/03 职场文书
家长会感言
2015/08/01 职场文书