js第n+2天
案例1
需求： 页面中打印出5行5列的恐龙
<script>
//一行五个，重复五次
for (let index = 1; index <= 5; index++) {
for (let index2 = 1; index2 <= 5; index2++) {
document.write('🦖')
}
document.write('<br>')
}
</script>
案例2
打印倒三角形恐龙
<script>
//一行一个，两行两个，三行三个
for (let index = 1; index <= 5; index++) {
for (let index2 = 1; index2 <= index; index2++) {
document.write('🦖')
}
document.write('<br>')
}
</script>
案例3
九九乘法表
<style>
span{
display: inline-block;
width: 100px;
height: 50px;
border: 1px solid #000;
text-align: center;
line-height: 50px;
}
</style>
<script>
//用span标签包起来，修改样式
for (let index = 1; index <= 9; index++) {
for (let index2 = 1; index2 <= index; index2++) {
document.write(`<span>${index2} × ${index} = ${index * index2}</span>`)
}
document.write('<br>')
}
</script>
数组
数组(Array)是一种可以按顺序保存数据的数据类型
语法： let 数组名 = [数据1，数据2，数据3，数据4]
<script>
let str = ['菠萝','香蕉','苹果','榴莲']
</script>
注意点： 每个都有编号，编号是从零开始，菠萝为0，香蕉为1，苹果为2，以此类推 在数组，数据的编号也叫索引或下标 数组可以储存任意类型的数据，列如，布尔，数字，字符串，null等
取值语法： 数组名[下标]
<script>
let str = ['菠萝','香蕉','苹果','榴莲']
str:[0]//菠萝
str:[1]//香蕉
str:[2]//苹果
str:[3]//榴莲
console.log(str)
</script>
数组的长度
语法： 数组名.length 数组长度是从1开始数
选中数组最后一个
<script>
let str = ['菠萝', '香蕉', '苹果', '榴莲']
//数组长度 - 1就是最后一个
console.log(str[str.length - 1])
</script>
新增和修改
<script>
let str = ['菠萝', '香蕉', '苹果', '榴莲']
str[10] = '南瓜'
//如果10这个位置有数组的话就是修改
//此时数组的长度为10+1
//中间没有赋值的数组输出为undefined
console.log(str)
</script>
快速删除数组
<script>
let str = ['菠萝', '香蕉', '苹果', '榴莲']
//数组的长度直接为零
str.length = 0
//或者修改数组为空
str = []
</script>
快速修改
<script>
let str = ['菠萝', '香蕉', '苹果', '榴莲']
//把下标为1修改为南瓜
str[1] = '南瓜'
//因为数组下标只有0，1，2，3，所以str[4]为undefined
console.log(str[4])
</script>
选中前几个
<script>
let str = ['菠萝', '香蕉', '苹果', '榴莲']
//保留几个，数组长度为几
str.length=2
</script>
遍历数组
用循环把数组中每个元素都访问到,一般会用for循环遍历
案例4
需求：求数组 [10，20，30，40，50] 里面所有元素的和以及平均值
<script>
let str = [10,20,30,40,50]
let num = 0
for (let index = 0; index < 5; index++) {
num += str[index]
}
console.log(num)
//总数除于数组的长度
console.log(num / str.length)
</script>
案例5
需求：求数组 [2,6,1,77,52,25,7] 中的最大值
<script>
let str = [2, 6, 1, 77, 52, 25, 7]
//定义一个最大值的变量等于数组中的任意一个
let max = str[0]
for (let index = 0; index < str.length; index++) {
//比较数组的大小，大于的话就继承， 小就跳过
if (max < str[index]) {
max = str[index]
}
}
document.write(max)
</script>
增加数组
数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)
语法： 数组.push(元素1，元素2，.......,元素n)
<script>
//添加在数组末尾
let str = ['菠萝','香蕉','苹果','榴莲']
str.push('哈密瓜','橘子')
console.log(str)
</script>
数组.unshfit() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
语法： 数组.unshift(元素1，元素2，.......,元素n)
<script>
//添加在数组前面
let str = ['菠萝','香蕉','苹果','榴莲']
str.unshift('哈密瓜','橘子')
console.log(str)
</script>
案例6
需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
<script>
let str = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
//声明一个空数组，用来存放
let num = []
for (let index = 0; index < str.length; index++) {
if(str[index] >= 10){
//大于等于10，就添加到 空数组里
num.push(str[index])
}
}
document.write(num)
</script>
</body>
案例7
需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组
<script>
let str = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
let num = []
for (let index = 0; index < str.length; index++) {
if(str[index] !== 0){
num.push(str[index])
}
}
document.write(num)
</script>
删除数组
数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值
语法： 数组.pop()
<script>
//删除数组里末尾的值
let str = ['菠萝', '香蕉', '苹果', '榴莲']
str.pop('榴莲')
console.log(str)
</script>
数组. shift() 方法从数组中删除第一个元素，并返回该元素的值
语法： 数组.shift()
<script>
//删除数组里开始的值
let str = ['菠萝', '香蕉', '苹果', '榴莲']
str.shift('菠萝')
console.log(str)
</script>
</body>
数组. splice() 方法 删除指定元素
语法： 数组.splice(起始位置，删除几个元素，添加元素）
<script>
//
let str = ['菠萝', '香蕉', '苹果', '榴莲']
str.splice(2,1,'芒果')
console.log(str)
</script>
删除元素为0时，在苹果前面加芒果
<script>
//
let str = ['菠萝', '香蕉', '苹果', '榴莲']
str.splice(2,0,'芒果')
console.log(str)
</script>
案例8
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
width: 1000px;
height: 600px;
margin: 100px auto;
display: flex;
justify-content: space-around;
background-color: aqua;
/* 设置侧轴的对齐方式 下对齐 */
align-items: flex-end;
}
li {
width: 100px;
background-color: pink;
position: relative;
}
span {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
}
div {
position: absolute;
width: 100%;
text-align: center;
/* 相对于父元素的高 */
top: 100%;
background-color: red;
}
/* li:nth-child(1) {
height: 100px;
}
li:nth-child(2) {
height: 200px;
}
li:nth-child(3) {
height: 300px;
}
li:nth-child(4) {
height: 400px;
} */
</style>
<script>
// let liHeight = [100,200,300,400];
let liHeight = [];
let liHtml = `<ul>`;
for (let index = 0; index < 4; index++) {
let arr = +prompt(`请输入第${index + 1}个值`)
liHeight.push(arr)
liHtml += `<li style="height:${liHeight[index]}px;"><span>${arr}</span><div>第${index + 1}季度</div></li>`
}
liHtml += `</ul>`;
document.write(liHtml)
</script>
