项目五：对象

最新推荐文章于 2023-07-05 10:47:54 发布
最新推荐文章于 2023-07-05 10:47:54 发布
阅读量1k 收藏 6
点赞数
分类专栏： JS 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48864837/article/details/127658891
版权

项目五：对象的相关代码和报告
项目五：对象

设备仪器/软件环境
1.Windows 10系统
2.HBuilder

实验(实训)/目标
1.掌握创建对象和对象实例化的方法
2.掌握内置对象属性和方法的的应用
3.掌握数组对象和日期对象的综合应用方法
4.掌握在页面中输出结果的方法

实验(实训)
过程/步骤
1.设计一个页面，在页面上显示信息“现在是xxxx年xx月xx日xx点xx分xx秒（星期xx），欢迎你的到来”。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	<script type="text/javascript">
	var today=new Date();
	document.write("现在是"+today.getFullYear()+"年"+(today.getMonth()+1)+"月"
	+today.getDate()+"日"+today.getHours()+"点"+today.getMinutes()+"分"+today.getSeconds()+"秒"
	+("星期"+today.getDay())+","+"欢迎你的到来！");
	var s=new Date(milliseconds);
	document.write(s);
	</script>	
	</body>
</html>

2.使用Math对象的random()方法编制一个产生0-100（含1，100）之间的随机整数的函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		document.write(parseInt(Math.random() * 101));
		</script>	
	</body>
</html>

3.编写程序，根据用户输入的数值，计算其平方、平方根和自然对数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		var r=prompt("请输入r的值：")
		document.write(Math.pow(r,2)+"<br>");
		document.write(Math.sqrt(r)+"<br>");
		document.write(Math.log(r)+"<br>");
		</script>	
	</body>
</html>

4.计算自己活了多少天？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	<script type="text/javascript">
	var yourdate=prompt("请输入出生年月日，格式为xxxx/xx/x");
	var borndate=new Date(yourdate);
	var nowdate=new Date();
	
	var borndays=borndate.getTime();
	var newdays=nowdate.getTime();
	
	var result=newdays-borndays;
	var numdays=24*60*60*1000;
	var alldays=parseInt(result/numdays);
	alert("您好，已经活了"+alldays+"天");
	
	
	</script>	
	</body>
</html>

5.输入一个字符串，然后反向输出到页面上。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script type="text/javascript">
		var origin_s,upper_s,i;
		origin_s=prompt("请输入一个字符串：");
		upper_s=origin_s.toUpperCase();
		for(i=upper_s.length-1;i>=0;i--){
		document.write(upper_s.charAt(i));
		}
	</script>
	</body>
</html>

6.求圆周率的4次方，并取四舍五入整数显示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		var p, num;
		p=Math.PI;
		num=Math.round(Math.pow(p,4));
		alert("圆周率的4次方经过四舍五入取整后的值为："+num);
		</script>
	</body>
</html>

7.输出JavaScript能够处理的数值区间。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		var prompt;
		prompt='javascript 有效数的范围是：';
		prompt+="["+Number.MIN_VALUE+","+Number.MAX_VALUE+"]";
		document.write(prompt);
		</script>
	</body>
</html>

8.使用以下两种方法创建一个动物对象，再为该对象添加属性和方法：
（1）通过Object创建对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		var animal=new Object();
		animal.name="花花";
		animal.owner="王小丽";
		animal.color="黑色";
		document.write(animal.owner+"家的小狗名字叫"
		+animal.name+"，颜色是"+animal.color+"的");
		</script>
	</body>
</html>

（2）通过字面量创建对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		var animal={
		name:"花花",
		owner:"王小丽",
		color:"黑色",
		}
		document.write(animal.owner+"家的小狗名字叫"
		+animal.name+"，颜色是"+animal.color+"的");
		</script>
	</body>
</html>

