11.23 JS基础6
- 对昨天学的常用的数组对象方法回顾加补充
<script>
//concat() 连接两个或更多的数组，并返回结果。
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2);
console.log(arr3);//[1, 2, 3, 4, 5, 6]
// join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
let str = arr1.join(",,,");
console.log(str);// 1,,,2,,,3
// pop() 删除并返回数组的最后一个元素
let a=arr1.pop();
console.log(a);//3
console.log(arr1); //[1, 2]
console.log(arr1.length);//2 注意，这会改变数组的长度
// push() 向数组的末尾添加一个或更多元素，并返回新的长度。
let b=arr2.push(7, 8, 9);
console.log(b);//6 新的长度
console.log(arr2);// [4, 5, 6, 7, 8, 9]
// reverse() 颠倒数组中元素的顺序。
arr2.reverse();
console.log(arr2);//[9, 8, 7, 6, 5, 4]
// sort() 对数组的元素进行排序 是按每个数字的首位数字大小来排序
let arr4 = ["b", "a", "d"];
arr4.sort();
console.log(arr4);// ['a', 'b', 'd']
let arr5=[1,12,3,20,16,89,9];
arr5.sort();
console.log(arr5);// [1, 12, 16, 20, 3, 89, 9]
//排序需要指定一个按照规则排序的函数
function sortby(a,b){
return a-b;//最终的排序结果就是 从小到大
//return b-a;//最终的排序结果就是 从大到小
//返回值小于等于0时，交换两元素的位置，大于0则位置不变
}
arr5.sort(sortby);
console.log(arr5);//[1, 3, 9, 12, 16, 20, 89]
</script>在常用的数组对象方法中，sort()方法的排序远没有我们想象的那么简单，对于多位数数字（字母）的排序都是看首位数字的大小来排序，这样12就会排在2前面，很不合理。
<script>
//大小顺序是乱的
let array01 = [1,0,99,8,12];
//调用排序方法->不是想我们想的那样对数字进行排序
//array01.sort();
//console.log(array01); [0, 1, 12, 8, 99] 按每个数字的首位数字大小来排序
//排序需要指定一个按照规则排序的函数
function sortby(a,b){ //第一轮 a=0 b=1 a在b后面
//return a-b; ->最终的排序结果就是 从小到大
return b-a; //最终的排序结果就是 从大到小
// 返回值小于等于0时，交换两元素的位置，大于0则位置不变
}
array01.sort(sortby);
console.log(array01);
</script>sort()里的内容可留空，也可放函数。我们要运用到arrayObject.sort(sortby)
|
参数 |
描述 |
|
sortby |
可选。规定排序顺序。必须是函数。 |
返回值
对数组的引用。数组在原数组上进行排序，不生成副本。
说明
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
- 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
- 若 a 等于 b，则返回 0。
- 若 a 大于 b，则返回一个大于 0 的值。
- 数组和循环结合的基础练习
给数组赋值并输出：
<script>
let array01 = new Array(5);
//给数组元素赋值
for(let i =0; i<array01.length;i++){
//访问的时候 数组名[索引] = 值
array01[i] = Math.random();
}
//2 用循环来遍历输出
//i =0 表示的是数组的下标
for(let i =0; i<array01.length;i++){
//访问的时候 数组名[索引]
console.log(array01[i]);
}
</script>求数组中最大值：（假设数组中第一个元素值最大）
<script>
let array01 = new Array(5);
//给数组元素赋值
for (let i = 0; i < array01.length; i++) {
//访问的时候 数组名[索引] = 值
array01[i] = Math.floor(Math.random() * 100);
}
//i =0 表示的是数组的下标
for (let i = 0; i < array01.length; i++) {
//访问的时候 数组名[索引]
console.log(array01[i]);
}
//最大值
//1 假设数组第一个元素最大
let max = array01[0];
//用max和剩余的每个元素都比较一下
for (let i = 1; i < array01.length; i++) {
//用max< ?
if (max < array01[i]) {
max = array01[i];
}
}
///输出结果:
console.log("max : " + max);
</script>求数组中最小值：（方法和求最大值差不多）
<script>
let array01 = new Array(5);
//给数组元素赋值,要求数据用户输入进来的.
for(let i =0; i<array01.length;i++){
//弹窗输入
let temp = prompt("请输入第"+(i+1)+"个数字","1");
//访问的时候 数组名[索引] = 值
array01[i] =parseFloat(temp) ;//数据要记得转型
}
//i =0 表示的是数组的下标
for(let i =0; i<array01.length;i++){
//访问的时候 数组名[索引]
console.log(typeof array01[i]);//看看数组元素的类型是字符串还是数字（如果后续要计算那还要转型）
}
//最小值
//1 假设数组第一个元素最小
let min = array01[0];
//用min和剩余的每个元素都比较一下
for(let i =1 ;i< array01.length ; i++){
//用min> ?
if(min > array01[i]){
min = array01[i];
}
}
///输出结果:
console.log("min : " + min);
//页面展示结果
document.write("min : " + min);
</script>
求和和平均值：（知道数组元素的总和和数组元素个数，平均值自然很容易就算出来了）
<script>
let array01 = new Array(5);
//给数组元素赋值,要求数据用户输入进来的.
for (let i = 0; i < array01.length; i++) {
//弹窗输入
let temp = prompt("请输入第" + (i + 1) + "个数字", "1");
//访问的时候 数组名[索引] = 值
array01[i] = temp;
}
//i =0 表示的是数组的下标
for (let i = 0; i < array01.length; i++) {
//访问的时候 数组名[索引]
console.log(array01[i]);
}
let sum = 0;
for (let i = 0; i < array01.length; i++) {
sum = sum + parseFloat(array01[i]);
}
///输出结果:
console.log("sum : " + sum);
//页面展示结果
document.write("sum : " + sum);
document.write(",avg : " + sum / array01.length);//平均值
</script>在浏览器界面上实现图片轮播点击（左右）：
<body>
<img src="imgs/1.jpg" id="moviePic" style="width: 502px; height:377px"><br/>
<button id="btnLeft"> PageUp </button>
<button id="btnRight"> PageDown </button>
<script>
//存储的是要轮播的图片
let arrPic = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"];
//定义一个数字，表示图片集的下标
let i = 0;
document.getElementById("btnLeft").onclick = function () {//左按钮
//定义一个函数，点击按钮触发事件
if (i == 0) {//第一页往左 进入到最后一页
i = arrPic.length - 1;
} else {
i--;
}
document.getElementById("moviePic").src = "imgs/" + arrPic[i];
}
document.getElementById("btnRight").onclick = function () {//右按钮
//定义一个函数，点击按钮触发事件
if (i == arrPic.length - 1) {//最后一页往右 进入到第一页
i = 0;
} else {
i++;
}
document.getElementById("moviePic").src = "imgs/" + arrPic[i];
}
</script>完善（还算是半成品）：（加了按钮样式和定时器）
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.button {
border-radius: 8px;
background-color: lightblue;
}
</style>
</head>
<body>
<img src="imgs/1.jpg" id="moviePic" style="width: 502px; height:377px" onmouseover="func()"><br/>
<button class="button" id="btnLeft"> <</button>
<button id="btn0">-</button>
<button id="btn1">-</button>
<button id="btn2">-</button>
<button id="btn3">-</button>
<button class="button" id="btnRight"> ></button>
<script>
//存储的是要轮播的图片
let arrPic = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"];
//定义一个数字，表示图片集的下标
let i = 0;
document.getElementById("btnLeft").onclick = btnLeft;
//必须要把onclick = function btnLeft()拆分开，不然setInterval定时器没法调用该函数
function btnLeft() {//左按钮
//定义一个函数，点击按钮触发事件
if (i == 0) {//第一页往左 进入到最后一页
i = arrPic.length - 1;
} else {
i--;
}
document.getElementById("moviePic").src = "imgs/" + arrPic[i];
document.getElementById("btn" + i).style.background = "red";
for (let j = 0; j < arrPic.length; j++) {
if (i != j) {//如果是没选择的按钮，背景颜色要和选择了的不一样（即保持不变）
document.getElementById("btn" + j).style.background = "";
}
}
}
document.getElementById("btnRight").onclick = btnRight;
function btnRight() {//右按钮
//定义一个函数，点击按钮触发事件
if (i == arrPic.length - 1) {//最后一页往右 进入到第一页
i = 0;
} else {
i++;
}
document.getElementById("moviePic").src = "imgs/" + arrPic[i];
document.getElementById("btn" + i).style.background = "red";
for (let j = 0; j < arrPic.length; j++) {
if (i != j) {//如果是没选择的按钮，背景颜色要和选择了的不一样（即保持不变）
document.getElementById("btn" + j).style.background = "";
}
}
}
let s = setInterval("btnRight()", 1000);
function func() {
clearInterval(s);
}
</script>
</body>
- 数学函数(Math对象)
Math 对象用于执行数学任务。
使用 Math 的属性和方法的语法：
var pi_value=Math.PI;//数学常识里π 3.1415926...
var sqrt_value=Math.sqrt(15); //取15的平方根 也可以理解为根号15
注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。我们无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
|
对数进行向上取整。 |
|
|
|
对数进行向下取整。 |
|
常见的方法
|
返回 x 和 y 中的最大值。 |
|
|
返回 x 和 y 中的最小值。 |
|
|
返回 x 的 y 次幂。 |
|
|
返回 0 ~ 1 之间的随机数（不包括0和1）。 |
|
|
把数四舍五入为最接近的整数。 |
|
|
返回数的平方根。 |
随机数点名示例：
<script>
console.log(Math.PI);
//
console.log(Math.ceil(12.1));
console.log(Math.floor(12.1));
// for(let i=0;i<10;i++){
// let r = Math.floor(Math.random()*10);
// console.log(r)
// }
let student = ["丁炜鸿", "小辉", "小东", "小林", "小辉2", "小辉3"];
//r其实是随机生成的一个下标
let r = Math.floor(Math.random() * 6);
//要输出这个数组的元素
console.log(student[r]);
</script>数学函数方法练习：
<script>
let a=15.1;
console.log(Math.ceil(a));// 向上取整 16
let b=17.1;
console.log(Math.floor(b));// 向下取整 17
let c=19;
console.log(Math.max(a,b,c));//返回最大值 19
let d=36;
console.log(Math.min(a,b,c,d));//返回最小值 15.1
console.log(Math.pow(c,3));//返回 c 的 3 次方 6859
console.log(Math.random());//返回 0 ~ 1 之间的随机数 不包括0和1
console.log(Math.round(b));//把数四舍五入为最接近的整数。 17
console.log(Math.sqrt(d));//返回d的平方根 6
</script>作业：双色球开奖
<script>
// 红色球号码区由1-33共三十三个号码组成，蓝色球号码区由1-16共十六个号码组成。
// 投注时选择6个红色球号码和1个蓝色球号码组成一注进行单式投注，每注金额人民币2元。
//
// 从1-33随机选择6个，但是要求不能重复。
// 从1-16随机选择1个。
let j = Math.ceil(Math.random() * 16);//0-16取不到16 向上取整后1-16 蓝色球号码
console.log(j);
let arr1 = new Array();
for (let i = 0; i < 6; i++) {
let r = Math.ceil(Math.random() * 33);//0-33取不到33 向上取整后1-33 红色球号码
if (arr1.indexOf(r) == -1) {
arr1.push(r);
} else {
i--;
}
}
console.log(arr1);
document.write("红色球号码为" + arr1 + "，蓝色球号码为" + j);
</script>感想：要勉强说难点的话，数组的sort()方法里的函数看了好一会儿才明白。。还有那个定时器设置，要把函数单独放在setinterval()里，也还行。
（Ps：果然不出我所料，新能源基金昨天涨势大幅超过大盘，今天跑输大盘很多。。）
18:24:10 2021-11-23
posted on 2021-11-23 18:07 heyiyang1312 阅读(8) 评论(0) 收藏 举报
浙公网安备 33010602011771号