韩顺平_轻松搞定网页设计(html+css+javascript)_第24讲_js案例讲解_js自定义函数_学习笔记_源代码图解_PPT文档整理

其他 2018-05-29 22:17:20 阅读次数: 0

（1）打印完整金字塔

我自己的思考过程，参看上一篇博文：javascript打印完整金字塔型_完整菱形_空心菱形_思路算法详解_js源代码


 观察发现：


第一行星号的个数为1；

第二行的星号个数为2*2-1；

第三行星号的个数为2*3-1；

第四行星号的个数为2*4-1；以此类推…

星号的个数，即为要循环打印几次，这里设置i=1更好理解些。

  1. //金字塔  
  2.             for(var i=1;i<=n;i++){  
  3.                 for(var j=1;j<=n-i;j++){  
  4.                     document.write(" ");  
  5.                 }  
  6.                 for(var j=1;j<=2*i-1;j++){  
  7.                     document.write("*");  
  8.                 }  
  9.                 document.writeln("<br/>");  
  10.             }  

（2）打印空心三角形

发现如下规律：

①除去最后一行后，每一行，我们要打印的是内层循环的第一次和最后一次，就是三角形的边上的星号。例如第二行，一共有三个，第一个星号，第二个空格，第三个星号，当设置i=1开始，则i取值1,2,3，用if语句只打印1和3，碰到2就打印星号。以此类推。

②特殊情况：最后一行，要满打。

[html]  view plain  copy
  1. //空心金字塔  
  2.             for(var i=1;i<=n;i++){ //行数  
  3.                 for(var k=1;k<=n-i;k++){ //打空格  
  4.                     document.writeln(" ");  
  5.                 }  
  6.                 for(var j=1;j<=(2*i-1);j++){ //打星号  
  7.                     if(i==n){ //最后一行  
  8.                         document.writeln("*");  
  9.                     }else if(j==1 || j==(2*i-1)){ //两边  
  10.                         document.writeln("*");  
  11.                     }else{  
  12.                         document.writeln(" ");  
  13.                     }  
  14.                 }  
  15.                 document.writeln("<br/>");  
  16.             }  
（3）打印空心菱形的下半部分，不带底边的 ，如下图所示


截图带上底边，是为了方便观察规律，这是n=6时候的情况，6行。

观察上图发现如下规律，除去底边后，要打印的有5行。

①每行前面的空格数，和行数是一致的，控制打印空格的循环层，设置k=1;k<=i;

②在打印星号的循环层，我们要打印的就是每次循环的第一个星号和最后一个星号，最后一个星号和行数的关系为：9-2*i+2;当i=1时，打印第9个星号


[html]  view plain  copy
  1. //菱形下半部分，不带底边的  
  2.             for(var i=1;i<=n-1;i++){ //不带底边，就可以少打印一行  
  3.                 for(var k=1;k<=i;k++){  
  4.                     document.writeln(" ");  
  5.                 }  
  6.                 for(var j=1;j<=(9-2*i+2);j++){  
  7.                     if(j==1 || j==(9-2*i+2)){  
  8.                         document.writeln("*");  
  9.                     }else{  
  10.                         document.writeln(" ");  
  11.                     }  
  12.                 }  
  13.                 document.writeln("<br/>");  
  14.             }  

（4）打印菱形的上半部分，带底边，但是仅仅保留底边的第一个和最后一个星号。 把if(i==n)的判断去掉。


[html]  view plain  copy
  1. for(var i=1;i<=n;i++){ //行数  
  2.                 for(var k=1;k<=n-i;k++){ //打空格  
  3.                     document.writeln(" ");  
  4.                 }  
  5.                 for(var j=1;j<=(2*i-1);j++){ //打星号  
  6.                     if(j==1 || j==(2*i-1)){ //两边  
  7.                         document.writeln("*");  
  8.                     }else{  
  9.                         document.writeln(" ");  
  10.                     }  
  11.                 }  
  12.                 document.writeln("<br/>");  
  13.             }  
（5）打印完整菱形 ，上面的分析就可以得出了


