01-动态生成商品信息
效果
用到的技术
- 弹出的输入框
prompt - 网页中输出字符串标签
document.write - 用到了反引号中输出变量的
${num} - 简单的html+css （表格）
思路
最终代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>01-动态生成商品信息.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
table {
width: 600px;
margin: 50px auto;
border-collapse: collapse;
text-align: center;
}
</style>
</head>
<body>
<script>
/*
需求：
1 弹出了四个输入框
2 最终就在页面上 显示出来了表格
*/
let phone = prompt('请输入商品的名称');
let price = prompt('请输入商品的单价');
let num = prompt('请输入商品的数量');
let totalPrice = price * num; // 自己根据输入的单价和数量去计算总价
let address = prompt('请输入收货地址');
// 把标签字符串也输入出到网页中
// 使用单双引号 写字符串不能换行 所以建议生成标签的字符串 要使用反引号
// 反引号里面 想要使用 外面的变量 语法 ${变量名称}
document.write(`
<table border="1">
<thead>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>${phone}</td>
<td>${price}元</td>
<td>${num}</td>
<td>${price * num}元</td>
<td>${address}</td>
</tr>
</tbody>
</table>
`);
</script>
</body>
</html>
02-时间补0案例
需求
- 弹出输入框 允许用户输入时间 11 或者 9
- 接收到这个时间后，做判断
- 如果 时间 大于 10 原样输出
- 如果 时间 小于 0 补0 之后再输出 （数字格式 前面补0 没有意义）
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>02-时间补0案例.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
1 弹出输入框 允许用户输入时间 11 或者 9
2 接收到这个时间后，做判断
如果 时间 大于 10 原样输出
如果 时间 小于 0 补0 之后再输出 （数字格式 前面补0 没有意义）
*/
let time = prompt('请输入时间');
if (time < 10) {
time = '0' + time;
}
console.log(time);
</script>
</body>
</html>
03-代码调试
04-while循环计算总和和偶数和
循环的三要素
-
初始值
-
判断条件
-
初始化变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>04-while-1-100总和.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
需求： 1-100 的和
分析：
1 1-100 数字 刚好可以是我们的循环 1-2-3-4-100
2 根据while的语法 写出循环的条件即可
定义一个变量 index=1; 如果index <=100的话 继续循环 否则就不循环 循环中 index++
循环的三要素
1 初始值
2 判断条件
3 初始化变化
*/
// let index = 1;
// // 菜篮子一样
// // 循环一次，就把这一次的鸡蛋装到 篮子中
// let sum = 0;
// while (index <= 100) {
// // 继续装鸡蛋
// sum = sum + index;
// index++;
// }
// console.log(sum);
let index = 1;
// 菜篮子一样
// 循环一次，先判断这次的鸡蛋是不是偶数，就把这一次的鸡蛋装到 篮子中
let sum = 0;
while (index <= 100) {
// 判断这次鸡蛋是不是偶数
if (index % 2 === 0) {
// 偶数
// 继续装鸡蛋
sum = sum + index;
}
index++;
}
console.log(sum);
</script>
</body>
</html>
05-while-说爱我案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>11-while-说爱我案例.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
需求：
1 一直在弹输入框
2 无论我们输入什么 都继续弹窗
3 直到我们输入了 爱 才结束
4 分析
一直弹窗 循环 三要素
1 初始值
2 循环条件 用户的输入 字 "爱"
3 初始值变化
*/
// let answer=prompt("你爱不爱我");一直弹窗
let answer;
while (answer !== '爱') {
answer = prompt('你爱不爱我');
}
</script>
</body>
</html>
6-ATM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>6-ATM.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
需求分析：
1 一直在弹出窗口 （要使用循环把弹窗装进去）
2 循环三要素
1 起始值
2 循环的条件 如果用户的输入不是4 就继续弹窗
3 起始值 发生变化
3 代码比较多 容易忽略 隐式转换
1 存款
弹出一个输入框 允许用户的一个输入 存款的金额
2 取款
弹出一个输入框 允许用户的一个输入 取款的金额
3 查看余额
输入出金额即可
4 退出
*/
let input; // 用户输入输入框的数字
let money = 0;// undefined+=1
while (input !== 4) {
// "4" !== 4
input = +prompt(`
1 存款
2 取款
3 查看余额
4 退出
`);
// 根据不同的输入 执行不同的结果
if (input === 1) {
let num = +prompt("请输入存款的金额");
money+=num;
alert(money);
} else if (input === 2) {
let num = +prompt("请输入取款的金额");
money-=num;
alert(money);
} else if (input === 3) {
alert(money);
}
}
</script>
</body>
</html>
07-for-1-100偶数和
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>07-for-1-100偶数和.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
熟悉 for循环的语法
for(初始值;循环条件;初始值变化){
// 满足条件了 执行里面的代码
}
*/
let sum = 0; // 给初始值为0 否则就是undefined
for (let index = 1; index <= 100; index++) {
// 要偶数和
if (index % 2 === 0) {
sum += index; // 偶数和
}
}
console.log(sum);
</script>
</body>
</html>
08-N天背M个单词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>08-N天背M个单词.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
如果发现要使用到 两层循环
分析 循环分别是干什么
N天背M个单词
1 两个变量 => 弹输入框来进行输入
2 分析N天 和 M个单词联系
根据N的大小来循环N次 输出 第，。。天
根据M的大小来循环M次，输出 记住。。个单词
*/
let n = +prompt('请输入天数');
let m = +prompt('请输入要背单词的个数');
for (let index = 1; index <= n; index++) {
document.write(`第${index}天`);
// 换行
document.write('<br/>');
// 把背单词的动作 放到每一天中都来执行
for (let index = 1; index <= m; index++) {
document.write(`记住第个${index}单词`);
// 换行
document.write('<br/>');
}
}
</script>
</body>
</html>
09-数组-求和
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>09-数组-求和</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
数组的基本使用
1 语法 let arr =[元素1，元素2，元素3]; 希望类型统一
2 想要访问数组中的元素 可以下标来访问，下标的开始 是 从0 开始
arr[0] 元素 1
arr[1] 元素 2
arr[2] 元素 3
arr[3] 3 超出下标的范围了 输出 undefined
arr[ arr.length ] 超出下标的范围了 输出 undefined
arr[ arr.length -1 ] 获取最后一个元素
3 数组 经常和循环搭配来使用
*/
// 数组求和
let arr = [1, 2, 3, 4];
// 数组里面所有的元素 加起来 一共是多少
// arr[0]+arr[1]+arr[2]+arr[3]
// 变量 总和
let sum = 0;
for (let index = 0; index < arr.length; index++) {
sum += arr[index];
}
console.log(sum);
</script>
</body>
</html>
10-数组求最大值和最小值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>10-数组-最大值和最小值.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
数组求最大值 分析
1 数组 arr =[ 3,5,88,2]
2 先定一个额外变量 存放 最大值 max = arr[0] 假设最大值 是 数组中的第0个元素
3 思路 拿 max 和 数组其他元素比较，
如果发现 数组其他元素比max大，让 max = 当前数组元素
*/
let arr = [3, 5, 88, 2];
let max = arr[0];
for (let index = 0; index < arr.length; index++) {
if (arr[index] > max) {
max = arr[index];
}
}
let min = arr[0]; // 如果你比我小 我就等于你
for (let index = 0; index < arr.length; index++) {
if (arr[index] < min) {
min = arr[index];
}
}
// console.log(max);
console.log(min);
</script>
</body>
</html>
11-动态生成柱子
思路
-
先写好静态结构
-
通过循环来接收用户的输入，存放起来 变成一个数组（存放的柱子的高）
-
通过 遍历上一个数组，动态的生成li标签以及它对应的子元素（p，div 第几季度的数据）
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>11-动态生成柱子.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
width: 800px;
height: 600px;
background-color: aqua;
margin: 50px auto;
display: flex;
align-items: flex-end;
justify-content: space-around;
}
li {
width: 80px;
/* height: 300px; */
background-color: pink;
position: relative;
}
p {
/* position: absolute; */
/* 块级元素加上定位的之后 宽度变成内容撑开 */
/* width: 100%; */
/* p标签往上移动自身的高度 */
/* translate的百分比是相对于自身的宽度和高度 */
transform: translateY(-100%);
text-align: center;
}
div {
text-align: center;
position: absolute;
width: 100%;
left: 0;
top: 100%;
}
</style>
</head>
<body>
<script>
// 1 定义一个数组 存放四个元素 代表这四个柱子的高度
// let arrHeight = [150, 250, 350, 450];
let arrHeight = [];
// 循环了 接收用户的四次输入
for (let index = 0; index < 4; index++) {
arrHeight.push(prompt(`请输入第${index + 1}个柱子的高度`)); // 给数组添加一个元素
}
// 2 遍历生成4个柱子（document.write）
// 拼接ul的头
let html = ` <ul> `;
for (let index = 0; index < arrHeight.length; index++) {
// 遍历生成li标签
// 动态设置li标签的高度 = 行内
html += ` <li style="height:${arrHeight[index]}px" >
<p>${arrHeight[index]}</p>
<div>第${index + 1}季度</div>
</li> `;
}
// 拼接ul的结尾
html += `</ul> `;
document.write(html);
</script>
</body>
</html>
12-随机显示名字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>12-随机显示将军的姓名.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
需求
页面一刷新了 显示出来 某一位将军的名称 （随机）
分析：
1 定义一个将军数组
2 根据数组的长度 来生成一个随机数 （区间 0 - 数组长度-1 ）
Math.random() 返回 0-0.999 随机数 包含 0 不包含1
*/
let names = [
'赵云',
'黄忠',
'关羽',
'张飞',
'马超',
'刘备',
'曹操',
'刘婵',
];
// let names = [ '赵云', '黄忠', '关羽' ]; // 0 1 2
// 生成随机数 随机整数
// Math.random() 0 ~ 1 小数
// Math.random() * 2 0 ~ 2 小数
// Math.round( Math.random() * 2 ) 四舍五入
let index = Math.round(Math.random() * (names.length - 1));
document.write(names[index]);
</script>
</body>
</html>
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>
</head>
<body>
<img src="" alt="">
<script>
/*
需求
页面一刷新 随机显示一张图片
分析
1 图片显示
2 设置图片的src 属性
3 src图片地址不能写死 要随机01~22 1-22
1 先算出来 1-22 随机整数
Math.round(Math.random()*(max-min)+,min)
*/
let img = document.querySelector('img')
// img.src='./images/9.5/01.jpg'
let index = Math.round(Math.random()*(22-1)+1)
// 小于10 补0
index=index<10?'0'+index:index
img.src=`./images/9.5/${index}.jpg`
</script>
</body>
</html>
14-随机显示颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>15-随机演示颜色.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
分析：
如何让随机数和颜色产生关联 颜色 格式 rgb(0-255,0-255,0-255)
Math.round(Math.random()*(255-0)+0)
*/
setInterval(function () {
let color1 = Math.round(Math.random() * 255);
let color2 = Math.round(Math.random() * 255);
let color3 = Math.round(Math.random() * 255);
document.body.style.backgroundColor = `rgb(${color1},${color2},${color3})`; // 写死一个颜色看有没有效果
}, 100);
</script>
</body>
</html>
15-随机显示背景图片
<!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>
<!-- <img src="" alt=""> -->
<script>
/*
需求
页面一刷新 随机显示一张图片
分析
1 图片显示
2 设置图片的src 属性
3 src图片地址不能写死 要随机01~22 1-22
1 先算出来 1-22 随机整数
Math.round(Math.random()*(max-min)+,min)
*/
let img = document.querySelector('img')
// img.src='./images/9.5/01.jpg'
let index = Math.round(Math.random()*(22-1)+1)
// 小于10 补0
index=index<10?'0'+index:index
document.body.style.backgroundImage=`url(http://md.zbztb.cn/uploads/35793393688/${index}.jpg)`
// 不平铺
// document.body.style.backgroundRepeat='no-repeat'
</script>
</body>
</html>
16-函数的补充说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>17-函数.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
函数
1 作用
1 封装代码 达到同样功能代码 复用
2 拆分程序 让我们的代码 更加具备阅读性 方便后期程序的维护
2 语法
1 声明函数
1 function 函数名称() {}
2 let 函数名称 = function(){}
2 使用函数
函数名称(); // 调用
3 可以传递参数
4 返回值
一些工具的函数 希望可以把处理后的结果 返回给调用该函数的人 让这个人自己来决定如何处理返回结果
*/
// function show() {
// // 打印一下 你好
// console.log('你好');
// }
// let show = function(){
// console.log("你也好");
// }
// show();
// show();
// show();
// show();
// show();
// msg 形式上的参数 => 形参 的名字 可以自定义的 语义
// function show(msg) {
// console.log(msg); // msg = 什么值 我就输出什么
// }
// show("你好");
// show("你也好");
// ---------------------------------------------
// 返回一定区间的随机整数
function getRandom(max, min) {
return Math.round(Math.random() * (max - min) + min);
}
// 只要想获取一下随机数
let random1 = getRandom(10, 1);
let random2 = getRandom(100, 50);
// 计算两个随机数的和
let sum1 = random1 + random2;
let sum2 = random1 - random2;
console.log(sum1);
console.log(sum2);
</script>
</body>
</html>
17-复习-数组-for-动态拼接html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>18-商品全选-用到技术.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- <ul></ul> -->
<table>
<thead>
<tr>
<th><input type="checkbox" id="" /> 全选</th>
<th>商品名称</th>
<th>商家</th>
<th>价格</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
// let ul = document.querySelector('ul');
// 1 数组
// let arr = [
// { name: '小米手机', Business: '小米', price: 1999 },
// { name: '小米净水器', Business: '小米', price: 4999 },
// { name: '小米电视', Business: '小米', price: 5999 },
// ];
// 2 循环
// let html = ``;
// for (let index = 0; index < arr.length; index++) {
// html += `
// <li>
// 商品名称：${arr[index].name} 商品商家：${arr[index].Business} 价格： ${arr[index].price}
// </li>
// `;
// }
// 3 把生成的li标签插入到ul中
// ul.innerHTML = html;
/* === 拼接成 表格 */
let tbody = document.querySelector('tbody');
let arr = [
{ name: '小米手机', Business: '小米', price: 1999 },
{ name: '小米净水器', Business: '小米', price: 4999 },
{ name: '小米电视', Business: '小米', price: 5999 },
];
let html = ``;
for (let index = 0; index < arr.length; index++) {
html += `
<tr>
<td><input type="checkbox" id=""></td>
<td>${arr[index].name}</td>
<td>${arr[index].Business}</td>
<td>${arr[index].price}</td>
</tr>
`;
}
// console.log(html);
tbody.innerHTML = html;
</script>
</body>
</html>
18-商品-全选-点击事件-checked
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>19-商品全选-点击时间-checked.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<ul>
<li>
<input type="checkbox" class="chk" />
</li>
<li>
<input type="checkbox" class="chk" />
</li>
<li>
<input type="checkbox" class="chk" />
</li>
</ul>
<button id="btnAll">设置全选</button>
<button id="btnUnAll">取消选中</button>
<h2>判断商品是否都选中</h2>
<input type="checkbox" id="allChk" /> 商品都勾选上了
<script>
let btnAll = document.querySelector('#btnAll');
let btnUnAll = document.querySelector('#btnUnAll');
let allChk = document.querySelector('#allChk');
// 获取复选框数组
let chkList = document.querySelectorAll('.chk');
// 点击 按钮的设置全选
btnAll.addEventListener('click', function () {
// 获取第一个 复选框
// let chk = document.querySelector('.chk');
// 设置复选框 选中
// chk.checked = true;
for (let index = 0; index < chkList.length; index++) {
chkList[index].checked = true;
}
});
// 取消选中
btnUnAll.addEventListener('click', function () {
for (let index = 0; index < chkList.length; index++) {
chkList[index].checked = false;
}
});
// 遍历商品的复选框 绑定点击事件
// 判断商品是否要全选的条件是 额外定义一个变量 存放勾选了的商品的数量
// 勾选了的商品的数量 和 商品总数量 比较 相等 == 可以设置全选
for (let index = 0; index < chkList.length; index++) {
chkList[index].addEventListener('click', function () {
let checkedNums = 0;
// 遍历所有的复选框 判断他们的选中状态 = true 设置 checkedNums++
// 循环结束后 再去判断 勾选了的商品的数量 和 商品总数量
for (let index2 = 0; index2 < chkList.length; index2++) {
if (chkList[index2].checked) {
// 选中
checkedNums++;
}
}
// 循环结束后 再去判断 勾选了的商品的数量 和 商品总数量
if (checkedNums === chkList.length) {
console.log('设置全选');
allChk.checked = true;
} else {
console.log('不设置全选');
allChk.checked = false;
}
});
}
</script>
</body>
</html>
19-商品选中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>01-全选商品</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px '微软雅黑';
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
<script>
let tbody = document.querySelector('tbody');
let checkAll = document.querySelector('#checkAll');
// 代码调试 和 打断点
// 1 以前打断点的方式 回到谷歌浏览器中来鼠标点击打断点
// 2 写一行代码 实现断点
// let ckList = document.querySelectorAll('.ck'); // 获取元素必须要保证页面上有 否则获取不到
// 1 根据数组 来渲染页面结构
function render() {
let arr = [
{ name: '小米手机', business: '小米', price: 2999 },
{ name: '小米净水器', business: '小米', price: 4999 },
{ name: '小米电视', business: '小米', price: 5999 },
];
let html = ``;
// 遍历生成标签
for (let index = 0; index < arr.length; index++) {
html += `
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>${arr[index].name}</td>
<td>${arr[index].business}</td>
<td>${arr[index].price}</td>
</tr>
`;
}
// 把html插入到tbody中
tbody.innerHTML = html;
}
render(); // 1 根据数组 来渲染页面结构
let ckList = document.querySelectorAll('.ck'); // 获取元素必须要保证页面上有 否则获取不到
// 2 全选 点击功能
checkAll.addEventListener('click', function () {
// 2.1 获取自己的选中状态
let checked = this.checked;
// 2.2 遍历小的复选框 把 全选-选中状态设置给每一个小复选框即可
console.log(ckList);
for (let index = 0; index < ckList.length; index++) {
ckList[index].checked = checked;
}
});
// 3 给每一个小商品选中按钮绑定点击事件
for (let index = 0; index < ckList.length; index++) {
ckList[index].addEventListener('click', function () {
// 判断选中的商品数量和 商品总数量 的关系
// 如果相等 表示 可以全选
// 否则不全选
// if(isAllChk()){
// // 达到了全选的要求
// checkAll.checked=true;
// }else{
// checkAll.checked=false;
// }
checkAll.checked = isAllChk();
});
}
// 判断是否到达了全选的条件
function isAllChk() {
// 定义1个记录 当前选中的商品的数量 变量
let checkedNum = 0;
// 遍历商品的复选框数组
for (let index = 0; index < ckList.length; index++) {
// 如果当前的复选框是选中
if (ckList[index].checked) {
checkedNum++;
}
}
// 判断选中的商品数量和总的商品数量直接的关系
// if (checkedNum === ckList.length) {
// return true;
// } else {
// return false;
// }
return checkedNum === ckList.length;
}
</script>
</html>
20-移动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>23-移动的案例.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: space-evenly;
}
ul {
width: 400px;
height: 400px;
}
.left {
background-color: yellow;
}
.right {
background-color: aqua;
}
</style>
</head>
<body>
<ul class="left">
<li>龙虾</li>
<li>鲍鱼</li>
<li>皇帝蟹</li>
<li>鱼子酱</li>
</ul>
<ul class="right"></ul>
<script>
let liList = document.querySelectorAll('li');
let right = document.querySelector('.right');
for (let index = 0; index < liList.length; index++) {
liList[index].addEventListener('click', function () {
// 移动元素
// appendChild 要什么数据
// 父元素.appendChild(子元素);
// 子元素 目标元素 this
right.appendChild(this);
});
}
</script>
</body>
</html>
21-美女画廊
分析
代码
<!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>
body{
padding: 40px;
}
.big{
width: 815px;
}
h3 {
padding-bottom: 20px;
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<h1>美女画廊</h1>
<div>
<!-- <img src="./3.3/1-small.jpg" alt="">
<img src="./3.3/2-small.jpg" alt="">
<img src="./3.3/3-small.jpg" alt="">
<img src="./3.3/4-small.jpg" alt=""> -->
</div>
<img src="./3.3/placeholder.png" alt="" class="big">
<h3>选择一张图片</h3>
<script>
let div=document.querySelector('div')
let big=document.querySelector('.big')
let h3=document.querySelector('h3')
let index=0
// 1 定义好数据
let arr=[
{
small:"./3.3/1-small.jpg",
big:"./3.3/1.jpg",
tite:'美女A'
},
{
small:"./3.3/2-small.jpg",
big:"./3.3/2.jpg",
tite:'美女B'
},
{
small:"./3.3/3-small.jpg",
big:"./3.3/3.jpg",
tite:'美女C'
},
{
small:"./3.3/4-small.jpg",
big:"./3.3/4.jpg",
tite:'美女D'
},
]
// 2 写一个函数负责渲染小图片
function render(){
let html=``
for (let index = 0; index < arr.length; index++) {
html+=`
<img src="${arr[index].small}" alt="">
`
}
div.innerHTML=html
}
render() // 函数负责渲染小图片
let smImgs=document.querySelectorAll('div img')
// 3 遍历小图片 绑定点击事件
for (let index = 0; index < smImgs.length; index++) {
smImgs[index].addEventListener('click',function(){
renderByIndex(index)
})
}
// 根据下标来显示对应的内容
function renderByIndex(arrIndex){
// 显示小图对应的 大图
big.src=`${arr[arrIndex].big}`
// 显示标题
h3.innerText=`${arr[arrIndex].tite}`
}
// 4 开启一个定时器 定时器内自动调用 函数 显示内容
setInterval(function(){
renderByIndex(index);
index++
// 控制好下标 不要让它超出限制
if(index===arr.length){
index=0
}
},1000)
</script>
</body>
</html>
22-dom-复习-元素节点关系-父.子节点-兄弟节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>22-dom-复习.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
/*
1 元素节点关系
父节点 parentNode
子节点 children
上一个兄弟 previousElementSibling
下一个兄弟 nextElementSibling
2 移动元素节点
appendChild 把目标元素放在父容器中的最后一个子元素的位置
*/
let liList = document.querySelectorAll('li');
for (let index = 0; index < liList.length; index++) {
liList[index].addEventListener('click', function () {
// this 被点击的元素本身
this.style.backgroundColor = 'red';
// 被点击的元素 的上一个兄弟元素 p
this.previousElementSibling.style.backgroundColor = 'blue';
// 下一个
this.nextElementSibling.style.backgroundColor = 'green';
// 给被点击的元素 的 父元素 设置颜色 黄色
this.parentNode.style.backgroundColor = 'yellow';
// 点击一下li标签，设置所有的li标签 都拥有边框
for (let j = 0; j < liList.length; j++) {
liList[j].style.border = '1px solid #000';
}
// 元素的children 属性 - 返回 父元素所有的子元素节点 数组
this.parentNode.children
for (let j = 0; j < this.parentNode.children.length; j++) {
this.parentNode.children[j].style.border = '1px solid #000';
}
// 设置被点击的元素放在 最末尾
// 目标元素 = this
// 父元素 this.parentNode
// this.parentNode.appendChild(this);
// 设置被点击的元素 和 上一个元素交互位置 insertBefore
// insertBefore 设置目标元素 放在 父元素指定的一个子元素的前面
// 目标元素 this
// 父元素 this.parentNode
// 放在谁的前面 this.previousElementSibling
this.parentNode.insertBefore(this,this.previousElementSibling);
});
}
</script>
</body>
</html>
学习技巧
- 以后碰到比较复杂的案例，静态结构要先写死
