学习教程：黑马程序员视频链接
循环
案例-九九乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
display: inline-block;
width: 100px;
padding: 5px 10px;
border: 1px solid black;
margin: 2px;
text-align: center;
}
</style>
</head>
<body>
<script>
// let row = +prompt('row:');
// // let col = +prompt('col:');
// for(let i = 1;i <= row;i++) {
// for(let j = 1;j <= i;j++) {
// document.write('⭐');
// }
// document.write('<br>');
// }
for(let i = 1;i <= 9;i++) {
for(let j = 1;j <= i;j++) {
document.write(`<span>${i} * ${j} = ${i*j}</span>`);
// if(j < i) {
// document.write(', ');
// }
}
document.write('<br>');
}
</script>
</body>
</html>
数组
增删改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [1,2,3];
// 增
arr.push(4,5,6,);
console.log(arr);
arr.unshift(-1,0);
console.log(arr);
// 筛选数组
let newArr = [];
let j = 0;
for(let i = 0;i < arr.length;i++) {
if(arr[i] > 2) {
// newArr[j] = arr[i];
// j++;
newArr.push(arr[i]);
}
}
console.log(newArr);
// 删除数组
console.log(arr.pop());
console.log(arr.shift());
// 从索引号开始全部删除
arr.splice(2);
// 从索引号开始删除n个
arr.splice(2,3);
console.log(arr);
</script>
</body>
</html>
案例-柱状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 800px;
height: 300px;
border-left: 1px solid black;
border-bottom: 1px solid black;
margin: 50px auto;
justify-content: space-around;
align-items: flex-end;
text-align: center;
}
.box>div {
display: flex;
width: 50px;
background-color: red;
flex-direction: column;
justify-content: space-between;
}
.box div span {
margin-top: -20px;
}
.box div h4 {
margin-bottom: -20px;
}
</style>
</head>
<body>
<!-- <div style="height: 200px;">
<span>200</span>
<h4>season</h4>
</div>
<div style="height: 200px;">
<span>200</span>
<h4>season</h4>
</div> -->
<script>
document.write('<div class="box">');
let height = [];
for(let i = 1;i < 5;i++) {
height.push(prompt(`number ${i} :`));
document.write(`
<div style="height: ${height[i - 1]}px;">
<span>${height[i - 1]}</span>
<h4>season${i}</h4>
</div>`)
}
document.write('</div>');
</script>
</body>
</html>
冒泡排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [2,4,5,6,22,9,10,111,2,1,32];
for(let i = 0;i < arr.length - 1;i++) {
for(let j = 0;j < arr.length - i - 1;j++) {
let tmp = 0;
if(arr[j] > arr[j + 1]) {
tmp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = tmp;
}
}
}
console.log(arr);
</script>
</body>
</html>