[html]  view plain  copy
  1. //空心菱形  
  2.             for(var i=1;i<=n;i++){ //行数  
  3.                 for(var k=1;k<=n-i;k++){ //打空格  
  4.                     document.writeln(" ");  
  5.                 }  
  6.                 for(var j=1;j<=(2*i-1);j++){ //打星号  
  7.                     /*if(i==n){ //最后一行  
  8.                         document.writeln("*");  
  9.                     }else*/ if(j==1 || j==(2*i-1)){ //两边  
  10.                         document.writeln("*");  
  11.                     }else{  
  12.                         document.writeln(" ");  
  13.                     }  
  14.                 }  
  15.                 document.writeln("<br/>");  
  16.             }  
  17.             for(var i=1;i<=n;i++){  
  18.                 for(var k=1;k<=i;k++){  
  19.                     document.writeln(" ");  
  20.                 }  
  21.                 for(var j=1;j<=(9-2*i+2);j++){  
  22.                     if(j==1 || j==(9-2*i+2)){  
  23.                         document.writeln("*");  
  24.                     }else{  
  25.                         document.writeln(" ");  
  26.                     }  
  27.                 }  
  28.                 document.writeln("<br/>");  
  29.             }  
完整图形：


[html]  view plain  copy
  1. <html>  
  2.     <head>  
  3.         <!--  
  4.            *    1  
  5.           ***   2*2-1  
  6.          *****  2*3-1   
  7.         ******* 2*4-1  
  8.         -->  
  9.         <script language="javascript">  
  10.             var n=window.prompt();  
  11.             //金字塔  
  12.             for(var i=1;i<=n;i++){  
  13.                 for(var j=1;j<=n-i;j++){  
  14.                     document.write(" ");  
  15.                 }  
  16.                 for(var j=1;j<=2*i-1;j++){  
  17.                     document.write("*");  
  18.                 }  
  19.                 document.writeln("<br/>");  
  20.             }  
  21.             //空心金字塔  
  22.             for(var i=1;i<=n;i++){ //行数  
  23.                 for(var k=1;k<=n-i;k++){ //打空格  
  24.                     document.writeln(" ");  
  25.                 }  
  26.                 for(var j=1;j<=(2*i-1);j++){ //打星号  
  27.                     if(i==n){ //最后一行  
  28.                         document.writeln("*");  
  29.                     }else if(j==1 || j==(2*i-1)){ //两边  
  30.                         document.writeln("*");  
  31.                     }else{  
  32.                         document.writeln(" ");  
  33.                     }  
  34.                 }  
  35.                 document.writeln("<br/>");  
  36.             }  
  37.             //document.writeln("<br/>");  
  38.             //菱形下半部分，不带底边的  
  39.             for(var i=1;i<=n-1;i++){  
  40.                 for(var k=1;k<=i;k++){  
  41.                     document.writeln(" ");  
  42.                 }  
  43.                 for(var j=1;j<=(9-2*i+2);j++){  
  44.                     if(j==1 || j==(9-2*i+2)){  
  45.                         document.writeln("*");  
  46.                     }else{  
  47.                         document.writeln(" ");  
  48.                     }  
  49.                 }  
  50.                 document.writeln("<br/>");  
  51.             }  
  52.             //空心菱形  
  53.             for(var i=1;i<=n;i++){ //行数  
  54.                 for(var k=1;k<=n-i;k++){ //打空格  
  55.                     document.writeln(" ");  
  56.                 }  
  57.                 for(var j=1;j<=(2*i-1);j++){ //打星号  
  58.                     //把if(i==n)判断去掉，则底边也是打印第一个和最后一个星号  
  59.                     /*if(i==n){ //最后一行  
  60.                         document.writeln("*");  
  61.                     }else*/ if(j==1 || j==(2*i-1)){ //两边  
  62.                         document.writeln("*");  
  63.                     }else{  
  64.                         document.writeln(" ");  
  65.                     }  
  66.                 }  
  67.                 document.writeln("<br/>");  
  68.             }  
  69.             for(var i=1;i<=n;i++){  
  70.                 for(var k=1;k<=i;k++){  
  71.                     document.writeln(" ");  
  72.                 }  
  73.                 for(var j=1;j<=(9-2*i+2);j++){  
  74.                     if(j==1 || j==(9-2*i+2)){  
  75.                         document.writeln("*");  
  76.                     }else{  
  77.                         document.writeln(" ");  
  78.                     }  
  79.                 }  
  80.                 document.writeln("<br/>");  
  81.             }  
  82.         </script>  
  83.     </head>  
  84.     <body></body>  
  85. </html>  

