筛选数组案例
<script>
// 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
// 1. 准备一个空数组
let newArr = []
// 2. 创建筛选数组
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
// 循环遍历
for (let i = 0; i < arr.length; i++) {
// 如果遍历的当前项目 大于等于10
if (arr[i] >= 10) {
// 我要把当前项推入到newArr中
newArr.push(arr[i])
}
}
console.log(newArr);
</script>
根据数据生成柱状图案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
</head>
<body>
<!--
<div class="box">
<div style="height: 123px;">
<span>123</span>
<h4>第1季度</h4>
</div>
<div style="height: 300px;">
<span>300</span>
<h4>第2季度</h4>
</div>
<div style="height: 120px;">
<span>120</span>
<h4>第3季度</h4>
</div>
<div style="height: 210px;">
<span>210</span>
<h4>第4季度</h4>
</div>
</div> -->
<script>
// 用户要输入4个季度的数据 生成柱形图
// 用户输入 prompt
// 弹出 4次 -> for循环
// 把数据渲染在页面 生成柱形图 dw
// data里面存储的就是用户输入的四个季度的数据
let data = []
for (let i = 1; i <= 4; i++) {
// 数组追加元素的语法 data.push()
// let temp = +prompt(`请您输入第${i}季度的数据`)
data.push(+prompt(`请您输入第${i}季度的数据`))
}
// console.log(data);
// [100,200,300,400]
// 我们先渲染box的开始标签
document.write(`<div class="box">`)
// 由于中间的柱子有四根 我们希望通过for循环的方式 动态渲染
// 你要几根柱子 用户输入了几个数据决定的 data里面就存着用户输入的数据 我们遍历data数组
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>
`)
}
// 我们再渲染一个box的结束标签
document.write(`</div>`)
</script>
</body>
</html>
冒泡排序案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [5, 4, 3, 2, 1]
for (let i = 1; i <= arr.length - 1; i++) {
document.write(`这是第${i}轮的交换`)
// 内层循环？次 + 当前的轮次 = 数组的长度
// 内层循环？次 = 数组的长度 - 当前的轮次
// 内层循环？次 = arr.length - i
for (let j = 1; j <= arr.length - i; j++) {
// document.write(`<br>我要交换啦<br>`)
if (arr[j - 1] > arr[j]) {
let temp = arr[j - 1]
arr[j - 1] = arr[j]
arr[j] = temp
}
}
document.write(`<br>`)
}
console.log(arr);
// let num1 = 10
// let num2 = 20
// // 还要创建一个临时变量
// let temp = num1
// num1 = num2
// num2 = temp
// console.log(num1, num2);
</script>
</body>
</html>
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 第一题
/* let arr = [5, 8, 9, 2, 1, 5]
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
console.log(sum); */
// 第二题
/* let arr = [4, 9, 5, 20, 3, 11]
let sum = 0
for (let i = 0; i < arr.length; i++) {
if (arr[i] > 5) {
sum += arr[i]
}
}
console.log(sum); */
// 第三题
/* let arr = [15, 19, 21, 33, 18, 24]
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
console.log(sum / arr.length); */
// 第四题
/* let arr = [5, 2, 8, 10, 3, 7]
let newArr = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] % 2 !== 0) {
newArr.push(arr[i])
}
}
console.log(newArr); */
// 第五题
/* let arr = [2, 6, 18, 15, 40]
let sum = 0
for (let i = 0; i < arr.length; i++) {
if (arr[i] % 3 === 0 && arr[i] % 2 === 0) {
sum += arr[i]
}
}
console.log(sum); */
// 第六题
/* let arr = [2, 6, 18, 15, 40]
let newArr = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] % 3 === 0 && arr[i] % 2 === 0) {
newArr.push(arr[i])
}
}
console.log(newArr.length); */
// 第七题
let arr = [12, 0, 88, 190, 0, 31, 0, 0, 99]
let newArr = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] !== 0) {
newArr.push(arr[i])
}
}
console.log(newArr);
</script>
</body>
</html>
