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 forEach通用循环遍历方法
Oct 11 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 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
PHP中include与require使用方法区别详解
2013/10/19 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
Python的subprocess模块总结
2014/11/07 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
Python清空文件并替换内容的实例
2018/10/22 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python实现按行分割文件
2019/07/22 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
Python的历史与优缺点整理
2020/05/26 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
出纳岗位职责模板
2013/11/27 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
2016年教师节感言
2015/12/09 职场文书
nginx常用配置conf的示例代码详解
2022/03/21 Servers
golang语言指针操作
2022/04/14 Golang
Redis实现分布式锁的五种方法详解
2022/06/14 Redis