网站建设公司优惠中绵阳市做公司网站
【案例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>
 
