【黑马程序员前端】JavaScript入门到精通--20230801
B站链接
理论
HTML相关知识【黑马程序员前端】
https://blog.csdn.net/m0_48964052/article/details/125951658
CSS相关知识【黑马程序员前端】
https://blog.csdn.net/m0_48964052/article/details/125951788
黑马程序员——JavaScript基础1（初识 JavaScript）
https://blog.csdn.net/m0_48964052/article/details/125952056
黑马程序员——JavaScript基础2（变量与数据类型）
https://blog.csdn.net/m0_48964052/article/details/125955339
黑马程序员——JavaScript基础3（JavaScript 运算符）
https://blog.csdn.net/m0_48964052/article/details/125955496、
黑马程序员——JavaScript基础4（JavaScript 流程控制）
https://blog.csdn.net/m0_48964052/article/details/125956043
黑马程序员——JavaScript基础5（JavaScript 数组）
https://blog.csdn.net/m0_48964052/article/details/125956550
黑马程序员——JavaScript基础6（JavaScript 函数）
https://blog.csdn.net/m0_48964052/article/details/125957550
黑马程序员——JavaScript基础7（作用域、预解析、对象）
https://blog.csdn.net/m0_48964052/article/details/125958024
黑马程序员——Web API（DOM）
https://blog.csdn.net/m0_48964052/article/details/125962081
黑马程序员——Web API（事件高级）
https://blog.csdn.net/m0_48964052/article/details/125967368
黑马程序员——Web API（BOM）
https://blog.csdn.net/m0_48964052/article/details/125967597
***黑马程序员前端JavaScript高级——ES6学习笔记
https://blog.csdn.net/weixin_44566194/article/details/127568441
实践
1.JavaScript基础资料
JavaScript基础第五天
06-渲染学生信息表.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {width: 600px;text-align: center;}table,th,td {border: 1px solid #ccc;border-collapse: collapse;}caption {font-size: 18px;margin-bottom: 10px;font-weight: 700;}tr {height: 40px;cursor: pointer;}table tr:nth-child(1) {background-color: #ddd;}table tr:not(:first-child):hover {background-color: #eee;}</style>
</head><body><h2>学生信息</h2><p>将数据渲染到页面中...</p><table><caption>学生列表</caption><tr><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>家乡</th></tr><!-- script写到这里 --><script>// 1. 数据准备let students = [{ name: '小明', age: 18, gender: '男', hometown: '河北省' },{ name: '小红', age: 19, gender: '女', hometown: '河南省' },{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },{ name: '小丽', age: 18, gender: '女', hometown: '山东省' },{ name: '晓强', age: 16, gender: '女', hometown: '蓝翔技校' }]// 2. 渲染页面for (let i = 0; i < students.length; i++) {document.write(`<tr><td>${i + 1}</td><td>${students[i].name}</td><td>${students[i].age}</td><td>${students[i].gender}</td><td>${students[i].hometown}</td></tr>`)}</script></table></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>学车在线首页</title><link rel="stylesheet" href="./css/style.css"><style></style>
</head><body><!-- 4. box核心内容区域开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><!-- <li><a href="#"><img src="images/course01.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • <span>1125</span>人在学习</div></a></li> --><script>let data = [{src: 'images/course01.png',title: 'Think PHP 5.0 博客系统实战项目演练',num: 1125},{src: 'images/course02.png',title: 'Android 网络动态图片加载实战',num: 357},{src: 'images/course03.png',title: 'Angular2大前端商城实战项目演练',num: 22250},{src: 'images/course04.png',title: 'AndroidAPP实战项目演练',num: 389},{src: 'images/course05.png',title: 'UGUI源码深度分析案例',num: 124},{src: 'images/course06.png',title: 'Kami2首页界面切换效果实战演练',num: 432},{src: 'images/course07.png',title: 'UNITY 从入门到精通实战案例',num: 888},{src: 'images/course08.png',title: 'Cocos 深度学习你不会错过的实战',num: 590},{src: 'images/course04.png',title: '自动添加的模块',num: 1000}]for (let i = 0; i < data.length; i++) {document.write(`<li><a href="#"><img src=${data[i].src} title="${data[i].title}"><h4>${data[i].title}</h4><div class="info"><span>高级</span> • <span>${data[i].num}</span>人在学习</div></a></li>`)}</script></ul></div></div></body></html>
2.web APIs资料
web APIs第一天
06-随机抽奖案例
<!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>年会抽奖</title><style>.wrapper {width: 840px;height: 420px;background: url(./images/bg01.jpg) no-repeat center / cover;padding: 100px 250px;box-sizing: border-box;}</style>
</head><body><div class="wrapper"><strong>传智教育年会抽奖</strong><h1>一等奖：<span id="one">???</span></h1><h3>二等奖：<span id="two">???</span></h3><h5>三等奖：<span id="three">???</span></h5></div><script>// 1.声明数组const personArr = ['周杰伦', '刘德华', '周星驰', 'Pink老师', '张学友']// 2. 先做一等奖// 2.1 随机数 数组的下标const random = Math.floor(Math.random() * personArr.length)// console.log(personArr[random])// 2.2 获取one 元素 const one = document.querySelector('#one')// 2.3 把名字给 oneone.innerHTML = personArr[random]// 2.4 删除数组这个名字personArr.splice(random, 1)// console.log(personArr)// 3. 二等奖// 2.1 随机数 数组的下标const random2 = Math.floor(Math.random() * personArr.length)// console.log(personArr[random])// 2.2 获取one 元素 const two = document.querySelector('#two')// 2.3 把名字给 onetwo.innerHTML = personArr[random2]// 2.4 删除数组这个名字personArr.splice(random2, 1)// 4. 三等奖// 2.1 随机数 数组的下标const random3 = Math.floor(Math.random() * personArr.length)// console.log(personArr[random])// 2.2 获取one 元素 const three = document.querySelector('#three')// 2.3 把名字给 onethree.innerHTML = personArr[random3]// 2.4 删除数组这个名字personArr.splice(random3, 1)</script>
</body></html>
09-通过style属性修改样式
<!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>.box {width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div class="box"></div><script>// 1. 获取元素const box = document.querySelector('.box')//2. 修改样式属性 对象.style.样式属性 = '值' 别忘了跟单位box.style.width = '300px'// 多组单词的采取 小驼峰命名法box.style.backgroundColor = 'hotpink'box.style.border = '2px solid blue'box.style.borderTop = '2px solid red'</script>
</body></html>
11-通过类名修改样式
<body><div class="nav">123</div><script>// 1. 获取元素const div = document.querySelector('div')// 2.添加类名 class 是个关键字 我们用 classNamediv.className = 'nav box'</script>
</body>
12-通过classList修改样式
<body><div class="box active">文字</div><script>// 通过classList添加// 1. 获取元素const box = document.querySelector('.box')// 2. 修改样式// 2.1 追加类 add() 类名不加点，并且是字符串// box.classList.add('active')// 2.2 删除类 remove() 类名不加点，并且是字符串// box.classList.remove('box')// 2.3 切换类 toggle() 有还是没有啊， 有就删掉，没有就加上box.classList.toggle('active')</script>
</body>14-修改表单属性
<!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><!-- <input type="text" value="电脑"> --><input type="checkbox" name="" id=""><button>点击</button><script>// 1 获取元素// const uname = document.querySelector('input')// 2. 获取值 获取表单里面的值 用的 表单.value// console.log(uname.value) // 电脑// console.log(uname.innerHTML) innertHTML 得不到表单的内容// 3. 设置表单的值// uname.value = '我要买电脑'// console.log(uname.type)// uname.type = 'password'// 1. 获取const ipt = document.querySelector('input')// console.log(ipt.checked) // false 只接受布尔值ipt.checked = true// ipt.checked = 'true' // 会选中，不提倡 有隐式转换// 1.获取const button = document.querySelector('button')// console.log(button.disabled) // 默认false 不禁用button.disabled = true // 禁用按钮</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><div data-id="1" data-spm="不知道">1</div><div data-id="2">2</div><div data-id="3">3</div><div data-id="4">4</div><div data-id="5">5</div><script>const one = document.querySelector('div')console.log(one.dataset.id) // 1console.log(one.dataset.spm) // 不知道</script>
</body></html>
17-用户注册倒计时
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><textarea name="" id="" cols="30" rows="10">用户注册协议欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看</textarea><br><button class="btn" disabled>我已经阅读用户协议(5)</button><script>// 1. 获取元素const btn = document.querySelector('.btn')// console.log(btn.innerHTML) butto按钮特殊用innerHTML// 2. 倒计时let i = 5// 2.1 开启定时器let n = setInterval(function () {i--btn.innerHTML = `我已经阅读用户协议(${i})`if (i === 0) {clearInterval(n) // 关闭定时器// 定时器停了，我就可以开按钮btn.disabled = falsebtn.innerHTML = '同意'}}, 1000)</script>
</body></html>
web APIs第二天
03-点击关闭.html
李伟兴 09:31: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>.box {position: relative;width: 1000px;height: 200px;background-color: pink;margin: 100px auto;text-align: center;font-size: 50px;line-height: 200px;font-weight: 700;}.box1 {position: absolute;right: 20px;top: 10px;width: 20px;height: 20px;background-color: skyblue;text-align: center;line-height: 20px;font-size: 16px;cursor: pointer;}</style>
</head><body><div class="box">我是广告<div class="box1">X</div></div><script>// 1. 获取事件源const box1 = document.querySelector('.box1')// 关闭的是大盒子const box = document.querySelector('.box')// 2. 事件侦听box1.addEventListener('click', function () {box.style.display = 'none'})</script>
</body></html>
04-随机点名案例.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}h2 {text-align: center;}.box {width: 600px;margin: 50px auto;display: flex;font-size: 25px;line-height: 40px;}.qs {width: 450px;height: 40px;color: red;}.btns {text-align: center;}.btns button {width: 120px;height: 35px;margin: 0 50px;}</style>
</head><body><h2>随机点名</h2><div class="box"><span>名字是：</span><div class="qs">这里显示姓名</div></div><div class="btns"><button class="start">开始</button><button class="end">结束</button></div><script>// 数据数组const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']// 定时器的全局变量let timerId = 0// 随机号要全局变量let random = 0// 业务1.开始按钮模块const qs = document.querySelector('.qs')// 1.1 获取开始按钮对象const start = document.querySelector('.start')// 1.2 添加点击事件start.addEventListener('click', function () {timerId = setInterval(function () {// 随机数random = parseInt(Math.random() * arr.length)// console.log(arr[random])qs.innerHTML = arr[random]}, 35)// 如果数组里面只有一个值了，还需要抽取吗？ 不需要 让两个按钮禁用就可以if (arr.length === 1) {// start.disabled = true// end.disabled = truestart.disabled = end.disabled = true}})// 2. 关闭按钮模块const end = document.querySelector('.end')end.addEventListener('click', function () {clearInterval(timerId)// 结束了，可以删除掉当前抽取的那个数组元素arr.splice(random, 1)console.log(arr)})</script>
</body></html>
08-轮播图完整版
<!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>轮播图点击切换</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev"><</button><button class="next">></button></div></div></div><script>// 1. 初始数据const data = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },]// 获取元素const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')const footer = document.querySelector('.slider-footer')// 1. 右按钮业务// 1.1 获取右侧按钮 const next = document.querySelector('.next')let i = 0 // 信号量 控制播放图片张数// 1.2 注册点击事件next.addEventListener('click', function () {// console.log(11)i++// 1.6判断条件 如果大于8 就复原为 0// if (i >= 8) {// i = 0// }i = i >= data.length ? 0 : i// 1.3 得到对应的对象// console.log(data[i])// 调用函数toggle()})// 2. 左侧按钮业务// 2.1 获取左侧按钮 const prev = document.querySelector('.prev')// 1.2 注册点击事件prev.addEventListener('click', function () {i--// 判断条件 如果小于0 则爬到最后一张图片索引号是 7// if (i < 0) {// i = 7// }i = i < 0 ? data.length - 1 : i// 1.3 得到对应的对象// console.log(data[i])// 调用函数toggle()})// 声明一个渲染的函数作为复用function toggle() {// 1.4 渲染对应的数据img.src = data[i].urlp.innerHTML = data[i].titlefooter.style.backgroundColor = data[i].color// 1.5 更换小圆点 先移除原来的类名， 当前li再添加 这个 类名document.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}// 3. 自动播放模块let timerId = setInterval(function () {// 利用js自动调用点击事件 click() 一定加小括号调用函数next.click()}, 1000)// 4. 鼠标经过大盒子，停止定时器const slider = document.querySelector('.slider')// 注册事件slider.addEventListener('mouseenter', function () {// 停止定时器clearInterval(timerId)})// 5. 鼠标离开大盒子，开启定时器// 注册事件slider.addEventListener('mouseleave', function () {// 停止定时器if (timerId) clearInterval(timerId)// 开启定时器timerId = setInterval(function () {// 利用js自动调用点击事件 click() 一定加小括号调用函数next.click()}, 1000)})</script>
</body></html>
09-焦点事件
<!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><input type="text"><script>const input = document.querySelector('input')input.addEventListener('focus', function () {console.log('有焦点触发')})input.addEventListener('blur', function () {console.log('失去焦点触发')})</script>
</body></html>
10-小米搜索框
<!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-sizing: border-box;}ul {list-style: 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 {display: none;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. 获取元素const input = document.querySelector('[type=search]')const ul = document.querySelector('.result-list')// console.log(input)// 2. 监听事件 获得焦点input.addEventListener('focus', function () {// ul显示ul.style.display = 'block'// 添加一个带有颜色边框的类名input.classList.add('search')})// 3. 监听事件 失去焦点input.addEventListener('blur', function () {ul.style.display = 'none'input.classList.remove('search')})</script>
</body></html>
11-键盘事件类型
<!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><input type="text"><script>const input = document.querySelector('input')// 1. 键盘事件// input.addEventListener('keydown', function () {// console.log('键盘按下了')// })// input.addEventListener('keyup', function () {// console.log('键盘谈起了')// })// 2. 用户输入文本事件 inputinput.addEventListener('input', function () {console.log(input.value)})</script>
</body></html>
12-focus选择器
<!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>input {width: 200px;transition: all .3s;}/* focus伪类选择器 获得焦点 */input:focus {width: 300px;}</style>
</head><body><input type="text">
</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>评论回车发布</title><style>.wrapper {min-width: 400px;max-width: 800px;display: flex;justify-content: flex-end;}.avatar {width: 48px;height: 48px;border-radius: 50%;overflow: hidden;background: url(./images/avatar.jpg) no-repeat center / cover;margin-right: 20px;}.wrapper textarea {outline: none;border-color: transparent;resize: none;background: #f5f5f5;border-radius: 4px;flex: 1;padding: 10px;transition: all 0.5s;height: 30px;}.wrapper textarea:focus {border-color: #e4e4e4;background: #fff;height: 50px;}.wrapper button {background: #00aeec;color: #fff;border: none;border-radius: 4px;margin-left: 10px;width: 70px;cursor: pointer;}.wrapper .total {margin-right: 80px;color: #999;margin-top: 5px;opacity: 0;transition: all 0.5s;}.list {min-width: 400px;max-width: 800px;display: flex;}.list .item {width: 100%;display: flex;}.list .item .info {flex: 1;border-bottom: 1px dashed #e4e4e4;padding-bottom: 10px;}.list .item p {margin: 0;}.list .item .name {color: #FB7299;font-size: 14px;font-weight: bold;}.list .item .text {color: #333;padding: 10px 0;}.list .item .time {color: #999;font-size: 12px;}</style>
</head><body><div class="wrapper"><i class="avatar"></i><textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea><button>发布</button></div><div class="wrapper"><span class="total">0/200字</span></div><div class="list"><div class="item" style="display: none;"><i class="avatar"></i><div class="info"><p class="name">清风徐来</p><p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p><p class="time">2022-10-10 20:29:21</p></div></div></div><script>const tx = document.querySelector('#tx')const total = document.querySelector('.total')const item = document.querySelector('.item')const text = document.querySelector('.text')// 1. 当我们文本域获得了焦点，就让 total 显示出来tx.addEventListener('focus', function () {total.style.opacity = 1})// 2. 当我们文本域失去了焦点，就让 total 隐藏出来tx.addEventListener('blur', function () {total.style.opacity = 0})// 3. 检测用户输入tx.addEventListener('input', function () {// console.log(tx.value.length) 得到输入的长度total.innerHTML = `${tx.value.length}/200字`})// 4. 按下回车发布评论tx.addEventListener('keyup', function (e) {// 只有按下的是回车键，才会触发// console.log(e.key)if (e.key === 'Enter') {// 如果用户输入的不为空就显示和打印if (tx.value.trim()) {// console.log(11)item.style.display = 'block'// console.log(tx.value) // 用户输入的内容text.innerHTML = tx.value}// 等我们按下回车，结束，清空文本域tx.value = ''// 按下回车之后，就要把 字符统计 复原total.innerHTML = '0/200字'}})</script>
</body></html>
16-trim方法
<!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><textarea name="" id="" cols="30" rows="10"></textarea><script>const str = ' im a teacher '// console.log(str.trim()) // 去除字符串左右的空格const tx = document.querySelector('textarea')tx.addEventListener('keyup', function (e) {// console.log(tx.value)if (e.key === 'Enter') {// console.log(tx.value)console.log(tx.value.trim() === '')}})</script>
</body></html>
18-tab栏切换
<!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>tab栏切换</title><style>* {margin: 0;padding: 0;}.tab {width: 590px;height: 340px;margin: 20px;border: 1px solid #e4e4e4;}.tab-nav {width: 100%;height: 60px;line-height: 60px;display: flex;justify-content: space-between;}.tab-nav h3 {font-size: 24px;font-weight: normal;margin-left: 20px;}.tab-nav ul {list-style: none;display: flex;justify-content: flex-end;}.tab-nav ul li {margin: 0 20px;font-size: 14px;}.tab-nav ul li a {text-decoration: none;border-bottom: 2px solid transparent;color: #333;}.tab-nav ul li a.active {border-color: #e1251b;color: #e1251b;}.tab-content {padding: 0 16px;}.tab-content .item {display: none;}.tab-content .item.active {display: block;}</style>
</head><body><div class="tab"><div class="tab-nav"><h3>每日特价</h3><ul><li><a class="active" href="javascript:;">精选</a></li><li><a href="javascript:;">美食</a></li><li><a href="javascript:;">百货</a></li><li><a href="javascript:;">个护</a></li><li><a href="javascript:;">预告</a></li></ul></div><div class="tab-content"><div class="item active"><img src="./images/tab00.png" alt="" /></div><div class="item"><img src="./images/tab01.png" alt="" /></div><div class="item"><img src="./images/tab02.png" alt="" /></div><div class="item"><img src="./images/tab03.png" alt="" /></div><div class="item"><img src="./images/tab04.png" alt="" /></div></div></div><script>// 1. a 模块制作 要给 5个链接绑定鼠标经过事件// 1.1 获取 a 元素 const as = document.querySelectorAll('.tab-nav a')// console.log(as) for (let i = 0; i < as.length; i++) {// console.log(as[i])// 要给 5个链接绑定鼠标经过事件as[i].addEventListener('mouseenter', function () {// console.log('鼠标经过')// 排他思想 // 干掉别人 移除类activedocument.querySelector('.tab-nav .active').classList.remove('active')// 我登基 我添加类 active this 当前的那个 a this.classList.add('active')// 下面5个大盒子 一一对应 .item // 干掉别人document.querySelector('.tab-content .active').classList.remove('active')// 对应序号的那个 item 显示 添加 active 类document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')})}</script>
</body></html>
web APIs第三天
01-全选按钮案例
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></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. 获取大复选框const checkAll = document.querySelector('#checkAll')// 2. 获取所有的小复选框const cks = document.querySelectorAll('.ck')// 3. 点击大复选框 注册事件checkAll.addEventListener('click', function () {// 得到当前大复选框的选中状态// console.log(checkAll.checked) // 得到 是 true 或者是 false// 4. 遍历所有的小复选框 让小复选框的checked = 大复选框的 checkedfor (let i = 0; i < cks.length; i++) {cks[i].checked = this.checked}})// 5. 小复选框控制大复选框for (let i = 0; i < cks.length; i++) {// 5.1 给所有的小复选框添加点击事件cks[i].addEventListener('click', function () {// 判断选中的小复选框个数 是不是等于 总的小复选框个数// 一定要写到点击里面，因为每次要获得最新的个数// console.log(document.querySelectorAll('.ck:checked').length)// console.log(document.querySelectorAll('.ck:checked').length === cks.length)checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length})}</script>
</body></html>
02-css伪类选择器checked
<!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>/* 选择被勾选的复选框 */.ck:checked {width: 20px;height: 20px;}</style>
</head><body><input type="checkbox" name="" id="" class="ck"><input type="checkbox" name="" id="" class="ck"><input type="checkbox" name="" id="" class="ck"><input type="checkbox" name="" id="" class="ck">
</body></html>
04-事件冒泡
<!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>.father {width: 500px;height: 500px;background-color: pink;}.son {width: 200px;height: 200px;background-color: purple;}</style>
</head><body><div class="father"><div class="son"></div></div><script>const fa = document.querySelector('.father')const son = document.querySelector('.son')// 山东 济南 蓝翔 目标（pink老师） 捕获阶段// 蓝翔 济南 山东 冒泡阶段document.addEventListener('click', function () {alert('我是爷爷')})fa.addEventListener('click', function () {alert('我是爸爸')})son.addEventListener('click', function (e) {alert('我是儿子')// 组织流动传播 事件对象.stopPropagation()e.stopPropagation()})</script>
</body></html>
05-事件解绑
无页面
<!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>点击</button><script>const btn = document.querySelector('button')// btn.onclick = function () {// alert('点击了')// // L0 事件移除解绑// btn.onclick = null// }function fn() {alert('点击了')}btn.addEventListener('click', fn)// L2 事件移除解绑btn.removeEventListener('click', fn)</script>
</body></html>
06-mouseover和mouseenter的区别
<!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>.dad {width: 400px;height: 400px;background-color: pink;}.baby {width: 200px;height: 200px;background-color: purple;}</style>
</head><body><div class="dad"><div class="baby"></div></div><script>const dad = document.querySelector('.dad')const baby = document.querySelector('.baby')dad.addEventListener('mouseenter', function () {console.log('鼠标经过')})dad.addEventListener('mouseleave', function () {console.log('鼠标离开')})</script>
</body></html>
07-事件委托
<!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><ul><li>第1个孩子</li><li>第2个孩子</li><li>第3个孩子</li><li>第4个孩子</li><li>第5个孩子</li><p>我不需要变色</p></ul><script>// 点击每个小li 当前li 文字变为红色// 按照事件委托的方式 委托给父级，事件写到父级身上// 1. 获得父元素const ul = document.querySelector('ul')ul.addEventListener('click', function (e) {// alert(11)// this.style.color = 'red'// console.dir(e.target) // 就是我们点击的那个对象// e.target.style.color = 'red'// 我的需求，我们只要点击li才会有效果if (e.target.tagName === 'LI') {e.target.style.color = 'red'}})</script>
</body></html>
08-tab栏切换
<!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>tab栏切换</title><style>* {margin: 0;padding: 0;}.tab {width: 590px;height: 340px;margin: 20px;border: 1px solid #e4e4e4;}.tab-nav {width: 100%;height: 60px;line-height: 60px;display: flex;justify-content: space-between;}.tab-nav h3 {font-size: 24px;font-weight: normal;margin-left: 20px;}.tab-nav ul {list-style: none;display: flex;justify-content: flex-end;}.tab-nav ul li {margin: 0 20px;font-size: 14px;}.tab-nav ul li a {text-decoration: none;border-bottom: 2px solid transparent;color: #333;}.tab-nav ul li a.active {border-color: #e1251b;color: #e1251b;}.tab-content {padding: 0 16px;}.tab-content .item {display: none;}.tab-content .item.active {display: block;}</style>
</head><body><div class="tab"><div class="tab-nav"><h3>每日特价</h3><ul><li><a class="active" href="javascript:;" data-id="0">精选</a></li><li><a href="javascript:;" data-id="1">美食</a></li><li><a href="javascript:;" data-id="2">百货</a></li><li><a href="javascript:;" data-id="3">个护</a></li><li><a href="javascript:;" data-id="4">预告</a></li></ul></div><div class="tab-content"><div class="item active"><img src="./images/tab00.png" alt="" /></div><div class="item"><img src="./images/tab01.png" alt="" /></div><div class="item"><img src="./images/tab02.png" alt="" /></div><div class="item"><img src="./images/tab03.png" alt="" /></div><div class="item"><img src="./images/tab04.png" alt="" /></div></div></div><script>// 采取事件委托的形式 tab栏切换// 1. 获取 ul 父元素 因为 ul只有一个const ul = document.querySelector('.tab-nav ul')// 获取 5个 item const items = document.querySelectorAll('.tab-content .item')// 2. 添加事件ul.addEventListener('click', function (e) {// console.log(e.target) // e.target是我们点击的对象// 我们只有点击了 a 才会 进行 添加类和删除类操作 // console.log(e.target.tagName) // e.target.tagName 点击那个对象的 标签名if (e.target.tagName === 'A') {// console.log('我选的是a')// 排他思想 ，先移除原来的active document.querySelector('.tab-nav .active').classList.remove('active')//当前元素添加 active 是 e.target// this 指向ul 不能用this e.target.classList.add('active')// 下面大盒子模块// console.log(e.target.dataset.id)const i = +e.target.dataset.id// 排他思想 ，先移除原来的active document.querySelector('.tab-content .active').classList.remove('active')// 对应的大盒子 添加 active // document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')items[i].classList.add('active')}})</script>
</body></html>
09-自定义属性
无页面
<!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><div data-id="0"></div><script>const div = document.querySelector('div')console.log(div.dataset.id) // 0 </script>
</body></html>
10-阻止默认行为
<!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><form action="http://www.itcast.cn"><input type="submit" value="免费注册"></form><a href="http://www.baidu.com">百度一下</a><script>const form = document.querySelector('form')form.addEventListener('submit', function (e) {// 阻止默认行为 提交e.preventDefault()})const a = document.querySelector('a')a.addEventListener('click', function (e) {e.preventDefault()})</script>
</body></html>
11-页面加载事件
<!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><script>// 等待页面所有资源加载完毕，就回去执行回调函数// window.addEventListener('load', function () {// const btn = document.querySelector('button')// btn.addEventListener('click', function () {// alert(11)// })// })// img.addEventListener('load', function () {// // 等待图片加载完毕，再去执行里面的代码// })document.addEventListener('DOMContentLoaded', function () {const btn = document.querySelector('button')btn.addEventListener('click', function () {alert(11)})})</script>
</head><body><button>点击</button></body></html>
12-页面滚动事件
<!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-top: 100px;height: 3000px;}div {display: none;margin: 100px;overflow: scroll;width: 200px;height: 200px;border: 1px solid #000;}</style>
</head><body><div>我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字</div><script>const div = document.querySelector('div')// 页面滚动事件window.addEventListener('scroll', function () {// console.log('我滚了')// 我想知道页面到底滚动了多少像素， 被卷去了多少 scrollTop// 获取html元素写法 // document.documentElement // console.log(document.documentElement.scrollTop)const n = document.documentElement.scrollTopif (n >= 100) {div.style.display = 'block'} else {div.style.display = 'none'}})// const div = document.querySelector('div')// div.addEventListener('scroll', function () {// // console.log(111)// // scrollTop 被卷去的头部// console.log(div.scrollTop)// })</script>
</body></html>
13-scrollTop细节
<!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 {height: 3000px;}</style>
</head><body><script>document.documentElement.scrollTop = 800window.addEventListener('scroll', function () {// 必须写到里面const n = document.documentElement.scrollTop// 得到是什么数据 数字型 不带单位console.log(n)})</script>
</body></html>
14-页面尺寸事件
<!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 {display: inline-block;/* width: 200px; */height: 200px;background-color: pink;padding: 10px;border: 20px solid red;}</style>
</head><body><div>123123123123123123123123123123123123123</div><script>const div = document.querySelector('div')console.log(div.clientWidth)// resize 浏览器窗口大小发生变化的时候触发的事件window.addEventListener('resize', function () {console.log(1)})</script>
</body></html>
15-offsetLeft
<!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 {position: relative;width: 200px;height: 200px;background-color: pink;margin: 100px;}p {width: 100px;height: 100px;background-color: purple;margin: 50px;}</style>
</head><body><div><p></p></div><script>const div = document.querySelector('div')const p = document.querySelector('p')// console.log(div.offsetLeft)// 检测盒子的位置 最近一级带有定位的祖先元素console.log(p.offsetLeft)</script>
</body></html>
16-仿新浪固定头部
<!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-sizing: border-box;}.content {overflow: hidden;width: 1000px;height: 3000px;background-color: pink;margin: 0 auto;}.backtop {display: none;width: 50px;left: 50%;margin: 0 0 0 505px;position: fixed;bottom: 60px;z-index: 100;}.backtop a {height: 50px;width: 50px;background: url(./images/bg2.png) 0 -600px no-repeat;opacity: 0.35;overflow: hidden;display: block;text-indent: -999em;cursor: pointer;}.header {position: fixed;top: -80px;left: 0;width: 100%;height: 80px;background-color: purple;text-align: center;color: #fff;line-height: 80px;font-size: 30px;transition: all .3s;}.sk {width: 300px;height: 300px;background-color: skyblue;margin-top: 500px;}</style>
</head><body><div class="header">我是顶部导航栏</div><div class="content"><div class="sk">秒杀模块</div></div><div class="backtop"><img src="./images/close2.png" alt=""><a href="javascript:;"></a></div><script>const sk = document.querySelector('.sk')const header = document.querySelector('.header')// 1. 页面滚动事件window.addEventListener('scroll', function () {// 当页面滚动到 秒杀模块的时候，就改变 头部的 top值// 页面被卷去的头部 >= 秒杀模块的位置 offsetTopconst n = document.documentElement.scrollTop// if (n >= sk.offsetTop) {// header.style.top = 0// } else {// header.style.top = '-80px'// }header.style.top = n >= sk.offsetTop ? 0 : '-80px'})</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>/* input[value] {color: red;} */input[type=text] {color: red;}</style>
</head><body><input type="text" value="123" data-id="0" data-name="andy"><input type="password"><script>const input = document.querySelector('input[value]')// console.log(input)console.log(input.dataset) // 自定义属性集合console.log(input.dataset.name) // 自定义属性集合</script>
</body></html>
电梯导航
<script>// 第一大模块，页面滑动可以显示和隐藏(function () {// 获取元素const entry = document.querySelector('.xtx_entry')const elevator = document.querySelector('.xtx-elevator')// 1. 当页面滚动大于 300像素，就显示 电梯导航// 2. 给页面添加滚动事件window.addEventListener('scroll', function () {// 被卷去的头部大于 300 const n = document.documentElement.scrollTop// if (n >= 300) {// elevator.style.opacity = 1// } else {// elevator.style.opacity = 0// }// 简写elevator.style.opacity = n >= entry.offsetTop ? 1 : 0})// 点击返回页面顶部const backTop = document.querySelector('#backTop')backTop.addEventListener('click', function () {// 可读写// document.documentElement.scrollTop = 0// window.scrollTo(x, y)window.scrollTo(0, 0)})})();// 第二第三都放到另外一个执行函数里面(function () {// 2. 点击页面可以滑动 const list = document.querySelector('.xtx-elevator-list')list.addEventListener('click', function (e) {// console.log(11)if (e.target.tagName === 'A' && e.target.dataset.name) {// 排他思想 // 先移除原来的类active // 先获取这个active的对象const old = document.querySelector('.xtx-elevator-list .active')// console.log(old)// 判断 如果原来有active类的对象，就移除类，如果开始就没有对象，就不删除，所以不报错if (old) old.classList.remove('active')// 当前元素添加 active e.target.classList.add('active')// 获得自定义属性 new topic // console.log(e.target.dataset.name)// 根据小盒子的自定义属性值 去选择 对应的大盒子// console.log(document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop)// 获得对应大盒子的 offsetTopconst top = document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop// 让页面滚动到对应的位置document.documentElement.scrollTop = top}})// 3. 页面滚动，可以根据大盒子选 小盒子 添加 active 类window.addEventListener('scroll', function () {// 3.1 先移除类 // 先获取这个active的对象const old = document.querySelector('.xtx-elevator-list .active')// console.log(old)// 判断 如果原来有active类的对象，就移除类，如果开始就没有对象，就不删除，所以不报错if (old) old.classList.remove('active')// 3.2 判断页面当前滑动的位置，选择小盒子// 获取4个大盒子const news = document.querySelector('.xtx_goods_new')const popular = document.querySelector('.xtx_goods_popular')const brand = document.querySelector('.xtx_goods_brand')const topic = document.querySelector('.xtx_goods_topic')const n = document.documentElement.scrollTopif (n >= news.offsetTop && n < popular.offsetTop) {// 选择第一个小盒子document.querySelector('[data-name=new]').classList.add('active')} else if (n >= popular.offsetTop && n < brand.offsetTop) {document.querySelector('[data-name=popular]').classList.add('active')} else if (n >= brand.offsetTop && n < topic.offsetTop) {document.querySelector('[data-name=brand]').classList.add('active')} else if (n >= topic.offsetTop) {document.querySelector('[data-name=topic]').classList.add('active')}})})();// let n = 10// n = 20</script>m-bilibili
<!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>bilibili-干杯~~~</title><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 引入css文件 --><link rel="stylesheet" href="./css/index.css"><!-- 引入字体图标文件 --><link rel="stylesheet" href="./fonts/iconfont.css">
</head><body><!-- 头部模块 --><header class="suspension"><div class="m-navbar"><!-- logo --><a href="#" class="logo"><i class="iconfont Navbar_logo"></i></a><!-- 右侧 --><div class="right"><a href="#" class="search"><i class="iconfont ic_search_tab"></i></a><a href="#" class="face"><img src="./images/login.png" alt=""></a><div class="app-btn"><img src="./images/download.png" alt=""></div></div></div><div class="channel-menu"><div class="tabs"><!-- 很宽的盒子 --><div class="tabs-list"><a href="#">首页</a><a href="#">动画</a><a href="#">番剧</a><a href="#">果蔬</a><a href="#">音乐</a><a href="#">舞蹈</a><a href="#">鬼畜</a><a href="#">吹鬼</a><!-- 红色线 --><div class="line"></div></div></div><div class="after"><i class="iconfont general_pulldown_s"></i></div></div></header><!-- 主体部分 --><div class="m-home"><div class="video-list"><a href="#" class="video-item"><div class="card"><img src="./images/dog.jpg@480w_270h_1c" alt=""><!-- 播放量 --><div class="count"><span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span><span><i class="iconfont icon_shipin_danmushu"></i>评论数</span></div></div><p class="title ellipsis-2">315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】</p></a><a href="#" class="video-item"><div class="card"><img src="./images/dog.jpg@480w_270h_1c" alt=""><!-- 播放量 --><div class="count"><span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span><span><i class="iconfont icon_shipin_danmushu"></i>评论数</span></div></div><p class="title ellipsis-2">315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】</p></a><a href="#" class="video-item"><div class="card"><img src="./images/dog.jpg@480w_270h_1c" alt=""><!-- 播放量 --><div class="count"><span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span><span><i class="iconfont icon_shipin_danmushu"></i>评论数</span></div></div><p class="title ellipsis-2">315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】</p></a><a href="#" class="video-item"><div class="card"><img src="./images/dog.jpg@480w_270h_1c" alt=""><!-- 播放量 --><div class="count"><span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span><span><i class="iconfont icon_shipin_danmushu"></i>评论数</span></div></div><p class="title ellipsis-2">315晚会能不能曝光下电视？</p></a><a href="#" class="video-item"><div class="card"><img src="./images/dog.jpg@480w_270h_1c" alt=""><!-- 播放量 --><div class="count"><span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span><span><i class="iconfont icon_shipin_danmushu"></i>评论数</span></div></div><p class="title ellipsis-2">315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】</p></a><a href="#" class="video-item"><div class="card"><img src="./images/dog.jpg@480w_270h_1c" alt=""><!-- 播放量 --><div class="count"><span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span><span><i class="iconfont icon_shipin_danmushu"></i>评论数</span></div></div><p class="title ellipsis-2">315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】</p></a><a href="#" class="video-item"><div class="card"><img src="./images/dog.jpg@480w_270h_1c" alt=""><!-- 播放量 --><div class="count"><span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span><span><i class="iconfont icon_shipin_danmushu"></i>评论数</span></div></div><p class="title ellipsis-2">315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】</p></a><a href="#" class="video-item"><div class="card"><img src="./images/dog.jpg@480w_270h_1c" alt=""><!-- 播放量 --><div class="count"><span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span><span><i class="iconfont icon_shipin_danmushu"></i>评论数</span></div></div><p class="title ellipsis-2">315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】</p></a><a href="#" class="video-item"><div class="card"><img src="./images/dog.jpg@480w_270h_1c" alt=""><!-- 播放量 --><div class="count"><span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span><span><i class="iconfont icon_shipin_danmushu"></i>评论数</span></div></div><p class="title ellipsis-2">315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】</p></a><a href="#" class="video-item"><div class="card"><img src="./images/dog.jpg@480w_270h_1c" alt=""><!-- 播放量 --><div class="count"><span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span><span><i class="iconfont icon_shipin_danmushu"></i>评论数</span></div></div><p class="title ellipsis-2">315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】</p></a><a href="#" class="video-item"><div class="card"><img src="./images/dog.jpg@480w_270h_1c" alt=""><!-- 播放量 --><div class="count"><span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span><span><i class="iconfont icon_shipin_danmushu"></i>评论数</span></div></div><p class="title ellipsis-2">315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】</p></a></div></div><!-- 底部模块 --><footer class="app"><div class="btn-app"><i class="iconfont Navbar_logo"></i>打开App，看你感兴趣的视频</div></footer><script>// 1. 事件委托的方法 获取父元素 tabs-listconst list = document.querySelector('.tabs-list')const line = document.querySelector('.line')// 2. 注册点击事件list.addEventListener('click', function (e) {// 只有点击了A 才有触发效果if (e.target.tagName === 'A') {// console.log(11)// 当前元素是谁 ？ e.target// 得到当前点击元素的位置// console.log(e.target.offsetLeft)// line.style.transform = 'translateX(100px)'// 把我们点击的a链接盒子的位置 然后移动line.style.transform = `translateX(${e.target.offsetLeft}px)`}})</script>
</body></html>
web APIs 第四天
03-显示格式化的时间
<!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: 300px;height: 40px;border: 1px solid pink;text-align: center;line-height: 40px;}</style>
</head><body><div></div><script>const div = document.querySelector('div')function getMyDate() {const date = new Date()let h = date.getHours()let m = date.getMinutes()let s = date.getSeconds()h = h < 10 ? '0' + h : hm = m < 10 ? '0' + m : ms = s < 10 ? '0' + s : sreturn `今天是: ${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}号 ${h}:${m}:${s}`}div.innerHTML = getMyDate()setInterval(function () {div.innerHTML = getMyDate()}, 1000)</script>
</body></html>
04-时间的另外一个写法
<!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: 300px;height: 40px;border: 1px solid pink;text-align: center;line-height: 40px;}</style>
</head><body><div></div><script>const div = document.querySelector('div')// 得到日期对象const date = new Date()div.innerHTML = date.toLocaleString() // 2022/4/1 09:41:21setInterval(function () {const date = new Date()div.innerHTML = date.toLocaleString() // 2022/4/1 09:41:21}, 1000)// div.innerHTML = date.toLocaleDateString() // 2022/4/1// div.innerHTML = date.toLocaleTimeString() // 2022/4/1</script>
</body></html>
06-倒计时
<!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>.countdown {width: 240px;height: 305px;text-align: center;line-height: 1;color: #fff;background-color: brown;/* background-size: 240px; *//* float: left; */overflow: hidden;}.countdown .next {font-size: 16px;margin: 25px 0 14px;}.countdown .title {font-size: 33px;}.countdown .tips {margin-top: 80px;font-size: 23px;}.countdown small {font-size: 17px;}.countdown .clock {width: 142px;margin: 18px auto 0;overflow: hidden;}.countdown .clock span,.countdown .clock i {display: block;text-align: center;line-height: 34px;font-size: 23px;float: left;}.countdown .clock span {width: 34px;height: 34px;border-radius: 2px;background-color: #303430;}.countdown .clock i {width: 20px;font-style: normal;}</style>
</head><body><div class="countdown"><p class="next">今天是2222年2月22日</p><p class="title">下班倒计时</p><p class="clock"><span id="hour">00</span><i>:</i><span id="minutes">25</span><i>:</i><span id="scond">20</span></p><p class="tips">18:30:00下课</p></div><script>// 随机颜色函数// 1. 自定义一个随机颜色函数function getRandomColor(flag = true) {if (flag) {// 3. 如果是true 则返回 #fffffflet str = '#'let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']// 利用for循环随机抽6次 累加到 str里面for (let i = 1; i <= 6; i++) {// 每次要随机从数组里面抽取一个 // random 是数组的索引号 是随机的let random = Math.floor(Math.random() * arr.length)// str = str + arr[random]str += arr[random]}return str} else {// 4. 否则是 false 则返回 rgb(255,255,255)let r = Math.floor(Math.random() * 256) // 55let g = Math.floor(Math.random() * 256) // 89let b = Math.floor(Math.random() * 256) // 255return `rgb(${r},${g},${b})`}}// 页面刷新随机得到颜色const countdown = document.querySelector('.countdown')countdown.style.backgroundColor = getRandomColor()// 函数封装 getCountTimefunction getCountTime() {// 1. 得到当前的时间戳const now = +new Date()// 2. 得到将来的时间戳const last = +new Date('2024-4-1 18:30:00')// console.log(now, last)// 3. 得到剩余的时间戳 count 记得转换为 秒数const count = (last - now) / 1000// console.log(count)// 4. 转换为时分秒// h = parseInt(总秒数 / 60 / 60 % 24) // 计算小时// m = parseInt(总秒数 / 60 % 60); // 计算分数// s = parseInt(总秒数 % 60); // let d = parseInt(count / 60 / 60 / 24) // 计算当前秒数let h = parseInt(count / 60 / 60 % 24)h = h < 10 ? '0' + h : hlet m = parseInt(count / 60 % 60)m = m < 10 ? '0' + m : mlet s = parseInt(count % 60)s = s < 10 ? '0' + s : sconsole.log(h, m, s)// 5. 把时分秒写到对应的盒子里面document.querySelector('#hour').innerHTML = hdocument.querySelector('#minutes').innerHTML = mdocument.querySelector('#scond').innerHTML = s}// 先调用一次getCountTime()// 开启定时器setInterval(getCountTime, 1000)</script>
</body></html>
07-父节点
<!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><div class="yeye"><div class="dad"><div class="baby">x</div></div></div><script>const baby = document.querySelector('.baby')console.log(baby) // 返回dom对象console.log(baby.parentNode) // 返回dom对象console.log(baby.parentNode.parentNode) // 返回dom对象</script>
</body></html>
08-点击关闭
李伟兴 09:31: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>.box {position: relative;width: 1000px;height: 200px;background-color: pink;margin: 100px auto;text-align: center;font-size: 50px;line-height: 200px;font-weight: 700;}.box1 {position: absolute;right: 20px;top: 10px;width: 20px;height: 20px;background-color: skyblue;text-align: center;line-height: 20px;font-size: 16px;cursor: pointer;}</style>
</head><body><div class="box">我是广告<div class="box1">X</div></div><div class="box">我是广告<div class="box1">X</div></div><div class="box">我是广告<div class="box1">X</div></div><script>// // 1. 获取事件源// const box1 = document.querySelector('.box1')// // 2. 事件侦听// box1.addEventListener('click', function () {// this.parentNode.style.display = 'none'// })// 1. 获取三个关闭按钮const closeBtn = document.querySelectorAll('.box1')for (let i = 0; i < closeBtn.length; i++) {closeBtn[i].addEventListener('click', function () {// 关闭我的爸爸 所以只关闭当前的父元素this.parentNode.style.display = 'none'})}</script>
</body></html>
09-子节点
<!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><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>// const ul = document.querySelector('ul') // ul// console.log(ul.children) // 得到伪数组 选择的是 亲儿子 const li2 = document.querySelector('ul li:nth-child(2)')console.log(li2.previousElementSibling) // 上一个兄弟console.log(li2.nextElementSibling) // 下一个兄弟</script>
</body></html>
10-增加节点
<!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><ul><li>我是老大</li></ul><script>// // 1. 创建节点// const div = document.createElement('div')// // console.log(div)// 2. 追加节点 作为最后一个子元素// document.body.appendChild(div)const ul = document.querySelector('ul')const li = document.createElement('li')li.innerHTML = '我是li'// ul.appendChild(li)// ul.children// 3. 追加节点// insertBefore(插入的元素, 放到哪个元素的前面)ul.insertBefore(li, ul.children[0])</script>
</body></html>
11-克隆节点
<!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><ul><li>1</li><li>2</li><li>3</li></ul><script>const ul = document.querySelector('ul')// 1 克隆节点 元素.cloneNode(true)// const li1 = ul.children[0].cloneNode(true)// console.log(li1)// 2. 追加ul.appendChild(ul.children[0].cloneNode(true))</script>
</body></html>
12-删除节点
没有页面
<!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>.box {display: none;}</style>
</head><body><div class="box">123</div><ul><li>没用了</li></ul><script>const ul = document.querySelector('ul')// 删除节点 父元素.removeChlid(子元素)ul.removeChild(ul.children[0])</script>
</body></html>
13-m端事件
<!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: 300px;height: 300px;background-color: pink;}</style>
</head><body><div></div><script>const div = document.querySelector('div')// 1. 触摸div.addEventListener('touchstart', function () {console.log('开始摸我了')})// 2. 离开div.addEventListener('touchend', function () {console.log('离开了')})// 3. 移动div.addEventListener('touchmove', function () {console.log('一直摸，移动')})</script>
</body></html>
14-移动端轮播图
<!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><link rel="stylesheet" href="./css/swiper.min.css"><style>.box {position: relative;width: 800px;height: 300px;background-color: pink;margin: 100px auto;}html,body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}.swiper {overflow: hidden;width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}</style></head><body><div class="box"><!-- Swiper --><div class="swiper mySwiper"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div><div class="swiper-slide">Slide 4</div><div class="swiper-slide">Slide 5</div><div class="swiper-slide">Slide 6</div><div class="swiper-slide">Slide 7</div><div class="swiper-slide">Slide 8</div><div class="swiper-slide">Slide 9</div></div><div class="swiper-pagination"></div></div></div><script src="./js/swiper.min.js"></script><script>var swiper = new Swiper(".mySwiper", {// 小圆点pagination: {el: ".swiper-pagination",},// 自动播放autoplay: {delay: 1000,//1秒切换一次disableOnInteraction: false, // 鼠标点击 触摸之后，自动继续播放},// 可以键盘控制keyboard: {enabled: true,onlyInViewport: true,},});</script>
</body></html>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
相关文章：
【黑马程序员前端】JavaScript入门到精通--20230801
B站链接 理论 HTML相关知识【黑马程序员前端】 https://blog.csdn.net/m0_48964052/article/details/125951658 CSS相关知识【黑马程序员前端】 https://blog.csdn.net/m0_48964052/article/details/125951788 黑马程序员——JavaScript基础1（初识 JavaS…...
100道Java多线程面试题（上）
线程创建方式？ 线程有哪些基本状态? 如何停止一个正在运行的线程？ 有三个线程T1,T2,T3,如何保证顺序执行？ 在线程中你怎么处理不可控制异常？ 如何创建线程池？ 以下情况如何使用线程池？高并发、任务时间短;…...
web开发中的安全和防御入门——csp (content-security-policy内容安全策略)
偶然碰到iframe跨域加载被拒绝的问题，原因是父页面默认不允许加载跨域的子页面，也就是的content-security-policy中没有设置允许跨域加载。 简单地说，content-security-policy能限制页面允许和不允许加载的所有资源，常见的包括&a…...
定了！全国2023下半年软考（高级、中级、初级）报名时间汇总
截止到2023年8月2日，有以下地区公布了软考报名时间： 安徽软考2023下半年报名时间：8月15日9:00至8月21日16:00 黑龙江软考2023下半年报名时间：8月16日至8月22日 甘肃软考2023下半年报名时间：8月28日9:00至9月6日18:00…...
Linux下安装配置Redis
文章目录 安装依赖库上传安装包并解压 启动默认启动指定配置启动开机自启 安装 依赖库 Redis是基于C语言编写的，因此首先需要安装Redis所需要的gcc依赖： yum install -y gcc tcl上传安装包并解压 将Redis安装包上传到服务器的任意目录，例…...
深度学习（33）——CycleGAN（2）
深度学习（33）——CycleGAN（2） 完整项目在在这里：欢迎造访 文章目录 深度学习（33）——CycleGAN（2）1. Generator2. Discriminator3. fake pool4. loss定义5. 模型参数量6…...
WeakMap and WeakSet（弱映射和弱集合）
在垃圾回收中了解JavaScript 引擎在值“可达”和可能被使用时会将其保持在内存中 let john { name: "John" }; // 该对象能被访问，john 是它的引用 // 覆盖引用 john null; // 该对象将会被从内存中清除通常，当对象、数组之类的数据结构在内…...
【Vue3基础】组件保持存活、异步加载组件
一、组件保持存活 1、需求描述 点击按钮跳转到其他组件后，原组件不会被销毁 2、知识整理 1）组件生命周期 创建期：beforeCreate、created 挂载期：beforeMount、mounted 更新期：beforeUpdate、updated 销毁期&am…...
在 3ds Max 中使用相机映射将静止图像转换为实时素材
推荐： NSDT场景编辑器 助你快速搭建可二次开发的3D应用场景 1. 在 Photoshop 中准备图像 步骤 1 这是我将在教程中使用的静止图像。 这是我的静态相机纸箱的快照。 静止图像 步骤 2 打开 Photoshop。将图像导入 Photoshop。 打开 Photoshop 步骤 3 单击套索工…...
如何使用GIL解决Python多线程性能瓶颈
如何使用GIL解决Python多线程性能瓶颈 引言： Python是一种使用广泛的编程语言，但其在多线程方面存在一个性能瓶颈，即全局解释器锁（Global Interpreter Lock，简称GIL）。GIL会限制Python的多线程并行能力&am…...
k8s概念-深入pod
回到目录 工作负载（workloads） 工作负载（workload）是在kubernetes集群中运行的应用程序。无论你的工作负载是单一服务还是多个一同工作的服务构成，在kubernetes中都可以使用pod来运行它 workloads分为pod与control…...
Web服务器实验案例
目录 关闭或放行防火墙和selinux 1 搭建静态网站 2 建立两个基于ip地址访问的网站 思路： 简单配置 编写httpd额外文件 3 建立两个基于不同端口访问的网站 思路 创建文件（与之前一致） 额外文件配置 4 基于虚拟目录和用户控制的web网…...
预警 项目经验BUG
文章目录 定时任务 定时任务 在方法上使用Scheduled注解 cron参数： cron是一个表达式，最多接收7个参数从左到右分别表示：秒 分 时 天 月 周 年参数以空格隔开，其中年不是必须参数，可以省略。示例：Schedule…...
基于RFID技术的猪舍门读卡器
随着科技的发展和普及，智能化管理在各个领域的应用越来越广泛。在畜牧业中，将RFID技术应用在养殖管理中的企业也越来越多，为养殖企业的智能化管理提供了有力的支持，本文将介绍RFID技术的猪舍门读卡器的应用。 一、RFID技术简介 …...
亚马逊店铺的回款周期是多久？
现如今，开亚马逊店铺可是一个技术活，一旦有一个环节，或者是一件事情没有做好，对整个亚马逊店铺过程中影响都是十分巨大的，不少亚马逊卖家就吃过这方面的亏。 很多亚马逊卖家就是吃亏在这些方面，现在要想开…...
剑指offer19.正则表达式
这道题我一看就有印象，我室友算法课设抽到这题，他当时有个bug让我帮他看一下，然后我就大概看了一下他的算法，他是用动态规划写的，用了一个二维数组，然后我就试着按照这个思路去写，想了一会还是没…...
Mac Navicat 16试用脚本
一、无限试用脚本如下 #!/bin/bash #/usr/libexec/PlistBuddy -c "print" ~/Library/Preferences/com.navicat.NavicatPremium.plist /usr/libexec/PlistBuddy -c "Delete :91F6C435D172C8163E0689D3DAD3F3E9" ~/Library/Preferences/com.navicat.Navica…...
什么是 webpack？
Webpack 介绍 什么是 webpack？ :::tip 官方描述 webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个…...
#B. 费解的开关
题目描述 你玩过“拉灯”游戏吗？2525盏灯排成一个5x55x5的方形。每一个灯都有一个开关，游戏者可以改变它的状态。每一步，游戏者可以改变某一个灯的状态。游戏者改变一个灯的状态会产生连锁反应：和这个灯上下左右相邻的灯也要相应…...
Docker离线安装
Docker离线安装 一、安装步骤 1. 下载 Docker 二进制文件（离线安装包） 下载地址：https://download.docker.com/linux/static/stable/x86_64/ 注：本文使用 /x86_64/docker-18.06.1-ce.tgz，注意对应操作系统类型。 2.…...
React高阶学习（二）
目录 1. 基本概念和语法2. 组件化开发3. 状态管理4. 生命周期钩子5. 条件渲染6. 循环渲染7. 事件处理8. 组件间通信9. 动画效果10. 模块化开发 1. 基本概念和语法 React 是基于 JavaScript 的库，用于构建用户界面。它采用虚拟 DOM 技术，能够高效地渲染页…...
C语言中的字符串输入操作详解
C语言输入字符串详解 目录 介绍使用scanf_s输入字符串scanf_s的限制和问题解决输入空格的方法——使用gets_s函数gets_s函数的注意事项示例代码演示总结 1. 介绍 在C语言中，输入字符串是常见的操作。本篇博客将详细讨论在C语言中输入字符串的方法。我们将使用s…...
C高级 DAY1
1.思维导图 二、 网络配置 更新资源库 在线下载 卸载安装包 离线下载 离线安装包卸载 cat echo head tail 管道符 字体变色 find file grep cut 截取字符 chown ln硬链接 软链接 压缩、解压缩 打包并压缩，解压缩...
centos7 默认路由顺序调整（IPV4_ROUTE_METRIC）
1、问题说明 A服务器有两张网卡，A1对应公网，A2对应私网，公网访问时，访问异常，内网访问服务则显示正常。 问题判断：数据包从公网进来时，路由无需判断，但数据包出去时，有…...
STM32 DMA学习
DMA简称 DMA，Direct Memory Access，即直接存储器访问。DMA传输方式无需CPU直接控制传输，也没有中断处理方式那样保留现场和恢复现场的过程，通过硬件为RAM与I/O设备开辟一条直接传送数据的通路，能使CPU的效率大为提高。…...
32.利用fmincon 解决 最小费用问题（matlab程序）
1.简述 fmincon函数非线性约束下的最优化问题 fmincon函数，既是求最小约束非线性多变量函数 该函数被用于求如下函数的最小值 语法如下: x fmincon(fun,x0,A,b) x fmincon(fun,x0,A,b,Aeq,beq) x fmincon(fun,x0,A,b,Aeq,beq,lb,ub) x fmincon(fun,x0,A,b,Aeq…...
Delphi 开发的QR二维码生成工具，开箱即用
目录 一、基本功能： 二、使用说明： 三、操作演示gif 四、下载链接 在日常的开发中，经常需要将一个链接生成为二维码图片，特别是在进行支付开发的时候，因为我们支付后台获取了支付链接，需要变成二维码扫…...
Springboot使用AOP编程简介
AOP简介 AOP（面向切面编程）是一种编程范式，Spring AOP是基于代理模式的AOP框架，它通过动态代理实现切面的织入，更加轻量级和易于使用。 Joinpoint (连接点):类里面可以被增强的方法即为连接点。例如，想修…...
Android性能优化—卡顿分析与布局优化
一、什么是卡顿？或者说我们怎么感知APP卡顿？ 这里面涉及到android UI渲染机制，我们先了解一下android UI是怎么渲染的，android的View到底是如何一步一步显示到屏幕上的？ android系统渲染页面流程： 1&…...
【二分+滑动窗口优化DP】CF883 I
Problem - 883I - Codeforces 题意： 思路： 首先，要让最大值最小，很显然要二分 那么就相当于有了一个极差的限制，看能不能分组，每组至少m个元素 那么就是考虑分段DP，直接n^2很容易写 但是n …...