第六课时 JavaScript对象编程（二）
一、Math对象
Math对象能够进行比基本数学运算更为复杂的运算。
Math对象不需要生成对象的实例，可以直接访问它的属性和方法
Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。
1. Math对象的属性
| 属性名 | 描述 |
|---|---|
| E | 自然对数的底数 |
| LN2 | 2的自然对数 |
| LN10 | 10的自然对数 |
| LOG2E | 以2为底e的对数 |
| LOG10E | 以10为底e的对数 |
| PI | 圆周率 |
| SQRT1_2 | 1/2的平方根 |
2. 使用 Math 的属性/方法的语法：
var x=Math.PI;
var y=Math.sqrt(16);
3. Math对象的常用方法
| 方法 | 说明 | 示例 |
|---|---|---|
| ceil(数值) | 大于等于该数值的最小整数 | Math.ceil(1.1) => 2 |
| floor(数值) | 小于等于该数值的最大整数 | Math.floor(1.9) =>1 |
| min(数值1,数值2) | 最小值 | Math.min(2,1) =>1 |
| max(数值1,数值2) | 最大值 | Math.max(2,1)=>2 |
| pow(数值1, 数值2 | 数值1的数值2次方 | Math.pow(2,10)=>1024 |
| random() | 0到1的随机数[0,1)不包含1 | Math.random()=>0.2263890154 |
| round(数值) | 最接近该数值的整数 | Math.round(0.5)=>1 |
| sqrt(数值) | 开平方根 | Math.sqrt(16)=>4 |
除表格中列出的外，Math还有abs、sin(弧度)、cos、tan、asin、acos、atan、exp、log等函数。下面介绍几个常用函数的用法
- Math.random()
random函数默认的随机数范围是[0,1）,注意！这里的区间是左闭右开，意思是可以取到0~1之间及0的数，但是取不到1。那我们怎么来设置随机数的范围呢？例如：生成1 ~ 100之间的随机整数(包含1和100)
代码如下（示例）：
1、Math.random()生成[0,1)之间的数
2、Math.random()*100之后
范围变化：[0,1) ----> [0,100)
3、要求是整数，那就是用函数Math.floor()向下取整，就可以得到整数：
范围变化：[0,100) ----> [0,99]
4、范围整体+1 即可
范围变化：[0,99] ----> [1,100]
完整代码如下所示：
Math.floor(Math.random()*100)+1;
根据同样的思路，使用random生成50~100的随机整数（包含50和100）
代码如下（示例）：
思路如下：
50~100可转换为0~50的数加50
Math.random()生成[0,1)的数
乘以51得到[0,51)的数
Math.floor()得到[0,50]的整数再加50
综上 我们可以得到如下生成50~100的随机数代码：
Math.floor(Math.random()*51)+50;
通过上面两个例子，思考，当我们想要生成任意范围内的随机数时，是否有一个通用的公式呢？答案是肯定的
我们不难发现以下规律：
1、最小的范围取决于加号+之后的数b
2、最大的范围取决于 *之后的数a 加上 +之后的数b 减去 1
代码如下所示：
function randomNum(num1, num2) {
var min = Math.min(num1, num2);
var max = Math.max(num1, num2);
//min = b
//max = a+b-1
var a = max - min + 1
return Math.floor(Math.random() * a) + b
}
4.小测试
输入两个任意数字，点击开始，在页面随机显示两个数字之间的随机数（60ms刷新一次）；点击停止，暂停随机刷新，显示选中数；
效果图：
这是怎么实现的呢？
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>请输入取值范围:</P>
<input type="text" name="num1" id="num1" value="" />~
<input type="text" name="num2" id="num2" value="" />
<input type="button" name="" id="" value="开始" onclick="start()"/>
<input type="button" name="" id="" value="停止" onclick="stop()" />
<h1 id="show"></h1>
<script>
var t;
function randNum(num1,num2){
var max = Math.max(num1,num2);
var min = Math.min(num1,num2);
return Math.floor(Math.random()*(max-min+1))+min;
}
function start(){
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
document.getElementById("show").innerHTML=randNum(num1,num2)
t=setTimeout(start,60);
}
function stop(){
clearTimeout(t);
}
</script>
</body>
</html>
二、数组
1.什么是数组
数组对象是使用单独的变量名来存储一系列的值。如果你有一组数据（例如：车名字），存在单独变量如下所示：
var car1=“Saab”;
var car2=“Volvo”;
var car3=“BMW”;
然而，如果你想从中找出某一辆车？并且不是3辆，而是300辆呢？这将不是一件容易的事！
最好的方法就是用数组。数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。
2.数组的创建
- 无参创建
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";
javasc中的数组有一个特点：赋值时，可对任意下标（超出范围也可）的元素赋值，数组长度会自动调整
2.数组访问
通过数组的名称和下标直接访问数组元素，下标从0开始，格式为：
数组[下标]
未赋值的元素也可访问，但返回为undefined
数组的长度属性length
var arr = ["red", "yellow", "blue", "green"];
arr.length; //4
//未赋值的元素也可访问，但返回为undefined
var arr = [];
arr[100]="red"
arr.length;
数组的遍历
- 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]);
}
小测试：遍历并输出数组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"
- 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"];
三、本节案例
题目：完成待办事项页面，用户依次输入事项后，点击“添加”按钮，将用户输入存入数组并显示
运行效果，直接上图：
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>请输入待办事项：</p>
<input type="text" name="input1" id="input1" value="" />
<input type="button" name="add" id="add" value="添加" onclick="add_things()"/>
<ol id="list"></ol>
<script type="text/javascript">
var arr = [];
var txt = "";
var count=0;
function add_things(){
arr.push(document.getElementById("input1").value);
txt += "<li>"+arr[count]+"</li>";
document.getElementById("list").innerHTML=txt;
count++;
}
</script>
</body>
</html>
1285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
