点击按钮，里面数字减少
<!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>
<button>1000</button>
<script>
//第一种方法
// let bu = document.querySelector('button'), a = 1000
// bu.addEventListener('click', function () {
// bu.innerText = a--
// })
//第二种方法
let bu = document.querySelector('button')
bu.addEventListener('click', function () {
// bu.innerText = bu.innerText - 1
//精简代码
--bu.innerText
//减法隐式转换，不用担心变成字符串
})
</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>
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
display: block;
}
</style>
</head>
<body>
<div></div>
<!-- 思路：display = 'none'; display: block;配合就是显示隐藏元素-->
<script>
let box = document.querySelector('div')
box.addEventListener("click", function () {
box.style.display = 'none';
})
</script>
</body>
</html>
商品全选案例之全选控制单选
就是点一下全选，下面的全部打勾
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>10-商品全选</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>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
/*
1 获取 全选标签 绑定点击事件
checkAll
2 点击事件触发后 获取 复选框的选中属性 checkAll.checked
3 把全选按钮的选中状态 设置到每一个 其他复选框中
4 数组和循环思想 解决重复工作的
*/
let checkAll = document.querySelector('#checkAll');
// 获取符合选择器要求的数组
let checkboxList = document.querySelectorAll('.ck');
// console.log(checkboxList);
// 监听点击 绑定点击 注册点击 订阅点击
checkAll.addEventListener('click', function () {
// console.log('全选');
// console.log(checkAll.checked); // 获取当前全选按钮的选中状态
// 设置复选框 选中状态等于 全选框的选中状态
for (let index = 0; index < checkboxList.length; index++) {
// checkboxList[index] // 每一个复选框
checkboxList[index].checked = checkAll.checked;
}
});
</script>
</body>
</html>
商品全选案例之单选控制全选第一步分析
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>12-商品单选-控制全选</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>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input checked type="checkbox" name="check" class="ck" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input checked type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
/*
1 给每一个单独的复选框绑定点击事件
2 思考
什么时候需要让 全选按钮 选中
每一个商品的都选中的时候 就让 全选按钮选中
什么时候需要让 全选按钮 不选中
只要有一个商品 没有选中
3 实现
1 单独的定义一个变量 选中的商品的数量
checkedNum=0;
2 开始对 商品做循环 遍历
3 判断每一个商品的选中状态
如果 有商品选中了 让 checkedNum++
4 循环结束后
开始判断 checkNum 值 和 商品长度的关系
1 两者相等 等于 全选！！！
2 两者不相等 没有达到全选条件
*/
// 获取商品的数组 复选框的数组
let checkList = document.querySelectorAll('.ck');
isAllChecked();
// 函数来判断
function isAllChecked() {
// 1 存放选中的商品的数量
let checkedNum = 0;
// 2 商品数组做循环
for (let index = 0; index < checkList.length; index++) {
// 3 判断每一商品的选中状态
if (checkList[index].checked) {
checkedNum++;
}
}
// 4 循环结束了 判断 选中商品的数量和 商品总数量之间的关系
if (checkedNum === checkList.length) {
// console.log('全选');
return true;
} else {
// console.log('不全选');
return false;
}
}
</script>
</body>
</html>
商品全选案例之单选控制全选第二步实现功能
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>12-商品单选-控制全选</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>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
/*
1 获取商品数组
2 遍历他们绑定点击事件
3 事件触发了 判断当前的是否达到了全选的状态
4 把 状态也设置到 全选按钮中
*/
let checkList = document.querySelectorAll('.ck');
let checkAll = document.querySelector('#checkAll');
// 给每一个商品绑定点击事件
for (let index = 0; index < checkList.length; index++) {
checkList[index].addEventListener('click', function () {
// 判断是否达到了全选 条件
let checked = isAllChecked();
// 设置全选按钮即可
checkAll.checked=checked;
});
}
// 函数来判断
function isAllChecked() {
// 1 存放选中的商品的数量
let checkedNum = 0;
// 2 商品数组做循环
for (let index = 0; index < checkList.length; index++) {
// 3 判断每一商品的选中状态
if (checkList[index].checked) {
checkedNum++;
}
}
// 4 循环结束了 判断 选中商品的数量和 商品总数量之间的关系
if (checkedNum === checkList.length) {
// console.log('全选');
return true;
} else {
// console.log('不全选');
return false;
}
}
</script>
</body>
</html>
商品全选加单选拼接实现最终功能案例
<!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>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
</body>
<script>
/*
1 获取全选按钮和 一组 商品复选按钮
2 给全选按钮绑定点击事件
3 给一组商品 绑定点击事件
*/
let checkAll = document.querySelector('#checkAll');
let checkboxList = document.querySelectorAll('.ck');
// 商品全选点击 功能
checkAll.addEventListener('click', function () {
for (let index = 0; index < checkboxList.length; index++) {
checkboxList[index].checked = checkAll.checked;
}
});
// 一组商品的 点击功能
// 给每一个商品绑定点击事件
for (let index = 0; index < checkboxList.length; index++) {
checkboxList[index].addEventListener('click', function () {
// 判断是否达到了全选 条件
let checked = isAllChecked();
// 设置全选按钮即可
checkAll.checked = checked;
});
}
// 函数来判断
function isAllChecked() {
// 1 存放选中的商品的数量
let checkedNum = 0;
// 2 商品数组做循环
for (let index = 0; index < checkboxList.length; index++) {
// 3 判断每一商品的选中状态
if (checkboxList[index].checked) {
checkedNum++;
}
}
// 4 循环结束了 判断 选中商品的数量和 商品总数量之间的关系
if (checkedNum === checkboxList.length) {
// console.log('全选');
return true;
} else {
// console.log('不全选');
return false;
}
}
</script>
</html>
小米搜索框
就是用ul li这种便签做出文本栏的效果
<!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>09-小米搜索框</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
display: none;
}
.mi {
position: relative;
width: 223px;
margin: 100px auto;
}
.mi input {
width: 223px;
height: 48px;
padding: 0 10px;
font-size: 14px;
line-height: 48px;
border: 1px solid #e0e0e0;
outline: none;
}
.mi .search {
border: 1px solid #ff6700;
}
.result-list {
position: absolute;
left: 0;
top: 48px;
width: 223px;
border: 1px solid #ff6700;
border-top: 0;
background: #fff;
}
.result-list a {
display: block;
padding: 6px 15px;
font-size: 12px;
color: #424242;
text-decoration: none;
}
.result-list a:hover {
background-color: #eee;
}
</style>
</head>
<body>
<div class="mi">
<input type="search" placeholder="小米笔记本" />
<ul class="result-list">
<li><a href="#">全部商品</a></li>
<li><a href="#">小米11</a></li>
<li><a href="#">小米10S</a></li>
<li><a href="#">小米笔记本</a></li>
<li><a href="#">小米手机</a></li>
<li><a href="#">黑鲨4</a></li>
<li><a href="#">空调</a></li>
</ul>
</div>
<script>
/*
1 针对 输入框 来实现
2 绑定 获得焦点事件
控制标签的显示
3 绑定 失去焦点事件
控制标签的隐藏
*/
let input = document.querySelector('input');
let ul = document.querySelector('ul');
input.addEventListener('focus', function () {
// 控制ul显示
ul.style.display = 'block';
});
input.addEventListener('blur', function () {
ul.style.display = 'none';
});
</script>
</body>
</html>
文本域里面限制字数和字数显示案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="css/weibo.css" />
</head>
<body>
<div class="w">
<div class="controls">
<img src="images/tip.png" alt="" /><br />
<textarea
placeholder="说点什么吧..."
id="area"
cols="30"
rows="100"
maxlength="200"
></textarea>
<div>
<span class="useCount">0</span>
<span>/</span>
<span>200</span>
<button id="send">发布</button>
</div>
</div>
<div class="contentList">
<ul></ul>
</div>
</div>
<script>
let area = document.querySelector('#area');
let useCount = document.querySelector('.useCount');
// 绑定 input事件
area.addEventListener('input', function () {
// 先获取 textarea内容 value或者 innerHTML 来获取
// console.log(area.value.length);
//把文本域的字符串长度的值赋予左边span标签的字数显示
useCount.innerText = area.value.length;
});
</script>
</body>
</html>
排他思想案例-购物栏
就是上面的购物栏切换的时候下面的内容也跟着变化
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.active {
display: block;
}
.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main active">
<a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg" alt="" /></a>
</div>
</div>
</div>
<script>
/*
1 给标题标签 给他们绑定点击事件
2 事件触发 开始使用排他思想
1 获取所有的要设置标题样式的标签 遍历他们，移除掉 上边框 红色效果
2 通过 this 给自己单独添加上 上边框红色的效果
3 获取到所有的main标签（决定图片显示） 遍历他们 移除掉 一个class active
4 再获取到要设置的 main标签 让它 添加上一个class active
*/
let liList = document.querySelectorAll('li');
let mainList = document.querySelectorAll('.main');
for (let index = 0; index < liList.length; index++) {
liList[index].addEventListener('click', function () {
// 遍历li标签 移除他们身上的类 active
for (let j = 0; j < liList.length; j++) {
liList[j].classList.remove('active');
}
// 单独对我自己 添加一个类
this.classList.add('active'); // this = li标签
// 处理图片显示部分
// 先遍历所有的main标签 让他们移除掉 active
for (let j = 0; j < mainList.length; j++) {
mainList[j].classList.remove('active');
}
// 设置给对应的标签 添加上 active
// 单独对我自己 添加一个类
// mainList[index] // index 就是和被点击li标签的下标
mainList[index].classList.add('active');
});
}
</script>
</body>
</html>
购物车数字增加或者减少案例
就是设置条件判断按钮禁用还是不禁用，优化不能让他初始低于1，就在行内加一个禁用即可
<!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-购物车数量改变.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<span>1</span>
<button class="increment">+</button>
<button disabled class="decrement">-</button>
<script>
// 1 获取标签
// 2 分别绑定了点击事件
// 3 + 业务 只需要 对 数量做增加即可
// 4 - 业务 判断 如果数量等于 1 那么就需要禁用 按钮
let span = document.querySelector('span');
let increment = document.querySelector('.increment');
let decrement = document.querySelector('.decrement');
// 增加
increment.addEventListener('click', function () {
// console.log('+');
span.innerText++;
decrement.disabled = false; // 启用按钮
});
// 减少
decrement.addEventListener('click', function () {
span.innerText--;
// 判断数量是否等于1
// span.innerText 是字符串类型
if (span.innerText == 1) {
// console.log('会满足条件');
decrement.disabled = true; // 禁用 - 按钮
}
});
</script>
</body>
</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>24-美女画廊.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px;
}
.big {
width: 815px;
}
</style>
</head>
<body>
<h1>美女画廊</h1>
<div></div>
<img class="big" src="./images/3.3/placeholder.png" alt="" />
<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: './images/3.3/1-small.jpg',
big: './images/3.3/1.jpg',
title: '美女A',
},
{
small: './images/3.3/2-small.jpg',
big: './images/3.3/2.jpg',
title: '美女B',
},
{
small: './images/3.3/3-small.jpg',
big: './images/3.3/3.jpg',
title: '美女C',
},
{
small: './images/3.3/4-small.jpg',
big: './images/3.3/4.jpg',
title: '美女D',
},
{
small: './images/3.3/2-small.jpg',
big: './images/3.3/2.jpg',
title: '美女E',
},
{
small: './images/3.3/3-small.jpg',
big: './images/3.3/3.jpg',
title: '美女F',
},
];
// 2 写一个函数负责渲染小图片
function render() {
let imgHTML = ``;
for (let index = 0; index < arr.length; index++) {
// imgHTML += `<img src="./images/3.3/${index + 1}-small.jpg" alt="" />`;
imgHTML += `<img src="${arr[index].small}" alt="" />`;
}
div.innerHTML = imgHTML;
}
render(); // 函数负责渲染小图片
let smImgs = document.querySelectorAll('div img');
// 3 遍历小图片 绑定点击事件
for (let index = 0; index < smImgs.length; index++) {
smImgs[index].addEventListener('click', function () {
// console.log('被点击图片的下标', index);
renderByIndex(index);
});
}
// 根据下标来显示对应的内容
function renderByIndex(arrIndex) {
// 显示小图对应的 大图
big.src = arr[arrIndex].big;
// 显示标题
h3.innerText = arr[arrIndex].title;
}
// 4 开启一个定时器 定时器内自动调用 函数 显示内容
setInterval(function () {
renderByIndex(index);
index++;
// 控制好下标 不要让它超出限制
if (index === arr.length) {
index = 0;
}
console.log(index);
}, 1000);
</script>
</body>
</html>
