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

最新推荐文章于 2024-05-07 22:37:05 发布
最新推荐文章于 2024-05-07 22:37:05 发布
阅读量1.4w 收藏 17
点赞数 7
分类专栏： PHP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenximalong/article/details/8228330
版权

文西马龙：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;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>
	<head>
		<script language="javascript">
			for(var i=0;i<10;i++){
				document.writeln("*");
			}
			document.writeln("<br/>=========<br/>");
			for(var i=1;i<=10;i++){
				document.writeln("*");
			}
		</script>
	</head>
	<boyd></body>
</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更好理解些。

//金字塔
			for(var i=1;i<=n;i++){
				for(var j=1;j<=n-i;j++){
					document.write(" ");
				}
				for(var j=1;j<=2*i-1;j++){
					document.write("*");
				}
				document.writeln("<br/>");
			}
（2）打印空心三角形

发现如下规律：

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

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

//空心金字塔
			for(var i=1;i<=n;i++){ //行数
				for(var k=1;k<=n-i;k++){ //打空格
					document.writeln(" ");
				}
				for(var j=1;j<=(2*i-1);j++){ //打星号
					if(i==n){ //最后一行
						document.writeln("*");
					}else if(j==1 || j==(2*i-1)){ //两边
						document.writeln("*");
					}else{
						document.writeln(" ");
					}
				}
				document.writeln("<br/>");
			}
（3）打印空心菱形的下半部分，不带底边的，如下图所示


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

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

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

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


//菱形下半部分，不带底边的
			for(var i=1;i<=n-1;i++){ //不带底边，就可以少打印一行
				for(var k=1;k<=i;k++){
					document.writeln(" ");
				}
				for(var j=1;j<=(9-2*i+2);j++){
					if(j==1 || j==(9-2*i+2)){
						document.writeln("*");
					}else{
						document.writeln(" ");
					}
				}
				document.writeln("<br/>");
			}

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


for(var i=1;i<=n;i++){ //行数
				for(var k=1;k<=n-i;k++){ //打空格
					document.writeln(" ");
				}
				for(var j=1;j<=(2*i-1);j++){ //打星号
					if(j==1 || j==(2*i-1)){ //两边
						document.writeln("*");
					}else{
						document.writeln(" ");
					}
				}
				document.writeln("<br/>");
			}
（5）打印完整菱形，上面的分析就可以得出了 


//空心菱形
			for(var i=1;i<=n;i++){ //行数
				for(var k=1;k<=n-i;k++){ //打空格
					document.writeln(" ");
				}
				for(var j=1;j<=(2*i-1);j++){ //打星号
					/*if(i==n){ //最后一行
						document.writeln("*");
					}else*/ if(j==1 || j==(2*i-1)){ //两边
						document.writeln("*");
					}else{
						document.writeln(" ");
					}
				}
				document.writeln("<br/>");
			}
			for(var i=1;i<=n;i++){
				for(var k=1;k<=i;k++){
					document.writeln(" ");
				}
				for(var j=1;j<=(9-2*i+2);j++){
					if(j==1 || j==(9-2*i+2)){
						document.writeln("*");
					}else{
						document.writeln(" ");
					}
				}
				document.writeln("<br/>");
			}
完整图形： 


<html>
	<head>
		<!--
		   *    1
		  ***   2*2-1
		 *****  2*3-1 
		******* 2*4-1
		-->
		<script language="javascript">
			var n=window.prompt();
			//金字塔
			for(var i=1;i<=n;i++){
				for(var j=1;j<=n-i;j++){
					document.write(" ");
				}
				for(var j=1;j<=2*i-1;j++){
					document.write("*");
				}
				document.writeln("<br/>");
			}
			//空心金字塔
			for(var i=1;i<=n;i++){ //行数
				for(var k=1;k<=n-i;k++){ //打空格
					document.writeln(" ");
				}
				for(var j=1;j<=(2*i-1);j++){ //打星号
					if(i==n){ //最后一行
						document.writeln("*");
					}else if(j==1 || j==(2*i-1)){ //两边
						document.writeln("*");
					}else{
						document.writeln(" ");
					}
				}
				document.writeln("<br/>");
			}
			//document.writeln("<br/>");
			//菱形下半部分，不带底边的
			for(var i=1;i<=n-1;i++){
				for(var k=1;k<=i;k++){
					document.writeln(" ");
				}
				for(var j=1;j<=(9-2*i+2);j++){
					if(j==1 || j==(9-2*i+2)){
						document.writeln("*");
					}else{
						document.writeln(" ");
					}
				}
				document.writeln("<br/>");
			}
			//空心菱形
			for(var i=1;i<=n;i++){ //行数
				for(var k=1;k<=n-i;k++){ //打空格
					document.writeln(" ");
				}
				for(var j=1;j<=(2*i-1);j++){ //打星号
					//把if(i==n)判断去掉，则底边也是打印第一个和最后一个星号
					/*if(i==n){ //最后一行
						document.writeln("*");
					}else*/ if(j==1 || j==(2*i-1)){ //两边
						document.writeln("*");
					}else{
						document.writeln(" ");
					}
				}
				document.writeln("<br/>");
			}
			for(var i=1;i<=n;i++){
				for(var k=1;k<=i;k++){
					document.writeln(" ");
				}
				for(var j=1;j<=(9-2*i+2);j++){
					if(j==1 || j==(9-2*i+2)){
						document.writeln("*");
					}else{
						document.writeln(" ");
					}
				}
				document.writeln("<br/>");
			}
		</script>
	</head>
	<body></body>
