3.1 for循环以及案例
3.2 遍历数组
false undefined
3.3 退出循环
3.4 循环嵌套
3.5 循环嵌套大练习
3.6 99乘法表案例
css
3.7 数组的基本使用以及案例
3.8 求数组最大值和最小值
三元表达式
3.9 数组操作-修改
3.10 数组操作-新增
3.11 数组筛选案例
3.12 数组操作-删除
3.13 综合案例-宣染柱形图案例上
<!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 {
display: flex;
width: 700px;
height: 300px;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
margin: 50px auto;
justify-content: space-around;
align-items: flex-end;
text-align: center;
}
.box>div {
display: flex;
width: 50px;
background-color: pink;
flex-direction: column;
justify-content: space-between;
}
.box div span {
margin-top: -20px;
}
.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: 156px;">
<span>156</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>
</script>
</body>
</html>
3.14 综合案例-渲染柱形图案例下
3.15 了解冒泡排序和作业安排
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/bootstrap.css" rel="stylesheet">
<style>
<style>#mid-data ul {
list-style: none;
padding-left: 0;
}
#mid-data ul li {
display: inline-block;
padding: 2px 4px;
margin: 2px;
border: 1px solid #000;
}
#myList {
list-style: none;
padding-left: 0;
font-size: 20px;
}
#myList li {
display: inline-block;
padding: 6px 10px;
margin: 4px;
border: 2px solid #000;
}
#myList .active {
border: 2px solid #ff0000;
}
</style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>冒泡排序动画演示</h2>
<div class="well">
<h4>摘要</h4>
<p>
冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">过程演示</h2>
<ul id="myList">
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
<button type="button" class="btn btn-primary btn-lg" id="start-btn">开始演示</button>
<button type="button" class="btn btn-primary btn-lg" id="pause-btn">暂停演示</button>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">中间数据</h2>
<div id="mid-data">
</div>
</div>
</div>
<div class="row">
<div class="alert alert-info" role="alert">提示:刷新页面,可重新进行排序。</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.swap.js"></script>
<script>
$(function() {
var $lis = $("#myList li");
var count = $lis.length;
var current = 0;
var next = 1;
var times = 0;
var interval;
function setCss() {
$lis.removeClass("active");
$($lis[current]).addClass("active");
$($lis[next]).addClass("active");
}
function exchange() {
$lis = $("#myList li");
var v1 = $($lis[current]).text();
var v2 = $($lis[next]).text();
if (parseInt(v1) > parseInt(v2)) {
$lis.swap(current, next);
return true;
}
return false;
}
function drawData() {
if (times === 0) {
return;
}
$lis = $("#myList li");
var str = "第" + times + "趟:<ul>";
str += $("#myList").html();
str += "</ul>";
$("#mid-data").append(str);
}
function go() {
setCss();
interval = setInterval(function() {
if (isPause) {
return;
}
if (times < count - 1) {
var change = exchange();
if (!change) {
current++;
next++;
if (current == count - 1 - times) {
times++;
current = 0;
next = 1;
drawData();
}
setCss();
}
} else {
$lis.removeClass("active");
clearInterval(interval);
}
}, 1000);
}
$("#start-btn").click(function() {
isPause = false;
if (!interval) {
drawData();
go();
}
});
var isPause = false;
$('#pause-btn').click(function() {
isPause = true;
})
});
</script>
</body>
</html>
3.16 作业
主观题
练习题1:
写一个程序,要求如下(★★)
- 需求1:让用户输入五个有效年龄(0-100之间),放入数组中
-
- 必须输入五个有效年龄年龄,如果是无效年龄,则不能放入数组中
- 需求2:打印出所有成年人的年龄 (数组筛选)
- 需求3:打印出所有人总年龄 (累加)
- 需求4:打印出所有人的平均年龄 (累加)
- 需求5:打印出最大年龄和最小年龄 (最大值)
练习题2:
找出数组中 元素为10的下标,有则打印该下标,没有则打印-1
- 例如: [88,20,10,100,50] 打印 2
- 例如: [88,20,30,100,50] 打印-1
练习题3:
使用for循环 - 求出数组元素的和 [5, 8, 9, 2, 1, 5]
练习题4:
使用for循环 - 求出数组里大于5的i和 [4, 9, 5, 20, 3, 11]
练习题5:
使用for循环 - 求出班级里同学们平均年龄[15, 19, 21, 33, 18, 24]
练习题6:
计算[2, 6, 18, 15, 40] 中能被3整除的偶数的和
练习题7:
计算[2, 6, 18, 15, 40] 中能被3整除的偶数的个数
练习题8:
给一个数字数组,该数组中有很多数字0,将不为0的数据存入到一个新的数组中
核心练习题
需求:
根据用户输入的个数,页面可以渲染对应王者荣耀永雄的个数
效果如下:
思路分析:
- 渲染图片比较多,我们可以把图片地址放入数组中,
- 图片名称是有序号排列的,比如1.webp 2.webp 此处可以使用循环方式重复渲染图片
- 渲染位置? 可以考虑放到 box盒子里写script 即可
排错题
拍错题1
<body>
<!-- 请问以下代码会出现什么问题,如何解决? -->
<script>
// 需求: 求 1~100之间的累加和
// 注意: 此处有3个错误,找出并且修正
let sum
for (let i = 1; i < 100; i++;) {
sum += i
}
console.log(sum)
</script>
</body>
排错题2
<!-- bug:请你找到下面代码的bug,把数字1打印出来 -->
<body>
<script>
let sum = 0
let arr = [1, 2, 3, 4, 5]
for (let i = 1; i < arr.length; i++) {
console.log(arr[i])
}
</script>
</body>
排错题3
<!-- bug:找到下面代码死循环的原因,并修改为正确的代码 -->
<body>
<script>
for (let i = 1; i <= 5; i++) {
for (let j = 1; j <= 5; i++) {
console.log(`这是双重for循环`);
}
}
</script>
</body>
客观题
请扫码做客观题