9.通过构造函数创建一个Star（明星）对象类，并按以下要求完成：
（1）为该对象类添加属性。
（2）利用Prototype属性为该对象类添加共享属性和共享方法。
（3）创建一个对象实例，通过原型对象Prototype访问共享属性和共享方法，
最后结果输出。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		function Star(name,age,sex,sang){
		this.name=name;
		this.age=age;	  
		this.sex=sex;	
		this.sang=sang;
		}
		Star.prototype.type="演员";
		Star.prototype.type1="爱的供养";
		Star.prototype.type2="修炼爱情";
		Star.prototype.Star_fun=function(){
		document.write(Star1.type+Star1.name+"是美的！");	
		}
		var Star1=new Star("杨幂","22","女","爱的供养");
		var Star2=new Star("林俊杰","26","男","修炼爱情");		
		document.write(Star1.type+Star1.name+"的年龄是"+Star1.age
		+"岁,"+"她的歌曲是"+Star1.type1+"<br>");	
		document.write(Star1.type+Star2.name+"的年龄是"+Star2.age
		+"岁,"+"他的歌曲是"+Star1.type2+"<br>");	
		Star1.Star_fun();
		</script>
	</body>
</html>

10.完成课本同步案例5-16，子类继承父类的属性和方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		 function Person(name,gender){
			 this.name=name;
			 this.gender=gender;
		}	
		Person.prototype.introduce=function(){
			document.write("我叫"+this.name+","+this.gender+"<br>");
		};
		function Student(name,gender,major){
			Person.call(this,name,gender);
			 this.major=major;	 
		}		
		Student.prototype=new Person();
		 var stu=new Student("王小丽","女","计信专业");
		 stu.introduce();
		Student.prototype.introduce=function(){
			document.write("我叫"+this.name+","+this.gender+","+this.major+"的"+"<br>");
		}; 
		stu.introduce();
		</script>
	</body>
</html>

11.使用Array数组对象在页面上显示当前的时间，并显示是星期几。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		 var week,today,week_i;
		 week=new Array("星期日","星期一","星期二","星期三","星期四"+"星期五"+"星期六");
		 today=new Date();
		 week_i=today.getDay();
		 document.write(today.toLocaleTimeString()+week[week_i]);
		 
		</script>
	</body>
</html>

12.创建一个数组，并对其中的数组元素进行降序排序。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var MyArr;
			// MyArr=new Array(5);
			
			// MyArr[0]="George";
			// MyArr[1]="Jon";
			// MyArr[2]="Thom";
			// MyArr[3]="Adrew";
			// MyArr[4]="Mar";
			MyArr=new Array("George","Jon","Thom","Adrew","Mar");
			document.write("数组MyArr的数组元素排序前输出效果为："+MyArr+"<br>");
			document.write("数组MyArr的数组元素升序排序输出效果为："+MyArr.sort()+"<br>");
			document.write("数组MyArr的数组元素降序排序前输出效果为："+MyArr.reverse()+"<br>");
			</script>
		</body>
</html>

13.完成综合案例5：每天信息提示栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body bgcolor="aqua">
		<br>
		<center>
			<font color="beige">
				<h2><font color="blue"><b><font color="black">按日期显示提示信息
				</font></b></font></h2>
			</font>
			<hr width="300">
			<br>
		<script type="text/javascript">
		var Daymsg=new Array();
		MyStamp=new Date();
		today=MyStamp.getDate();
		Daymsg[0]="一日之计在于初";
		Daymsg[1]="今天应该去初差";
		Daymsg[2]="今天别忘了买车票"
		Daymsg[3]="今天要去超市购物"
		Daymsg[4]="今天去神车"
		Daymsg[5]="今天要去银行"
		Daymsg[6]="今天是去做调研"
		Daymsg[7]="今天要通知领导开会"
		Daymsg[8]="今天是特殊的节日"
		Daymsg[9]="今天任务开始"
		Daymsg[10]="今天是妈妈的生日，早点回家做饭吧"
		Daymsg[11]="今天是任务的最后期限"
		Daymsg[12]="今天有6节课"
		Daymsg[13]="今天要上JavaScript"
		Daymsg[14]="今天要进行JavaScript实训"
		Daymsg[15]="今天要交JavaScript报告"
		Daymsg[16]="今天要学JavaScript对象"
		Daymsg[17]="今天要学JavaScript数组"
		Daymsg[18]="今天的专业课程考试"
		Daymsg[19]="今天休息"
		Daymsg[20]="今天是个特殊的日子"
		Daymsg[21]="今天要进行JavaScript数组实训，别忘了带计算机！"
		Daymsg[22]="今天要学JavaScript数组对象"
		Daymsg[23]="今天要出去，注意准本好"
		Daymsg[24]="今天天气预报有雨，别忘了带伞"
		Daymsg[25]="今天要去旅游"
		Daymsg[26]="今天要去开会"
		Daymsg[27]="今天要去参加生日party"
		Daymsg[28]="今天的会议要注意带笔记"
		Daymsg[29]="今天要进行思政学习"
		Daymsg[30]="今天是最后一天，天气很好"
			document.write(Daymsg[today-1]);	
		</script></center>
	</body>
