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 相关文章推荐
用javascript控制iframe滚动的代码
Apr 10 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
Element Steps步骤条的使用方法
Jul 26 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
基于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
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
Angular2 父子组件数据通信实例
2017/06/22 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
Python 操作MySQL详解及实例
2017/04/30 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
python常用数据重复项处理方法
2019/11/22 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
python exit出错原因整理
2020/08/31 Python
python 递归相关知识总结
2021/03/03 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
东方红海科技面试题软件测试方面
2012/02/08 面试题
总经理职责
2013/12/22 职场文书
建筑个人求职信范文
2014/01/25 职场文书
酒店中秋节促销方案
2014/01/30 职场文书
装修设计师求职信
2014/02/26 职场文书
分公司负责人任命书
2014/06/04 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python