第六讲 JavaScript对象编程（二）

最新推荐文章于 2023-10-12 17:11:07 发布

鵼鷡

最新推荐文章于 2023-10-12 17:11:07 发布

阅读量448

点赞数 1

文章标签： javascript js

本文链接：https://blog.csdn.net/llXlI/article/details/115169260

版权

系列课程目录

第六讲 JavaScript对象编程（二）

前言

JavaScript的Math对象与数组

提示：以下是本篇文章正文内容，下面案例可供参考

一、Math对象

1.Math对象的属性

Math对象能够进行比基本数学运算更为复杂的运算。
Math对象不需要生成对象的实例，可以直接访问它的属性和方法

在这里插入图片描述
例如求圆的面积：

var r = 2;  
var s = r*r*Math.PI;

2.Math对象常用方法

在这里插入图片描述

Math.random()

Math.random()可以生成[0,1)的数，注意取值范围，左闭右开，而根据这个方法我们就可以写出任意范围内的随机数代码。

练习1：生成1~100的随机整数(包含1和100)

思路：Math.random()生成[0,1)的数，然后乘以100可以得到【0，100）范围的随机数，用Mathfloor()方法可以得到【0，99】范围的随机数，再加1就可以得到最终需要的【1，100】范围内的随机数。

Math.floor(Math.random()*100)+1;

练习2：生成50~100的随机整数（包含50和100）

思路：50~ 100可转换为0~ 50的数加50
Math.random()生成[0,1)的数，然后乘以51可以得到【0，51）范围的随机数，用Mathfloor()方法可以得到【0，50】范围的随机数，再加50就可以得到最终需要的【50，100】范围内的随机数。

Math.floor(Math.random()*51)+50;

经过两个小练习，你是不是已经发现了一些规律，如果我们想要一个a到b范围的随机数，那么就可以用一个通用公式。

function randomNum(num1, num2) {  
    var max = Math.max(num1, num2);  
    var min = Math.min(num1, num2);  
    return Math.floor(Math.random() * (max - min + 1)) + min  
}

练习：输入两个任意数字，点击开始，在页面随机显示两个数字之间的随机数（60ms刷新一次）；
点击停止，暂停随机刷新，显示选中数；
提示：要用之前第五讲的知识点。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		请输入取值范围：
		<input type="text" name="" id="a" value="" />
		~
		<input type="text" name="" id="b" value="" />
		<input type="button" id="start" name="" value="开始" onclick="st()" />
		<input type="button" id="stop" name="" value="停止" onclick="tz()"/>
		<h1 id="vl"></h1>
		
		<script type="text/javascript">
			function rd(a,b){
				min=Math.min(a,b)
				max=Math.max(a,b)
				return Math.floor(Math.random()*(max-min+1))+min;
			}
			
			function st(){
				document.getElementById("vl").innerHTML=rd(document.getElementById("a").value,document.getElementById("b").value);
				fh=setTimeout(st,60);
			}
			function tz(){
				clearTimeout(fh);
			}
		</script>
	</body>
</html>

二、数组

1.创建数组

在同一个数组中可以存放多种类型的元素；
长度可动态调整，可随着数据增加或减少自动对数组长度做更改;

无参创建

var arr = new Array();  
var arr = [];

带初值创建

var arr = new Array("red","yellow");  
var arr = ["red","yellow"];

指定初始函数创建

var arr = new Array(5);

赋值

arr[0] = "red";  
arr[100]= "yellow";
//赋值时，可对任意下标（超出范围也可）的元素赋值，数组长度会自动调整

2. 数组的访问

通过数组的名称和下标直接访问数组元素，下标从0开始，格式为数组[下标]
未赋值的元素也可访问，但返回为undefined

数组的长度属性length

var arr = ["red", "yellow", "blue", "green"];  
arr.length; //4

遍历数组

//for循环
var arr = ["red", "yellow", "blue", "green"];  
for (var i = 0; i < arr.length; i++) {  
    console.log(arr[i]);  
}

//for in循环
var arr = ["red", "yellow", "blue", "green"];  
for (var i in arr) {  
    console.log(arr[i]);  
}

练习3：遍历并输出数组var arr = [“red”, “yellow”, “blue”, “green”]; 使用 < ul > < li > 标签输出
在这里插入图片描述

<ul id="list">  
</ul>  
<script>  
    var list=["red", "yellow", "blue", "green"];   
    var txt = "";  
    for(var i in list){  
        txt += "<li>"+list[i]+"</li>";  
    }  
    document.getElementById("list").innerHTML=txt; 
</script>

3.pop()

从数组中删除最后一个元素并返回被删除的值

var fruits = ["Banana", "Orange", "Apple", "Mango"];  
var x = fruits.pop();//fruits的值是["Banana", "Orange", "Apple"]; x的值是"Mango"

4.push()

向数组的末尾添加一个或更多元素并返回数组长度

var fruits = ["Banana", "Orange"];  
var x =  fruits.push("Apple");//fruits的值是["Banana", "Orange", "Apple"]; x的值是3

可以添加多个元素

var fruits = ["Banana", "Orange"];  
fruits.push("Apple","Mango");//fruits的值是["Banana", "Orange", "Apple","Mango"];

三、课堂作业

1.按照要求完成任务

如下（示例）：

在这里插入图片描述

2.解析代码

任务6-2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var arr = [];
			var text="";
			function tj() {
				arr.push(document.getElementById("vl").value)
					text+="<h1>"+arr[arr.length-1]+"</h1>"
				document.getElementById("zhi").innerHTML=text
			}
		</script>
		请输入待办事项
		<input type="text" name="" id="vl" value="" />
		<input type="button" name="" id="tj" value="添加" onclick="tj()" />
<div id="zhi">
	
</div>
		
	</body>
</html>

总结

在这里插入图片描述

鵼鷡

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
第六讲 JavaScript对象编程（二）

系列课程目录第五讲 JavaScript对象编程（一）目录系列课程目录前言一、Math对象1.Math对象的属性2.Date对象常用方法二、数组1.setTimeout()2. setTimeout()实现周期执行3.setInterval()4.清除定时器练习：动态刷新显示时间三、课堂作业1.按照要求完成任务2.解析代码总结前言JavaScript的Date对象与计时器函数提示：以下是本篇文章正文内容，下面案例可供参考一、Math对象1.Math对象的属性Math对象能够进行比
复制链接

扫一扫