</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时


改进后的代码：

//菱形下半部分，不带底边的
			for(var i=1;i<=n-1;i++){
				for(var k=1;k<=i;k++){
					document.writeln(" ");
				}
				for(var j=1;j<=(2*n-3-2*i+2);j++){
					if(j==1 || j==(2*n-3-2*i+2)){
						document.writeln("*");
					}else{
						document.writeln(" ");
					}
				}
				document.writeln("<br/>");
			}
当n=7时，空心菱形如下图所示：


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

	for(var i=1;i<=n;i++){
				for(var k=1;k<=i;k++){
					document.writeln(" ");
				}
				/*for(var j=1;j<=(9-2*i+2);j++){
					if(j==1 || j==(9-2*i+2)){
						document.writeln("*");
					}else{
						document.writeln(" ");
					}
				}*/
				for(var j=1;j<=(2*n-3-2*i+2);j++){
					if(j==1 || j==(2*n-3-2*i+2)){
						document.writeln("*");
					}else{
						document.writeln(" ");
					}
				}
				document.writeln("<br/>");
			}

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

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

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

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

<html>
	<head>
		<script language="javascript">
			//输入两个数，再输入一个运算符（+_*/），得到结果
			var num1=window.prompt("请输入第一个num");
			var num2=window.prompt("请输入第二个num");
			var operator=window.prompt("请输入运算符");

			num1=parseFloat(num1);
			num2=parseFloat(num2);

			var res=0;
			if(operator=="+"){
				res=num1+num2;
			}else if(operator=="-"){
				res=num1-num2;
			}else if(operator=="*"){
				res=num1*num2;
			}else{
				res=num1/num2;
			}
			document.writeln("res="+res);
		</script>
	</head>
	<body></body>
</html>

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

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

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

为了复用，单独的js文件

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

<html>
	<head>
		<script language="javascript">
			//输入两个数，再输入一个运算符（+_*/），得到结果
			var num1=window.prompt("请输入第一个num");
			var num2=window.prompt("请输入第二个num");
			var operator=window.prompt("请输入运算符");

			num1=parseFloat(num1);
			num2=parseFloat(num2);

			//如何调用函数

			document.writeln("res="+jsSuan(num1,num2,operator));
			//自定义函数
			function jsSuan(num1,num2,operator){ //特别强调 参数名请不要带var
			var res=0;
			if(operator=="+"){
				res=num1+num2;
			}else if(operator=="-"){
				res=num1-num2;
			}else if(operator=="*"){
				res=num1*num2;
			}else{
				res=num1/num2;
			}
			return res; //返回
			}
			
		</script>
	</head>
	<body></body>
</html>

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

function jsSuan(num1,num2,operator){ //特别强调 参数名请不要带var
			var res=0;
			if(operator=="+"){
				res=num1+num2;
			}else if(operator=="-"){
				res=num1-num2;
			}else if(operator=="*"){
				res=num1*num2;
			}else{
				res=num1/num2;
			}
			return res; //返回
			}

demo4.html 

<html>
	<head>
		<script language="javascript" src="myfuns.js"></script>
		<script language="javascript">
			//输入两个数，再输入一个运算符（+_*/），得到结果
			var num1=window.prompt("请输入第一个num");
			var num2=window.prompt("请输入第二个num");
			var operator=window.prompt("请输入运算符");

			num1=parseFloat(num1);
			num2=parseFloat(num2);

			//外部引用

			document.writeln("res="+jsSuan(num1,num2,operator));
		</script>
	</head>
	<body></body>
</html>


韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录

