JavaScript
一. for循环
1> 利用for循环输出1-100岁
for(let i=1;i<=100;i++){
document.write(i)
document.write('\n')
}
2> 求1-100之间所有偶数的和
let sum=0
for(let i=1;i<=100;i++){
if(i%2===0){
sum+=i
}
}
document.write(sum)
3> 页面中打印4个小星星❤
let star = ''
for (let i = 1; i <= 4; i++) {
star += '*'
}
document.write(star)
4> 请将 数组['马超', '赵云', '张飞', '关羽', '黄忠']依次打印出来
let arr = ['马超', '赵云', '张飞', '关羽', '黄忠']
// document.write([arr])
for (let i = 0; i < arr.length; i++) {
document.write(arr[i])
}
二, 退出循环
例如：
//假设在餐馆吃饭
let arr = ['虾饺', '蒸排骨', '虫子', '红米肠', '糯米鸡']
for (let i = 0; i < arr.length; i++) {
if (arr[i] == '虫子') {
console.log('口区，吃到了虫子耶，我吃不下了');
// 退出循环！
continue //结束本次循环继续下次循环
// break //跳出循环
}
console.log('我成功的吃了' + arr[i]);
}
三, 循环嵌套
1. 循环嵌套记单词
for (let i = 1; i <= 3; i++) {
document.write(`今天第${i}天<br>`)
for (let j = 1; j <= 5; j++) {
document.write(`记住了今天第${j}个单词<br>`)
}
}
四，数组的基本使用
1. 数组遍历
let arr=['李狗蛋','赵铁柱','张翠花']
for (let i = 0; i < arr.length; i++) {
console.log(i,arr[i]);
}
2. 数组求和，平均值
let arr = [2, 6, 1, 7, 4]
let sum = 0
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
sum += arr[i]
}
console.log(`'和为'${sum} ,'平均值为'${sum / arr.length}`);
3. 求数组的最大值
let arr = [100, 1000, 1, 77, 52, 25, 7]
let max=arr[0]
for (let i = 1; i <arr.length; i++) {
if(arr[i]>max){
document.write(`${arr[i]}`)
}
}
4.求数组最大值三元表达式
let arr = [11100, 1000, 1, 77, 522222, 25, 7]
let max = min = arr[0]
for (let i = 1; i < arr.length; i++) {
max = arr[i] > max ? arr[i] : max
min = arr[i] < min ? arr[i] : min
}
document.write(min)
document.write(`<br>`)
document.write(max)
- 操作数组
1. 数组增加元素push
let arr = ['red', 'green']
arr.push ('orange', 'yellow')
console.log(arr);
2. 数组增加元素unshift
let arr = ['red', 'green']
arr.unshift = ('orange', 'pink')
let res = arr.unshift('orange', 'pink')
console.log(arr);
console.log(res); //打印数组长度4
3. 筛选数组案例
// 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
let newarr=[]
let arr=[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
for (let i = 0; i < arr.length; i++) {
if(arr[i]>=10){
newarr.push(arr[i])
}
}
console.log(newarr);
4. 筛选数组去0案例
// 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
let newarr = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] !== 0) {
newarr.push(arr[i])
}
}
console.log(newarr);
- 删除数组元素
arr.pop() 从数组中删除最后一个元素，并返回删除元素的值
let arr = ['李狗蛋', '张翠花', '赵铁柱']
arr.pop()
console.log(arr);
arr.shift() 从数组中删除第一个元素，并返回删除元素的值
let arr = ['李狗蛋', '张翠花', '赵铁柱']
arr.shift()
console.log(arr.shift()); 返回删除的元素
console.log(arr);
arr.splice(起始索引, 删除几个元素) 删除几个元素的值如果不写则代表从起始位置删到最后
并返回删除的数组
let arr = ['李狗蛋', '张翠花', '赵铁柱', '貂蝉', '西施', '王昭君', '杨玉环']
arr.splice(0,2)
console.log(arr.splice(0,2)); 返回删除的元素
console.log(arr);
- 冒泡序列
let arr = [5, 4, 3, 2, 1]
for (let i = 1; i <= arr.length - 1; i++) {
document.write(`第${i}次循环******<br>`)
for (let j = 1; j <= arr.length - i; j++) {
document.write(`第${j}次交换<br>`)
if (arr[j - 1] > arr[j]) {
let temp = arr[j - 1]
arr[j - 1] = arr[i]
arr[i] = temp
}
}
} console.log(arr);
- 数据生成柱状图
//css样式
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
display: flex;
width: 700px;
height: 300px;
border-left: 5px solid #6cf;
border-bottom: 5px solid #6cf;
margin: 200px auto;
justify-content: space-around;
align-items: flex-end;
text-align: center;
}
.box::before {
content: "";
position: absolute;
left: -13px;
top: -25px;
border: 10px solid transparent;
border-bottom: 20px solid #6cf;
}
.box::after {
content: "";
position: absolute;
right: -23px;
bottom: -12px;
border: 10px solid transparent;
border-left: 20px solid #6cf;
}
.box>div {
display: flex;
width: 50px;
background-color: #6cf;
flex-direction: column;
justify-content: space-between;
}
.box div span {
margin-top: -30px;
}
.box div h4 {
margin-bottom: -35px;
width: 70px;
margin-left: -10px;
}
</style>
let data = []
for (let i = 1; i <= 4; i++) {
data.push(+prompt(`请输入第${i}季度的数据`))
}
document.write(`<div class="box">`)
for (let i = 0; i < data.length; i++) {
document.write(`
<div style="height: ${data[i]}px;">
<span>${data[i]}</span>
<h4>第${i+1}季度</h4>
</div>`)
}