</html>

结果记录
与分析总结
1.设计一个页面，在页面上显示信息“现在是xxxx年xx月xx日xx点xx分xx秒（星期xx），欢迎你的到来”的结果图。
在这里插入图片描述

2.使用Math对象的random()方法编制一个产生0-100（含1，100）之间的随机整数的函数的结果图。
在这里插入图片描述

3.编写程序，根据用户输入的数值，计算其平方、平方根和自然对数的结果图。
在这里插入图片描述

4.计算自己活了多少天的结果图。
在这里插入图片描述

5.输入一个字符串，然后反向输出到页面上的结果图。
在这里插入图片描述

6.求圆周率的4次方，并取四舍五入整数显示的结果图。
在这里插入图片描述

7.输出JavaScript能够处理的数值区间的结果图。
在这里插入图片描述

8.使用以下两种方法创建一个动物对象，再为该对象添加属性和方法：
（1）通过Object创建对象
在这里插入图片描述

（2）通过字面量创建对象的结果图。

在这里插入图片描述

9.通过构造函数创建一个Star（明星）对象类，并按以下要求完成：
（1）为该对象类添加属性。
（2）利用Prototype属性为该对象类添加共享属性和共享方法。
（3）创建一个对象实例，通过原型对象Prototype访问共享属性和共享方法，
最后结果输出。
在这里插入图片描述

10.完成课本同步案例5-16，子类继承父类的属性和方法的结果图。
在这里插入图片描述

11.使用Array数组对象在页面上显示当前的时间，并显示是星期几的结果图。
在这里插入图片描述

12.创建一个数组，并对其中的数组元素进行降序排序的结果图。
在这里插入图片描述

13.完成综合案例5：每天信息提示栏的结果图。
在这里插入图片描述

总结
JavaScript是基于对对象的语言，所有JavaScript的编程可以使用面向对象的程序设计思想来进行。在JavaScript对象编程中，使用对象的封装性和继承性。
String对象类的两种方法：一是模拟HTML标记，二是用于操作字符串。Math对象主要用于数学运算，其方法主要有log(x)返还自然对数，pow(x,y)返回x的y次方，sqrt(x)返回x的平方根。JavaScript能够处理的最大数值和最小数值，可以使用Number对象的Max_VALUE属性和MIN_VALUE属性来获得。自定义对象常用方法有通过Object对象、字面量对象、构造函数等。创建自定义对象后，还可以通过Function对象创建方法。使用Function对象来定义方法时有两种方法，一是使用Function对象显式地创建函数，二是利用关键字Function隐式地创建函数。数组的属性和方法如下所示：
Length:返回数组中元素的个数
Join（）：将数组中的所有的元素连接为一个字符串
Concat（）：连接两个或多个数组
Sort（）：对数组元素进行排序
Reverse（）：对数组元素进行倒序排序