至此：配合我上一篇博文，js打印完整金字塔型，完整菱形，完整空心菱形就告一段落，程序的优化以后再谈。

★★★★★补充：★★★★★

上面的（3），考虑的是n=6时候的情况，9-2*i+2;没有一般性。

如果还是还是上面的代码，当n=7的时候，空心菱形就错乱了，如下图所示：


需要改进

当我们把底边下面的一行，记为第一行的时候。

当n=5时，最后一个星号为7

当n=6时，最后一个星号为9

当n=7时，最后一个星号是11

…

当n=m时，最后一个星号是2*m-3

当n=7时


改进后的代码：

[html]  view plain  copy
  1. //菱形下半部分，不带底边的  
  2.             for(var i=1;i<=n-1;i++){  
  3.                 for(var k=1;k<=i;k++){  
  4.                     document.writeln(" ");  
  5.                 }  
  6.                 for(var j=1;j<=(2*n-3-2*i+2);j++){  
  7.                     if(j==1 || j==(2*n-3-2*i+2)){  
  8.                         document.writeln("*");  
  9.                     }else{  
  10.                         document.writeln(" ");  
  11.                     }  
  12.                 }  
  13.                 document.writeln("<br/>");  
  14.             }  
当n=7时，空心菱形如下图所示：


改进后的代码，把原来的9-2*i+2循环注释掉

[html]  view plain  copy
  1. for(var i=1;i<=n;i++){  
  2.             for(var k=1;k<=i;k++){  
  3.                 document.writeln(" ");  
  4.             }  
  5.             /*for(var j=1;j<=(9-2*i+2);j++){  
  6.                 if(j==1 || j==(9-2*i+2)){  
  7.                     document.writeln("*");  
  8.                 }else{  
  9.                     document.writeln(" ");  
  10.                 }  
  11.             }*/  
  12.             for(var j=1;j<=(2*n-3-2*i+2);j++){  
  13.                 if(j==1 || j==(2*n-3-2*i+2)){  
  14.                     document.writeln("*");  
  15.                 }else{  
  16.                     document.writeln(" ");  
  17.                 }  
  18.             }  
  19.             document.writeln("<br/>");  
  20.         }  

后记： 罗马不是一天建成的，代码也不是一下就写好的，不怕错，错了找到然后解决，更能加深理解。

==================

JavaScript——函数
内容介绍
1.常用函数介绍
2.js面向对象编程——对象与对象实例
学习目标
1.充分理解函数的感念
2.能熟练的自定义函数
3.掌握js中常用的系统函数

抛出问题：函数——为什么需要函数
请完成一个这样的程序
输入两个数，再输入一个运算符(+,-,*,/)，得到结果
demo2.html

[html]  view plain  copy
  1. <html>  
  2.     <head>  
  3.         <script language="javascript">  
  4.             //输入两个数，再输入一个运算符（+_*/），得到结果  
  5.             var num1=window.prompt("请输入第一个num");  
  6.             var num2=window.prompt("请输入第二个num");  
  7.             var operator=window.prompt("请输入运算符");  
  8.   
  9.             num1=parseFloat(num1);  
  10.             num2=parseFloat(num2);  
  11.   
  12.             var res=0;  
  13.             if(operator=="+"){  
  14.                 res=num1+num2;  
  15.             }else if(operator=="-"){  
  16.                 res=num1-num2;  
  17.             }else if(operator=="*"){  
  18.                 res=num1*num2;  
  19.             }else{  
  20.                 res=num1/num2;  
  21.             }  
  22.             document.writeln("res="+res);  
  23.         </script>  
  24.     </head>  
  25.     <body></body>  
  26. </html>  

