javascript 的点点滴滴

最新推荐文章于 2022-09-07 15:15:12 发布
最新推荐文章于 2022-09-07 15:15:12 发布
阅读量343 收藏 2
点赞数
分类专栏： Javascript

关于for循环

案例：

打印一行10个星号

①

[html]  view plain copy
  1. for(var i=0;i<10;i++){  
  2.                 document.writeln("*");  
  3.             }  

或者②

[html]  view plain copy
  1. for(var i=1;i<=10;i++){  
  2.                 document.writeln("*");  
  3.             }  
一个是i=0;i<10;而另一个是i=1;i<=10;两者都是循环打印星号10次。

在①中，i取值：0,1,2,3,4,5,6,7,8,9共10个。

在②中，i取值：1,2,3,4,5,6,7,8,9,10共10个。


[html]  view plain copy
  1. <html>  
  2.     <head>  
  3.         <script language="javascript">  
  4.             for(var i=0;i<10;i++){  
  5.                 document.writeln("*");  
  6.             }  
  7.             document.writeln("<br/>=========<br/>");  
  8.             for(var i=1;i<=10;i++){  
  9.                 document.writeln("*");  
  10.             }  
  11.         </script>  
  12.     </head>  
  13.     <boyd></body>  
  14. </html>  

初学者，容易对i=0开始计数，转不过来，因为我们现实生活中计数都是从1开始，所以看i=1;i<=10;更加习惯些。

数组小标从0开始开始，为什么？找到这样的解释：

C的许多特征是为了方便编译器设计者而建立的(为什么不呢？开始几年C语言的主要客户就是那些编译器设计者)。数组下标从０而不是从１开始也是根据编译器设计者的思路而来的，因为偏移量的概念在他们心中已是根深蒂固。但这种设计让非编译器设计者感觉很别扭，他们可能会在一个定义的a[10]的a[10]存储数据，导致有一位偏移（one-bit offset）错误。
java为何下标也从０开始呢，估计是考虑到习惯性问题。C/C++程序员被固化成下标从０开始后，想更改它也是件费劲事。

没什么可说的，就是这么定义的，接受它。

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

（1）打印完整金字塔

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


 观察发现：


第一行星号的个数为1；

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

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

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

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

[html]  view plain copy
  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>  