可爱的小笼包
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js基础知识
warriordwu的博客
07-13 163
一.JavaScript的组成 BOM(浏览器对象模型) 使用BOM可以操作浏览器窗口,比如:弹出框,控制浏览器跳转,获取分辨率等 DOM(文档对象模型) 通过DOM提供的API可以对页面上的各种元素进行操作(大小,位置,颜色等) ECMAScript 逻辑编程语法,实现业务逻辑. 浏览器引擎 渲染引擎 用来解析HTML和CSS JS引擎 用来执行JavaScript代码,比如谷歌浏览器的V8引擎 二.数据类型 1.undefined Undefined是一个特殊的值,当一个变量声明但未被初始化时,就会被赋
js中的Math方法
weixin_43168302的博客
07-09 94
Math和其他的对象不同，它不是一个构造函数 它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法 console.log(Math.PI)//表示圆周率 console.log(Math.abs(-3)) //abs（）用来计算一个数字的绝对值 console.log(Math.ceil(1.5))//小数位只要有值，就进位 console.log(Math.floor(1.5))//小数位扔掉 console.log.
圆周率计算
m0_57158496的博客
01-27 634
圆周率计算 <ul> <li><a href='https://blog.csdn.net/m0_57158496/' target='_blank' title='我的CSDN主页'>我的CSDN主页</a></li> <li><a href='https://blog.csdn.net/m0_57158496/article/details/121468884?utm_source=app&app_
html页面显示系统时间-格式为： xxxx年xx月xx日 xx:xx:xx （时分秒）
最新发布
qq_57804294的博客
07-05 4641
html页面显示系统时间-格式为： xxxx年xx月xx日 xx:xx:xx （时分秒）
实验项目五：类和对象_实验项目六：运算符重载.zip
05-05
在C++编程语言中，类和对象是面向对象编程（OOP）的核心概念。面向对象编程是一种编程范式，它将现实世界中的实体抽象为类，而类的实例化则形成了对象，以此来组织和管理代码。在这个实验项目中，我们将深入理解这两...
java面向对象项目案例：宠物商店完整版 - 副本.rar
12-06
本案例采用java面向对象编程开发的宠物商店的案例，一共有五部分组成：第一部分是系统启动；第二部分是宠物主人登录；第三部分宠物主要购买库存宠物；第四部分是宠物主人购买新培育宠物；第五部分是宠物主人卖出宠物...
Day05:第五项目
03-12
在“Day05:第五项目”中，我们聚焦于JavaScript技术的应用。JavaScript是一种广泛用于网页和网络应用的编程语言，它的主要功能是为HTML页面添加交互性，使其能够动态响应用户的操作。在这个项目中，我们可以预见到将...
字节第四届青训营大数据基础班项目五：实现简易BI系统源码.zip
10-29
"字节第四届青训营大数据基础班项目五：实现简易BI系统源码.zip" 这个标题表明这是一个与大数据相关的项目，属于字节跳动第四届青训营的大数据基础课程的一部分。关键词“项目五”暗示这是课程中的第五个实践任务，...
sciencefair:五年级Science Fair项目
05-06
五年级Science Fair项目 演示从CSV源（在本例中为geiger计数器）到MySQL数据库的数据捕获。 然后使用Hibernate JPA将数据映射到Java对象。 然后，使用JAX-RS（Jersey）通过REST提供对数据的简单访问。 然后使用...
java 生成随机数
qq_45554909的博客
02-09 1004
方式一： 提示：随机数 import java.util.Random; Random rand = new Random(); int num= rand.nextInt(100); [0,10） 方式二： 提示：使用Math.random() 产生随机数 Math.random() 产生[0,1)范围的随机值 Math.random() * 90：[0,90) Math.random() * 90 + 10：[10,100) 即得到 [10,99] 使用(int)(Math.random() * 90
javaScript- Math对象
chang_jie_518的博客
05-13 289
Math 对象下定义了许多与数学相关的属性和方法，比如圆周率的常量值，随机数的方法等等11.01 - 常用属性Math.PI：圆周率console.log(Math.PI);// 3.14159265358979311.02 - 常用方法Math.abs()：绝对值 var a = 1,b = -1; Math.abs(a);// 1 Math.abs(b);// 1Math.ceil()：向上取...
软件工程实验--测试用例的设计
terky
04-28 8144
一、实验目的：通过本次实验完成给定题目的程序编码，并掌握运用等价类划分和边界值分析等黑盒测试方法进行测试用例的设计，学会对测试结果进行分析和总结。二、实验环境：计算机，Windows 7操作系统三、实验内容及结果：题目：某程序的功能规格说明如下：输入一个日期（*年*月*日），通过计算输出该日期的前一天日期（比如，输入1999-3-6，则输出1999-3-5）。设所接收的输入日期的有效范围为1900...
使用JavaScript(2)使用Math对象的random() 方法编制-个产生0~ 100之间(含0、100 )的随机整数的函数。...
weixin_42613018的博客
12-28 770
可以使用如下的代码来实现这个功能: function getRandomInt() { return Math.floor(Math.random() * (100 - 0 + 1)) + 0; }
JavaScript——使用Math对象生成0~100的随机数
热门推荐
Melonico的博客
06-23 1万+
1.使用random()方法生成随机小数，范围[0,1) Math.random(); 2.对1的结果乘以100，随机数范围[0,100) Math.random() * 100; 3.使用ceil()方法对2的结果进行向上取整 Math.ceil(Math.random() * 100); 或使用floor()方法进行向下取整，然后结果+1 Math.floor(Math.random() * 100) + 1; 4.输出结果 document.write(Math.ceil(Math.rando
JavaScript程序设计训练 Day3
qq_55786319的博客
04-15 2107
1、编写程序，根据用户输入的数值，计算其平方、平方根和自然对数 <script> var input_num=Number(prompt("请输入一个数字:")); var sqrt_num=Math.sqrt(input_num);//开方 var pow_num=Math.pow(input_num,2);//平方 var log_num=Math.log(input_num);//ln,即e的多少次方等于input_n
JAVA语言Random类的使用，产生随机数，每次随机生成0~100的随机正整数。
a1725583031的博客
02-11 2818
JAVA语言Random类的使用，产生随机数，每次随机生成0~100的随机正整数。
设计程序，单击【随机数】按钮，使用Math对象的random函数产生一个0-100之间（含0-100）的随机整数，并在对话框中显示，如下图。单击【计算】按钮，计算该随机数的平方、平方根和自然对数，保留...
weixin_30929295的博客
03-26 2845
2015-03-2616:55:53 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author...
JAVA之随机数(Math类的random方法和Random类生成的随机数)
蓝莓味的鱼
05-25 971
Math类Math类的random()方法可以生成大于等于0.0、小于1.0的double型随机数。package yu;public class Main { public static void main(String[] args) { //产生一个0~10之间的随机数 System.out.println(Math.random()*10); }}Random类import jav...
5.3.2 js函数小练习 Math.random()生成一个1-100的随机数，让用户、定义函数，圆的半径得到圆的面积、计算最大 最小 平均以及和、整体地址文本框：拼接显示在整体地址、三个下拉框
世上哪有什么岁月静好,不过是有人替你负重前行
12-20 1322
文章目录1 使用Math.random()生成一个1-100的随机数，让用户在文本框中，猜这个值。如果大了就提示猜大了，小了则提示猜小了。直到猜中为止。2 定义函数，实现传入圆的半径得到圆的面积。3 整5个文本框，计算最大 最小 平均以及和，并显示到一个标签中。​ 注意：录入的值必须是数字 点击按钮时判断不能为空必须是数字4 整:4个文本框：省 市 县 详细地址按钮触发：整体地址文本框：拼接显示在整体地址中5 整三个下拉框 一个文本框 onchange：内容改变事件整体地址文本框：拼接显示在
Java实现QuickHit项目：面向对象设计实战——第五章
第五章是关于使用Java实现面向对象编程的实战课程，以Accp6.0为教学框架，主要针对游戏QuickHit进行开发。本章的核心目标是教授学生掌握面向对象设计的基本思想，并通过实际案例应用来提升技能。 首先，课程的重点...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值