随机点名案例
// 获取元素 div 和 button
let box = document.querySelector('div')
let btn = document.querySelector('button')
// 随机函数
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
// 声明一个数组
let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
// 事件监听
btn.addEventListener('click', function () {
// 随机的数字
let random = getRandomIntInclusive(0, arr.length - 1)
// 给到数组 随机的下标
box.innerHTML = arr[random]
// 删除已输出的元素splice(从哪里删, 删几个)
arr.splice(random, 1)
// 如果数组没有了 长度为0 就禁用按钮
if (arr.length === 0) {
btn.disabled = true
btn.innerHTML = '已抽完'
}
})
// 数据数组
let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
// 随机函数
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
// 获取元素
let uname = document.querySelector('.uname')
let start = document.querySelector('.start')
let end = document.querySelector('.end')
// timer 需要是全局变量才能调用
let timer = 0
// random 需要是全局变量才能调用
let random = 0
// 给开始按钮注册事件
start.addEventListener('click', function () {
// 随机抽数据 不断地抽取 间歇函数定时器
timer = setInterval(function () {
random = getRandomIntInclusive(0, arr.length - 1)
// 给到数组 随机的下标
uname.innerHTML = arr[random]
// 一次只能点一次按钮
if (arr.length !== 1) {
start.disabled = true
end.disabled = false
}
}, 100)
// 如果到了最后一个就禁用两个按钮
if (arr.length === 1) {
start.disabled = true
end.disabled = true
// start.disabled = end.disabled = true
start.innerHTML = '已抽完'
end.innerHTML = '已抽完'
}
})
// 给结束按钮注册事件
end.addEventListener('click', function () {
// 停止定时器
clearInterval(timer)
// 删除数组元素
arr.splice(random, 1)
// 一次只能点一次按钮
if (arr.length !== 0) {
end.disabled = true
start.disabled = false
}
})
小米搜索框案例
// 获取元素
let search = document.querySelector('input[type="search"]')
let ul = document.querySelector('ul')
// 搜索框获得光标 加边框
search.addEventListener('focus', function () {
search.style.border = '1px solid orange'
})
// 搜索框失去光标 边框变回原来样式 隐藏菜单
search.addEventListener('blur', function () {
search.style.border = '1px solid #999'
ul.style.display = 'none'
})
// 获得用户输入事件 显示菜单
search.addEventListener('input', function () {
ul.style.display = 'block'
})
微博输入案例
// 获取元素
let textarea = document.querySelector('textarea')
let useCount= document.querySelector('.useCount')
// 绑定事件 用户输入事件 input
textarea.addEventListener('input', function () {
useCount.innerHTML = textarea.value.length
})
全选案例
// 1. 获取元素 全选 和 ck 小复选框
let ckAll = document.querySelector('#ckAll')
let cks = document.querySelectorAll('.ck')
let allTips = document.querySelector('.allTips')
// 2. 事件监听 全选按钮
ckAll.addEventListener('click', function () {
// ckAll.checked // true false
// 我们需要做的就是把 ckAll.checked 给下面三个小按钮
// 因为三个按钮在伪数组里面，我们需要遍历的方式，挨着取出来，依次给值
for (let i = 0; i < cks.length; i++) {
cks[i].checked = ckAll.checked
}
// 当我们的全选按钮处于选中状态，则可以改为取消
if (ckAll.checked) {
allTips.innerHTML = '取消'
} else {
allTips.innerHTML = '全选'
}
})
// 3. 小按钮的做法 同时给多个元素绑定相同事件
for (let i = 0; i < cks.length; i++) {
// 绑定事件
cks[i].addEventListener('click', function () {
// 只要点击任何一个小按钮，都要遍历所有的小按钮
for (let j = 0; j < cks.length; j++) {
// 每个复选框选中
if (cks[j].checked === false) {
// 如果有false 则退出循环 结束函数
ckAll.checked = false
allTips.innerHTML = '全选'
return
}
}
// 当我们的循环结束，如果代码走到这里，说明没有false，都被选中了，则全选按钮要选中
ckAll.checked = true
allTips.innerHTML = '取消'
})
}
tab切换案例
// 0. 获取元素
// 得到所有的tab
let tab_items = document.querySelectorAll('.tab .tab-item')
let mains = document.querySelectorAll('.products .main')
// 1. 头部tab栏切换模块
// 1.1 先给4个小li添加点击事件
for (let i = 0; i < tab_items.length; i++) {
tab_items[i].addEventListener('click', function () {
// 找到以前的active 类，移除掉
document.querySelector('.tab .active').classList.remove('active')
// 当前的元素添加
this.classList.add('active')
// 2. 底部显示隐藏模块 一定要写到点击事件的里面
document.querySelector('.products .active').classList.remove('active')
// div对应序号的那个加上active
mains[i].classList.add('active')
})
}
// 获取元素
let tab_lists = document.querySelectorAll('.tab-list li');
let items = document.querySelectorAll('.item');
// for循环绑定点击事件
for (let i = 0; i < tab_lists.length; i++) {
// 开始给5个小li 设置索引号
tab_lists[i].setAttribute('index', i);
tab_lists[i].onclick = function () {
// 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
// 干掉所有人 其余的li清除 class 这个类
for (let i = 0; i < tab_lists.length; i++) {
tab_lists[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
let index = this.getAttribute('index');
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (let i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items[index].style.display = 'block';
}
}
微博发布案例
/* 需求1：检测用户输入字数
1. 注册input事件
2. 将文本的内容的长度赋值给对应的数值
3. 表单的maxlength属性可以直接限制在200个数之间 */
let textarea = document.querySelector('textarea')
let useCount = document.querySelector('.useCount')
// 发布按钮
let send = document.querySelector('#send')
// ul
let ul = document.querySelector('#ul')
textarea.addEventListener('input', function () {
useCount.innerHTML = this.value.length
})
/* 需求2： 输入不能为空
点击button之后判断
判断如果内容为空，则提示不能输入为空, 并且直接return 不能为空
防止输入无意义空格, 使用字符串.trim()去掉首尾空格
并将表单的value值设置为空字符串
同时下面红色为设置为0 */
send.addEventListener('click', function () {
if (textarea.value.trim() === '') {
// 并将表单的value值设置为空字符串
textarea.value = ''
// 同时下面红色为设置为0
useCount.innerHTML = 0
return alert('内容不能为空')
}
// 随机数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
let random = getRandom(0, dataArr.length - 1)
/* 需求3： 新增留言 写到send 的里面
创建一个小li，然后里面通过innerHTML追加数据 */
let li = document.createElement('li')
// 随机获取数据数组里面的内容, 替换newNode的图片和名字以及留言内容
li.innerHTML = `
<div class="info">
<img class="userpic" src=${dataArr[random].imgSrc}>
<span class="username">${dataArr[random].uname}</span>
<p class="send-time"> ${new Date().toLocaleString()} </p>
</div>
<div class="content">${textarea.value}</div>
<span class="the_del">X</span>
`
/* 需求4：删除留言 放到追加的前面
在事件处理函数里面获取点击按钮, 注册点击事件
(易错点: 必须在事件里面获取, 外面获取不到)
删除对应的元素(通过this获取对应的那条需要删除的元素)
教你一招: 放到追加进ul的前面，这样创建元素的同时顺便绑定了事件，赞~~
使用 li.querySelector() */
let del = li.querySelector('.the_del')
del.addEventListener('click', function () {
// 删除操作 点击的是X 删除的小li 父元素.removeChild(子元素)
ul.removeChild(li)
})
// 利用时间对象将时间动态化 new Date().toLocaleString()
// 追加给 ul 用 父元素.insertBefore(子元素, 那个元素的前面)
ul.insertBefore(li, ul.children[0])
/* 需求5：重置
将表单域内容重置为空
将userCount里面的内容重置为0 */
textarea.value = ''
// 同时下面红色为设置为0
useCount.innerHTML = 0
})
购物车案例
// 全选按钮
let all = document.querySelector('#all')
// 复选按钮
let s_ck = document.querySelectorAll('.s_ck')
// 加号
let adds = document.querySelectorAll('.add')
// 减号
let reduces = document.querySelectorAll('.reduce')
// 商品数量
let goodsNum = document.querySelectorAll('.count-c input')
// 商品单价
let prices = document.querySelectorAll('.price')
// 商品小计
let totals = document.querySelectorAll('.total')
// 全部删除按钮
let deles = document.querySelectorAll('.del')
// 获取要删除的父亲
let carBody = document.querySelector('#carBody')
// 商品总数量
let totalCount = document.querySelector('#totalCount')
//商品总价
let totalPrice = document.querySelector('#totalPrice')
//清空购物车
let clear = document.querySelector('.clear')
// 获取要删除的父亲
let table = document.querySelector('table')
// 删除选定商品按钮
let del_all = document.querySelector('.del-all')
for (let i = 0; i < s_ck.length; i++) {
getGoodsNum()
// 全选
all.addEventListener('click', function () {
// ckAll.checked // true false
// 我们需要做的就是把 ckAll.checked 给下面三个小按钮
// 因为三个按钮在伪数组里面，我们需要遍历的方式，挨着取出来，依次给值
for (let i = 0; i < s_ck.length; i++) {
s_ck[i].checked = all.checked
}
})
// 复选框
s_ck[i].addEventListener('click', function () {
// 只要点击任何一个小按钮，都要遍历所有的小按钮
for (let j = 0; j < s_ck.length; j++) {
// 每个复选框选中
if (s_ck[j].checked === false) {
// 如果有false 则退出循环 结束函数
all.checked = false
return
}
}
// 当我们的循环结束，如果代码走到这里，说明没有false，都被选中了，则全选按钮要选中
all.checked = true
})
// 单击加号
adds[i].addEventListener('click', function () {
goodsNum[i].value++
reduces[i].disabled = false
// 计算小计
totals[i].innerHTML = parseInt(prices[i].innerText) * goodsNum[i].value + ' ￥'
getGoodsNum()
})
// 单击减号
reduces[i].addEventListener('click', function () {
if (goodsNum[i].value <= 2) {
reduces[i].disabled = true
}
goodsNum[i].value--
// 计算小计
totals[i].innerHTML = parseInt(prices[i].innerText) * goodsNum[i].value + ' ￥'
getGoodsNum()
})
// 删除商品
deles[i].addEventListener('click', function () {
carBody.removeChild(this.parentNode.parentNode)
getGoodsNum()
})
}
function getGoodsNum() {
// 商品数量
let goodsNum = document.querySelectorAll('.count-c input')
// 商品小计
let totals = document.querySelectorAll('.total')
let num = 0
let sum = 0
for (let i = 0; i < totals.length; i++) {
num += parseInt(goodsNum[i].value)
sum += parseInt(totals[i].innerHTML)
}
totalCount.innerHTML = num
totalPrice.innerHTML = sum + ' ￥'
}
// 清空购物车
function clearShop() {
table.removeChild(table.children[1])
clear.removeEventListener('click', clearShop)
getGoodsNum()
}
clear.addEventListener('click', clearShop)
// 删除选中商品
del_all.addEventListener('click', function () {
for (let i = 0; i < s_ck.length; i++) {
// 每个复选框选中
if (s_ck[i].checked !== false) {
carBody.removeChild(s_ck[i].parentNode.parentNode)
getGoodsNum()
}
}
})
-------------------------------------------------------------
// + - 删除是相同的，一一对应的 我们完全可以用一个for来遍历绑定事件
// +
let adds = document.querySelectorAll('.add')
// -
let reduces = document.querySelectorAll('.reduce')
// del
let dels = document.querySelectorAll('.del')
// 输入框input
let inputs = document.querySelectorAll('.count-c input')
// 单价 price 5
let prices = document.querySelectorAll('.price')
// 小计 total 5 * 2 = 10
let totals = document.querySelectorAll('.total')
// 总价元素获取
let totalResult = document.querySelector('.total-price')
// 总的数量获取
let totalCount = document.querySelector('#totalCount')
// tbody 获取过来
let carBody = document.querySelector('#carBody')
for (let i = 0; i < adds.length; i++) {
// 总价和单价是一样的
totals[i].innerText = prices[i].innerText
//1. 加号的操作
adds[i].addEventListener('click', function () {
// 点击了谁，就让对应的输入框自增就行了
inputs[i].value++
// 减号要启用
reduces[i].disabled = false
// prices[i].innerText 得到的是 5¥ parseInt('5¥') === 5
console.log(parseInt(prices[i].innerText))
// 计算小计模块
// totals[i].innerText = 单价 * 数量
// totals[i].innerText = 20
totals[i].innerText = parseInt(prices[i].innerText) * inputs[i].value + '¥'
// 计算现在的总额 调用
result()
})
//2. 减号的操作
reduces[i].addEventListener('click', function () {
// 点击了谁，就让对应的输入框自增就行了
inputs[i].value--
// prices[i].innerText 得到的是 5¥ parseInt('5¥') === 5
// console.log(parseInt(prices[i].innerText))
// 判断如果表单里面的值 小于等于1 则，禁用按钮
if (inputs[i].value <= 1) {
this.disabled = true
}
// 计算小计模块
// totals[i].innerText = 单价 * 数量
// totals[i].innerText = 20
totals[i].innerText = parseInt(prices[i].innerText) * inputs[i].value + '¥'
// 计算现在的总额 调用
result()
})
// 3. 删除操作
dels[i].addEventListener('click', function () {
// 父元素.removeChild(子元素)
// 我们要删除的是那个元素 tr 他的爸爸是 tbody
// 删除的是当前元素爸爸的爸爸 就是 tr 就是当前的tr
carBody.removeChild(this.parentNode.parentNode)
// 调用总计模块
result()
})
}
// div span ul li 标签 有文字内容 怎么得到或则设置文字内容呢 元素.innerText 元素.innerHTML
// 表单 input 单选 复选 textarea select 怎么得到或则设置值 表单的value
// 特殊的 button 是通过inner来设置
// 以前数组求和的方式 累加
// 计算总价 result 函数 把所有的小计 totals 加起来的结果
function result() {
// 小计 total 5 * 2 = 10
let totals = document.querySelectorAll('.total')
// 输入框input
let inputs = document.querySelectorAll('.count-c input')
let sum = 0
let num = 0
for (let i = 0; i < totals.length; i++) {
// sum = sum + 小计的数字 10￥
sum = sum + parseInt(totals[i].innerText)
num = num + parseInt(inputs[i].value)
}
// console.log(sum)
totalResult.innerText = sum + '￥'
// console.log(num)
totalCount.innerText = num
}
result()
