本文介绍了JavaScript中的for循环、数组遍历、嵌套、99乘法表案例，以及数组的基本操作如查找、修改、新增，还涵盖了冒泡排序的实现和HTML/CSS布局示例。通过实际编程练习，学习者将掌握基本的Web开发技能。
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>客观题
请扫码做客观题
946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
