• 技术文章 >web前端 >前端问答

    javascript怎么实现99乘法表

    青灯夜游青灯夜游2021-09-06 16:22:59原创199

    JS中,可以通过嵌套两层for循环来实现99乘法表,语法格式“for(var i=1;i<=9;i++){for(var j=1;j<=i;j++){document.write(j+"*"+i+"="+j*i+"&nbsp;");}}”。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    javascript实现99乘法表

    首先我们来观察一下九九乘法口诀表

    1.png

    可以得出图表的规律:

    因此,需要使用双重循环来控制输出,外层循环控制行数 i (i最小为1,最大为9),内层循环控制列 j (j最小为1,最大等于 i)。

    实现代码:

    for(var i = 1; i <= 9; i++){     //外层循环控制行
    	for(var j = 1; j <= i; j++) //内层循环控制列
    	{
    		document.write(j+"*"+i+"="+j*i+"&nbsp;&nbsp;&nbsp;");
    	}
    	document.write("</br>");
    }

    输出结果:

    3.png

    我们还可以向开头图那样,将99乘法表放到一个表格里输出:

    document.write("<table>");
    
    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>");
    }
    document.write("</table>");

    然后添加css样式,来修饰一下:

    table {
    	width: 600px;
    	border-collapse: separate;
    }
    
    table td {
    	border: #000 1px solid;
    	text-align: center;
    }

    看看输出结果:

    2.png

    【推荐学习:javascript高级教程

    以上就是javascript怎么实现99乘法表的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript 99乘法表
    上一篇:vuejs中内置组件有哪些 下一篇:vuejs是虚拟DOM吗
    大前端线上培训班

    相关文章推荐

    • javascript怎么将值转化为int类型• javascript怎么判断给定值是否在数组中• javascript中eval的用法是什么• javascript replace怎么用

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网