东莞快速建站平台中国备案查询网站
【案例2-9】打印九九乘法表
一、案例描述
- 考核知识点
for双重循环
- 练习目标
- 掌握for循环应用。
- 实现九九乘法表。
- 需求分析
九九乘法表相信大家一点也不陌生，之前见到的乘法表是印刷在课程本之上的。而在本案例中我们将用JavaScript代码来实现九九乘法表。
- 案例分析
- 效果如图2-15所示。
- 九九乘法表
- 具体实现步骤如下：
- for外层循环行数i。
- for里层循环列数j。
- 把i *j =sum用字符串拼接起来，用document.write()在文档中输出。
二、案例实现
根据上面的分析，可以通过简单的JavaScript代码来实现这一效果，具体代码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>打印九九乘法表</title>
- </head>
- <body>
- <script type="text/javascript">
- // 第一种方式：
- /*
- var i , j; // i 为行数，j 为列数
- for(i = 1;i <= 9;i ++){
- document.write("<br>"); // 每一行打印完后换行
- for(j = 1;j <= i;j ++){
- sum = i * j;
- document.write(i ,"*",j ,"=",sum,' '); // 打印出i*j=sum
- }
- }
- */
- // 第二种方式：
- /*
- var str = '<table>';
- for(var i = 1;i <= 9; ++i){
- str += '<tr>';
- for(var j = 1;j <= i; ++j ){
- str += '<td>'+ i +'*'+ j+ '='+(i*j) +'</td>';
- }
- str +='</tr>'
- }
- str += '</table>';
- document.write(str);
- */
- // 第三种方式：
- /**/
- function cfb(){
- var str = "<table>";
- for(var i = 1;i <= 9;i ++){
- str += "<tr>";
- for(var j = 1;j <= i;j ++){
- str += "<td>" + i + "*" + j + "=" + (i * j) + "</td>";
- }
- str += "</td>";
- }
- str += "</table>";
- document.write(str);
- }
- cfb();
- </script>
- </body>
- </html>