JS实现上下左右对称的九九乘法表
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+"×"+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+"×"+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+"×"+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+"×"+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+"×"+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+"×"+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+"×"+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+"×"+i+"="+(j*i)+"</td>");
j++;
}while(j<=i);
document.write("</tr>");
i--;
}while(i>=1);
</script>
</table>
示例图

JS实现上下左右对称的九九乘法表的更多相关文章
- 用JS的for循环打印九九乘法表
需要使用两个for循环嵌套,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- js写一个简单的九九乘法表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 记得初学JS时候练个九九乘法表都写的要死要活
还记得当初刚接触JS时候,看到视频中老师写了个九九乘法表,觉得好神奇,可是自己在下面动手写了半天还是有各种问题,甚是懊恼啊.今又看到园子里有关于乘法表的博文,出于对过去的不舍与缅怀,遂重写一遍. &l ...
- js九九乘法表的应用
<html> <head> <meta charset=utf-8" /> <title>js九九乘法表</title> < ...
- 用JS写九九乘法表
本来JS部分觉得就不是很好,结果经过一个寒假,在家的日子过的太舒适,基本把学的都快忘干净了,今天老师一说九九乘法表,除了脑子里浮现出要满足的条件,其他的都不记得了,赶快整理了一下: <scrip ...
- 用js实现打印九九乘法表
用js在打印九九乘法表 思考 在学习了流程控制和条件判断后,我们可以利用js打印各式各样的九九乘法表 不管是打印什么样三角形九九乘法表,我们都应该找到有规律的地方,比如第一列的数字是什么规律,第一行的 ...
- 利用js的for循环实现一个简单的“九九乘法表”
For循环九九乘法表 for循环是javascript中一种常用的循环语句,可以很好的解决在程序中需要重复执行某些语句,利用for循环实现简单的“九九乘法表”的效果: 让循环从小到大,依次排序,并计算 ...
- 九九乘法表,全js编写,放入table表格带入页面渲染出来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS实现九九乘法表和时间问候语
编码 小练习,练习使用循环实现一个九九乘法表 第一步,最低要求:在Console中按行输出 n * m = t 然后,尝试在网页中,使用table来实现一个九九乘法表 <!DOCTYPE htm ...
随机推荐
- DFS——CodeForces740DAlyona and a tree
一.题目回顾 题目链接:Alyona and a tree Examples Input 52 5 1 4 61 71 13 53 6 Output 1 0 1 0 0 Input 59 7 8 ...
- C#中async和await用法
.net 4.5中新增了async和await这一对用于异步编程的关键字. async放在方法中存在await代码的方法中,await放在调用返回Task的方法前. class Class1 { pr ...
- 有关于PHP的基础知识
(1) l 长字符串表示,必须放在“<<<heredoc”和 “heredoc;”之间.主要是<<<,其次是也可以不使用heredoc. l “<< ...
- hdu 1285 确定比赛名次 (拓扑)
确定比赛名次 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- DataBase -- Second Highest Salary
Question: Write a SQL query to get the second highest salary from the Employee table. +----+-------- ...
- JAVA 异常处理的认知学习过程
没有异常处理 学生时代,我编写的java代码中,很少会有try catch.最主要的原因如下: 应用的规模很小 没有不确定因素 代码可控性高 如果规模小,往往就没有复杂的逻辑链路,整个软件的分层也很浅 ...
- 【电影影评】梦之安魂曲-败给了BGM和豆瓣影评
首先,这部电影豆瓣8.7分,一般来说,豆瓣的打分是比较准确的.能反映一个片子的质量,而较少受到环境的影响.但是这种关系当然也不全对,比如某些片子可能特别让某一种人喜欢(如退役军人和军旅题材),而在某些 ...
- 【题解】IOI2005River 河流
一节语文课想出来的玩意儿,调了几个小时……可见细心&好的代码习惯是有多么的重要 (:へ:) 不过,大概竞赛最令人开心的就是能够一点一点的感受到自己的进步吧,一天比一天能够自己想出更多的题,A题 ...
- [bzoj1033] [ZJOI2008]杀蚂蚁 Big MoNI
这个模拟就不用说了吧...... 注意事项(救命的):1.不能回原位 2.在可以打到target的塔打target的时候,其他打不到的继续打自己的(这是显然的事情只是当时已惘然) 3.如果游戏在某一秒 ...
- Springmvc 流程图