wenximalong
关注
  • 7
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用原生js写三角形
TomZengl的博客
08-01 2134
-直角三角形 //直角三角形 let a = (number) => { let str = ""; //此循环的是三角形的行数 number等于几就有几行 for(let i = 0; i< number ; i++){ //此循环的是三角形每行的*的个数 for(let j = 0; j <= i ; j++){
【HTML】输出一个等腰三角形
weixin_64557527的博客
06-30 976
废话少说，直接放代码
HTML+CSS项目案例
qq_52108058的博客
11-30 3536
案例演示：（table、tr、td、th的练习）案例演示：（文本样式图片标签练习）案例演示：（文本样式练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）
HTML+CSS之CSS案例大全
最新发布
weixin_62575733的博客
05-07 927
CSS 1.体验css语法规范 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
【带给你不一样的思路】纯 CSS + HTML 实现几个好看的案例
qq_56352725的博客
11-29 763
一些简单的前端案例，适合刚入门 HMTL + CSS 的学者进行练习哦！！！练习重点：定位！！！
html css 网页代码案例,案例1-HTML使用css+div设计简单网页（62页）-原创力文档
weixin_30898967的博客
06-10 1491
至此就完成了"About"网页的制作,依此类推，修改html中body的类为services/portfolio/contact制作相应html文件并分别保存。在css文件中添加各个网页相应的头部背景图片路径(如services网页的头部背景图片为services.jpg,在css中添加如下代码)： body.services #header {height: 150px;background:...
韩顺平 轻松搞定网页设计 html+css+js笔记完整版
10-05
本资源“韩顺平 轻松搞定网页设计 html+css+js笔记完整版”是针对韩顺平老师的网页设计教学课程的笔记集合，对于学习者来说是一份宝贵的资料。 首先，HTML（HyperText Markup Language）是网页内容的基础，它是用于...
韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之Javascript学习笔记
03-14
在韩顺平的《轻松搞定网页设计HTML+CSS+JAVASCRIPT》中，JavaScript的学习被分为几个主要部分。 首先，JavaScript的基本语法是学习的基础。JS的标识符遵循特定的规则，可以是字母、数字、下划线或美元符号的组合，...
2011韩顺平轻松搞定网页设计(html+css+js)之javascript现场授课笔记(完整版).doc
09-30
JavaScript，简称为JS，是一种轻量级的解释型编程语言，广泛应用于Web开发。它主要负责为网页添加交互性，让静态的HTML页面变得生动有趣。JS代码可以在客户端的浏览器中运行，由浏览器内置的JS引擎负责解释执行。这...
韩顺平 html+css+javascript
05-22
"韩顺平JS笔记完整版.doc"则涵盖了JavaScript的核心概念，从变量、数据类型、运算符，到流程控制（条件语句、循环）、函数、对象和数组。还将涉及DOM操作，这是JavaScript与HTML交互的关键，包括获取元素、修改元素...
js实现*号三角形及菱形
Jyannic的博客
09-11 6444
三角形 //直角三角形 for(var n=5,i=0;i     for(var j=0;j         document.write("&nbsp");     }     for(var j=0;j         document.write("*");     }     document.write(""); }  document.write
javascript经典网页实例
12-30
js前台网页开发实例!非常不错!发现来大家一起分享!
个人网页html+css案例.rar
04-07
简单的个人主页网页，里面有完整的Html+css代码，有完整的素材图片，非常适合教学演示使用，也适合做学生考试的素材，适合初学者。
HTMl+CSS登录小实例
03-21
一个实用的HTML+CSS的登录界面，小实战案例
三分钟学会使用HTML制作三角形
SUNZEXUE的博客
03-10 3797
首先我们了解在HTML中每一个元素都是一个盒子 盒子是由外边距 边框 内边距 内容组成的 而三角形 是由控制盒子边框构成 如下列代码 得到下列图形 在这里我们由于边框和内容的挤压 得到了四个梯形， 那我们尝试将内容设置为零。 将代码中width和height 的值设为0； 就可以得到四个三角形， 但是因为我们只要一个三角形， 所以可以尝试将不要的三角形隐藏， 这里就要提到 border中的transparent属性 该属性的用处为将border隐藏 &l
js写等腰三角形
fizz141242的博客
08-07 3050
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script&
JavaScript 函数原理 +各种案例 + 使用场景
老段的CSDN的博客
08-23 473
2、函数内部只能出现1次return，并且return后面diamond不会再执行，所以return后面的数据不要换行写。4、函数可以没有return，这种情况函数默认返回值为undefined
HTML+CSS写三角形原理
qwe耿的博客
05-25 757
HTML+CSS写三角形原理
关于JS函数的一些小案例
Null_Robot的博客
07-07 156
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]; }
韩顺平轻松搞定网页设计(html+css+javascript)笔记下载
01-24
韩顺平老师的网页设计(html css javascript)笔记是非常实用和权威的学习资料。想要轻松搞定这方面的知识，首先要有坚定的学习决心和耐心。其次，要充分利用韩老师提供的学习资料和视频教程，认真地阅读笔记，学习...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值