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 相关文章推荐
JS面向对象编程之对象使用分析
Aug 19 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
原生JS封装vue Tab切换效果
Apr 28 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
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
js实现数字滚动特效
2019/12/16 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
python遍历目录的方法小结
2016/04/28 Python
Python中is和==的区别详解
2018/11/15 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
中文专业毕业生自荐信
2013/10/28 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
火锅店的活动方案
2014/08/15 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
清洁员岗位职责
2015/02/15 职场文书
计划生育目标责任书
2015/05/09 职场文书
高中信息技术教学反思
2016/02/16 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
nginx搭建NFS网络文件系统
2022/04/14 Servers