Nikloas
关注
专栏目录
韩顺平轻松搞定网页设计(html.css.js)(完整版)
09-05
轻松搞定网页设计html+css+javascript 内容介绍 该教程用循序渐进的手法和项目驱动的案例，由浅入深的讲解网页设计的基础部分和高级部分，包括以下内容： 1、html详解； 2、css(块级元素、行内元素、标准流盒子模型、浮动定位)； 3、div+css网页布局(盒子模型经典案例、仿sohu首页面布局)； 4、javascript深入讲解(js基本语法、数组、js面向对象编程，js系统函数、事件、js dom编程详解、正则表达式)
韩顺平_轻松搞定网页设计(html+css+javascript)_第24讲_js案例讲解_js自定义函数_学习笔记_源代码图解_PPT文档整理
热门推荐
文西马龙
11-27 1万+
文西马龙：http://blog.csdn.net/wenximalong/ 关于for循环 案例： 打印一行10个星号 ① for(var i=0;i<10;i++){ document.writeln("*"); } 或者② for(var i=1;i<=10;i++){ document.writeln("*"); }一个是i=0
JS之函数案例
unravel_sky的博客
09-07 222
【代码】JS之函数案例。
JS中函数案例
diaoyin8112的博客
03-16 233
//案例1：求出一组数的最大值 function f(arr) { var max = arr[0]; for (var i = 0; i < arr.length;i++){ if (max < arr[i + 1]) { max = arr[i + ...
js函数小案例
m0_66039084的博客
03-14 567
<!-- <script> /* 编写任意个第一个数字为1的数字的求和、差、积、商的函数 sum(1,2,3,4,5,6,'-') function sum() {} // 1-2-3 sum(1, 2, 3, "-"); // 1+2 sum(1, 2, "+"); */ /* 分析： ...
基于Python、JavaScript和TypeScript的“呵呵等等的点点滴滴”项目设计源码
最新发布
10-02
该项目为“呵呵等等的点点滴滴”综合应用设计源码，采用Python作为主要开发语言，并融入JavaScript和TypeScript进行前后端开发，总计包含616个文件。具体文件类型分布如下：JavaScript文件244个，Markdown文件133个...
technology-travel:科学之旅的点点滴滴
06-28
<<<<<<< HEAD gitStudy ======= technology-travel 科学之旅的点点滴滴 3cba2ef531221d5c87598638c9f0ee7f9959b847
electron-study:electron学习的点点滴滴
05-25
项目说明 本仓库主要是介绍学些 electron中遇到的一些问题，并提出解决办法，与其他仓库不同的是，这里是以实践为主，并配有详细的注释代码，版本说明 目录结构说明(应用场景篇) lesson-1 初学electron-起步篇-暂未...
docs:记录自己工作与生活的点点滴滴
05-03
home comment single heroImage tagline actionText actionLink features true true true 不积硅步，无以至千里 JUST DO IT /guide/ title details 基础知识 技术开发知识的汇总，建立自己的技术体系。...
点点滴滴：一个正在进行的Unity Webgl游戏
02-26
《点点滴滴：Unity WebGL游戏开发的初探》 Unity是一款强大的跨平台游戏开发引擎，广泛应用于PC、移动设备以及网络平台，其中WebGL技术使得游戏可以直接在网页上运行，无需任何插件或应用程序下载。本项目“点点...
JS function函数 基础案例
07-07
JS function函数 基础案例 最简洁 值得下载
js网页设计案例
02-04
js详细的网页设计案列，各种网页效果，页面搜索，游戏，鼠标特效等
关于JS函数的一些小案例
Null_Robot的博客
07-07 183
1.函数数组中求最大值。 <body> <script> function getArrMax(arr){ var max = arr[0]; for(var i = 1;i <= arr.length;i++){ if (arr[i]>max){ max = arr[i]; }
js 简单函数案例
08-29 291
+ 编写一个函数，生成4位数字的验证码 function code(){ var code = ""; for(var i = 0; i < 4; i++){ var a = randomNum(0, 9); code += a; } return code; } console.log(code()); + 编写函数digit...
JS学习之函数案例
weixin_44079801的博客
06-26 233
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函数案例</title> <script> //案例4.用户输入年份,输出当前年份2月份的天数//闰年29平年28 function backDay(){ var year = prompt('请输入年份:'); if(isRunnian(year)){
JavaScript函数案例
qq_58492621的博客
07-23 1080
JavaScript函数案例，包含基本函数、arguments的使用以及构造函数的案例介绍，是比较全面典型的案例，对熟悉函数有很大的作用。
JavaScript函数以及案例
小桂的博客
12-09 713
文章目录​​​​​ 一.为什么需要函数 二.函数使用 三.函数传参 四.函数返回值 五.作用域 六.匿名函数 前言 1. 掌握函数的基本使用，让代码具备复用能力 2. 理解封装的意义，能够具备封装函数的能力 一.为什么需要函数? 1.函数是什么？ function，是被设计为执行特定任务的代码块 2.说明 函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势 是有利于精简代码方便复用。 3....
JS学习之函数实例
weixin_44079801的博客
06-26 291
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函数实例</title> <script> //4.通过榨汁机看透函数 </script> </head> <body> </body> </html> 函数:实现某种功能 function fun(
JS基础----函数应用 案例
m0_51272779的博客
05-08 235
JS基础----函数应用 简单案例 目录排序+搜索关键字
ScriptCraft辅助教程：让代码忍者轻松Minecraft黑客活动
资源摘要信息:"copendojo-scriptcraft:收集点点滴滴，让我们的代码忍者更轻松地使用 ScriptCraft 进行 Minecraft hack。" 知识点: 1. Node.Js的安装和运行: 首先，我们需要安装Node.js。Node.js是一个基于Chrome ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值