通过这个，引出函数的必要性

再一个问题 ：如果在另外的html文件(比如a.html,b.html,c.html) 中也需要完成：输入两个数，再输入一个运算符(+,-,*,/)，得到结果。那又该怎么办啊？

解决方法 ——函数：
为完成某一个功能的程序指令（语句）的集合，称为函数。
在js中，函数分为：自定义函数、系统函数（经常查看js帮助手册）

为了复用，单独的js文件

js函数
①为什么需要函数
②函数的基本概念
为完成某一个功能的代码（语句，指令）的集合
③基本语法
function 函数名(参数列表){
//代码…
return 值;//可以选择
}
demo3.html

[html]  view plain  copy
  1. <html>  
  2.     <head>  
  3.         <script language="javascript">  
  4.             //输入两个数，再输入一个运算符（+_*/），得到结果  
  5.             var num1=window.prompt("请输入第一个num");  
  6.             var num2=window.prompt("请输入第二个num");  
  7.             var operator=window.prompt("请输入运算符");  
  8.   
  9.             num1=parseFloat(num1);  
  10.             num2=parseFloat(num2);  
  11.   
  12.             //如何调用函数  
  13.   
  14.             document.writeln("res="+jsSuan(num1,num2,operator));  
  15.             //自定义函数  
  16.             function jsSuan(num1,num2,operator){ //特别强调 参数名请不要带var  
  17.             var res=0;  
  18.             if(operator=="+"){  
  19.                 res=num1+num2;  
  20.             }else if(operator=="-"){  
  21.                 res=num1-num2;  
  22.             }else if(operator=="*"){  
  23.                 res=num1*num2;  
  24.             }else{  
  25.                 res=num1/num2;  
  26.             }  
  27.             return res; //返回  
  28.             }  
  29.               
  30.         </script>  
  31.     </head>  
  32.     <body></body>  
  33. </html>  

改进：
把上面的函数单独提出，写到js文件中，然后在需要的地方引入
myfuns.js

[html]  view plain  copy
  1. function jsSuan(num1,num2,operator){ //特别强调 参数名请不要带var  
  2.             var res=0;  
  3.             if(operator=="+"){  
  4.                 res=num1+num2;  
  5.             }else if(operator=="-"){  
  6.                 res=num1-num2;  
  7.             }else if(operator=="*"){  
  8.                 res=num1*num2;  
  9.             }else{  
  10.                 res=num1/num2;  
  11.             }  
  12.             return res; //返回  
  13.             }  

demo4.html

[html]  view plain  copy
  1. <html>  
  2.     <head>  
  3.         <script language="javascript" src="myfuns.js"></script>  
  4.         <script language="javascript">  
  5.             //输入两个数，再输入一个运算符（+_*/），得到结果  
  6.             var num1=window.prompt("请输入第一个num");  
  7.             var num2=window.prompt("请输入第二个num");  
  8.             var operator=window.prompt("请输入运算符");  
  9.   
  10.             num1=parseFloat(num1);  
  11.             num2=parseFloat(num2);  
  12.   
  13.             //外部引用  
  14.   
  15.             document.writeln("res="+jsSuan(num1,num2,operator));  
  16.         </script>  
  17.     </head>  
  18.     <body></body>  
  19. </html>  



猜你喜欢

转载自blog.csdn.net/dududu01/article/details/52749160
今日推荐
周排行
AIZU 2224 Save your cats(并查集)
HTTP响应头状态码详解
Python socket编程（2）
MaxCompute Studio使用心得系列7—作业对比
Supervisor安装使用
LeetCode 164. Maximum Gap
mysql面试题: 一张表里面有ID自增主键，当insert了17条记录之后，删除了第15,16,17条记录，再把mysql重启，再insert一条记录，这条记录的ID是18还是15
nutch1.2 DeleteDuplicates IndexMerger 详解
OC - @property与setter,getter方法
SpringBoot @Transactional的rollbackFor属性
每日归档
更多
2024-09-19(0)
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022