响应式网页设计之Math对象及数组

最新推荐文章于 2022-12-13 15:14:08 发布

PRINT！

最新推荐文章于 2022-12-13 15:14:08 发布

阅读量738

点赞数 3

分类专栏：响应式网页学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_48592827/article/details/115092382

版权

响应式网页学习笔记专栏收录该内容

20 篇文章 3 订阅

订阅专栏

JavaScript对象编程（二）

一、Math对象
二、数组
三、网页小案例
- 1.题目要求
- 2.源码奉上

补充：文章中所有的代码都是写在html文件中，JS代码需要用< script >< /script >标签包起来。

一、Math对象

1.了解Date对象

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

2.Math对象的属性

Math有很多的属性，但是常用的只有少数几个，例如PI，当我们需要计算圆面积的时候，就可以用Math.PI就可以得到3.1415926…（非常好用）
在这里插入图片描述

3.Math对象的方法

Math对象提供了很多的方法，这里列出了部分常用方法：
在这里插入图片描述
Math对象很大的特点就是不需要new，可以直接调用Math对象的方法，真的是炒鸡nice！！！

那我重点选取一个random函数来分析一下叭
我们通常会使用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;

备注：我没有注释代码中的内容，为了方便查看。

思考：其实还有一个小细节，在之前的方法表中除了floor()向下取整函数，还有一个ceil()向上取整函数，但是为什么我们这里要使用floor()向下取整函数呢？
答：试想一下，如果我们采用ceil()函数，那么0.1、0.2、0.9等，只要是0~1之间的数，只要0才会取整为0，其余都会取整为1，那么相当于就是对0不公平，这里需要捋一捋思路喔。

根据同样的思路，你可以完成，生成50~100的随机整数（包含50和100）吗？
补充：生成任意取值范围内的随机数是有通用公式的喔！

如果你多写几个取值范围就不难发现以下规律：
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刷新一次）；点击停止，暂停随机刷新，显示选中数；
在这里插入图片描述

提示：这个题目运用到了上一个博客《响应式网页设计之Date对象及定时器函数》中所学的知识喔，温故而知新嘛！

【思考片刻之后…two hours later…】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- style标签中的内容是CSS样式 -->
		<style type="text/css">
			*{margin: 0px;padding: 0px;}
			body{
				padding: 10px;
			}
			#numBox{
				width: 400px;
				height: 400px;
				background-color: burlywood;
				text-align: center;
				line-height: 400px;
				margin-top: 20px;
			}
			#resultNum{
				font-size: 200px;
			}
		</style>
	</head>
	<body>
		<!-- html静态页面布局 -->
		<h2 class="title">请输入取值范围</h2>
		<br>
		<input type="number" name="num1" id="num1" value="" />~
		<input type="number" name="num2" id="num2" value="" />
		<button onclick="startRan()">开始</button>
		<button onclick="endRan()">停止</button>
		<div id="numBox">
			<h1 id="resultNum"></h1>
		</div>
		<!-- JavaScript代码如下所示 -->
		<script type="text/javascript">
			// 此函数用于生成随机数 （就是上面的通用函数）
			function randomNum(a,b){
				var max = Math.max(a,b);
				var min = Math.min(a,b);
				return Math.floor(Math.random()*(max-min+1))+min;
			}

			// timer 用于设置定时器函数
			var timer;
			// startRan()函数开始生成随机数，【开始】
			function startRan(){
				var num1 = document.getElementById("num1").value;
				var num2 = document.getElementById("num2").value;
				console.log(typeof(num1))
				if(num1===''||num2==''){  // 如果没有输入范围就点击确定，就会弹出如下警示框
					alert("请输入范围！");
					return;
				}
				var num = randomNum(num1,num2) //生成随机数num
				document.getElementById('resultNum').innerHTML = num  //将随机数写入页面中
				timer = setTimeout(startRan,60) //再次调用startRan()函数，每60ms一次
			}
			
			// 用于清除定时器，【停止】
			function endRan(){
				clearTimeout(timer)
			}	
		</script>
	</body>
</html>

二、数组

1.认识数组

变量可以用来存储数据，但是一个变量只能存储一个内容，这是有局限性的。假设你想存储10个人的姓名或者存储20个人的综合成绩，就需要10个或20个变量来存储，如果需要存储更多数据，那就会变的更麻烦。我们用数组解决问题，一个数组变量可以存放多个数据，一个数组就是一个集体。

数组是多个元素的集合，每个元素都有一个索引值，从0开始，每个索引都有一个相应的元素。在同一个数组中可以存放多种类型的元素；长度可动态调整，可随着数据增加或减少自动对数组长度做更改。

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";
// 赋值时，可对任意下标（超出范围也可）的元素赋值，数组长度会自动调整

3.数组的访问

通过数组的名称和下标直接访问数组元素，下标从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"];

三、网页小案例

1.题目要求

完成待办事项页面，用户依次输入事项后，点击“添加”按钮，将用户输入存入数组并显示
在这里插入图片描述

2.源码奉上

建议先尝试着写一下，自己完成更有成就感喔！
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		*{margin: 0px ;padding: 0px;}
		body{
			padding: 20px;
		}
		h2{
			height: 40px;
		}
		li{
			list-style: none;
			font-size: 50px;
		}
	</style>
	<body>
		<table></table>
		<h2>请输入待办事项：</h2>
		<input type="text" name="event" id="event" value="" />
		<button onclick="addEvent()">添加</button>
		<br>
		<ul id="result"></ul>
		<script type="text/javascript">
			var events = new Array();
			function addEvent(){
				var event = document.getElementById('event').value;
				events.push(event);
				show();
			}
			function show(){
				var html='';
				for(var i=0;i<events.length;i++){
					if(events.length!=0){
						html = html + "<li>"+events[i]+"</li>"
					}
				}
				document.getElementById('result').innerHTML = html
			}
			
		</script>
	</body>
</html>