bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
历届学生/front-end-team-10/项目练习/上课项目/js 案例/hb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

57
历届学生/front-end-team-10/项目练习/上课项目/js 案例/head.html Normal file
View File

@@ -0,0 +1,57 @@
<!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;
}
body {
height: 3000px;
}
.header {
width: 100%;
height: 60px;
background: #ff0;
}
.test {
width: 100%;
height: 60px;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="header"></div>
</body>
<script>
// 给网页绑定滚动事件
// 获取滚动条的滚动距离，然后拿滚动距离进行判断 document.documentElement.scrollTop
// 大于 某个数值 ，给 html 定固定定位，反之不加
var body = $("body"),
header = $(".header");
body.onscroll = () => {
var offsetTop = document.documentElement.scrollTop;
console.log("offsetTop: ", offsetTop);
if (offsetTop > 60) {
header.style.position = "fixed"
header.style.top = "0"
} else {
header.style.position = "static"
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

66
历届学生/front-end-team-10/项目练习/上课项目/js 案例/index.html Normal file
View File

@@ -0,0 +1,66 @@
<!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>
* {
margin: 0;
padding: 0;
}
body {
height: 3000px;
}
.gg {
width: 200px;
height: 200px;
background: red;
position: fixed;
right: 0;
bottom: 0;
}
.gg span {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="gg">
<span> x </span>
</div>
</body>
<script>
// 点击三次
// 第一次打开网页，第二次没什么反应，第三次关闭整个广告
var close = document.querySelector(".gg span"),
gg = document.querySelector(".gg"),
nums = 0;
close.onclick = () => {
nums += 1;
if (nums == 1) {
open("https://www.runoob.com/jsref/dom-obj-event.html")
}
// if (nums == 2) {
// }
if (nums == 3) {
gg.style.display = "none"
}
}
</script>
</html>

78
历届学生/front-end-team-10/项目练习/上课项目/js 案例/tabs.html Normal file
View File

@@ -0,0 +1,78 @@
<!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>tabs切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 20px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="title">
<li class="active">社会</li>
<li>娱乐</li>
<li>体育</li>
<li>军事</li>
</ul>
<ul class="content">
<li class="active">社会内容</li>
<li>娱乐内容</li>
<li>体育内容</li>
<li>军事内容</li>
</ul>
</body>
<script>
_(".title li").forEach((v,i) => {
v.onclick = () => {
console.dir(v);
_(".title li").forEach((val,index) => {
val.className = ""
_(".content li")[index].className = ""
})
v.className = "active"
_(".content li")[i].className = "active"
}
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

172
历届学生/front-end-team-10/项目练习/上课项目/js 案例/tabsV2.html Normal file
View File

@@ -0,0 +1,172 @@
<!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>tabs切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 20px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="title"></ul>
<ul class="content"></ul>
</body>
<script>
// 数据从哪来的？
// 通过ajax请求（网络）从后端的数据库里面获取到的
var tabsList = [
{
title: '社会',
content: [
{
title: '社会新闻1',
time: '2023',
text: '主体内容部分'
},
]
},
{
title: '娱乐',
content: [
{
title: '娱乐新闻1',
time: '2023',
text: '主体内容部分'
},
{
title: '娱乐新闻2',
time: '2023',
text: '主体内容部分'
},
]
},
{
title: '体育',
content: [
{
title: '体育新闻1',
time: '2023',
text: '主体内容部分'
}
]
},
{
title: '军事',
content: [
{
title: '军事新闻1',
time: '2023',
text: '主体内容部分'
},
{
title: '军事新闻2',
time: '2023',
text: '主体内容部分'
},
{
title: '军事新闻3',
time: '2023',
text: '主体内容部分'
},
]
},
{
title: '科技',
content: [
{
title: '科技新闻1',
time: '2023',
text: '主体内容部分'
}
]
},
]
// 渲染 tabs 标题部分
function renderTitle() {
tabsList.forEach((v, i) => {
$(".title").innerHTML += `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`
$(".content").innerHTML +=
`<li class="${i == 0 ? 'active' : ''}">
${
v.content.length == 0
? '<p>暂无数据</p>'
: v.content.map(v => {
return `<p>${v.title}</p>`
}).toString().replaceAll(",", "")
}
</li>`
});
bindTitleClick()
}
// 给标题 绑定点击事件
function bindTitleClick() {
_(".title li").forEach((v, i) => {
v.onclick = () => {
_(".title li").forEach((val, index) => {
val.className = ""
_(".content li")[index].className = ""
})
v.className = "active"
_(".content li")[i].className = "active"
}
})
}
renderTitle()
// var a = [1,24,6,2,8,5,9].forEach(v => {
// console.log(v);
// })
// var a = [1,24,6,2,8,5,9].map(v => {
// return `<p>${v}</p>`
// })
// console.log(a.toString().replaceAll(",", ""));
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

90
历届学生/front-end-team-10/项目练习/上课项目/js 案例/图片预览/index.css Normal file
View File

@@ -0,0 +1,90 @@
* {
margin: 0;
padding: 0;
list-style: none;
}
.list img {
width: 100px;
}
.preview {
width: 100vw;
height: 100vh;
position: absolute;
left: 0;
top: 0;
z-index: 999;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.preview .zz {
width: 100%;
height: 100%;
background: #000000c4;
z-index: -1;
position: absolute;
}
.preview .preview_img {
transition: all 0.3s;
user-select: none;
cursor: pointer;
}
.preview .icon-close {
position: absolute;
z-index: 2;
right: 10px;
top: 10px;
color: #fff;
font-size: 40px;
}
.preview .button {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: flex;
justify-content: space-between;
padding: 0 20px;
box-sizing: border-box;
}
.preview .button i {
color: #fff;
font-size: 25px;
}
.preview .icon{
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 30px;
padding: 9px 10px;
background: #716f6fc4;
border-radius: 25px;
}
.preview .icon i {
color: #fff;
font-size: 22px;
margin-right: 20px;
cursor: pointer;
user-select: none;
}
.preview .icon i:last-child {
margin-right: 0px;
}
.icon .right {
transform: rotateY(180deg);
display: inline-block;
}

160
历届学生/front-end-team-10/项目练习/上课项目/js 案例/图片预览/index.html Normal file
View File

@@ -0,0 +1,160 @@
<!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>
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3445167_gwp92uwquwa.css">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="list">
<img src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg" alt="">
</div>
</body>
<script>
var scaleNum = 1, rotateNum = 0, startX = null, startY = null, oldLeft = null, oldTop = null, MoveStatus = false;
_(".list img").forEach(v => {
v.onclick = () => {
$("body").insertAdjacentHTML("beforeend", `
<div class="preview">
<div class="zz"></div>
<img style="transform: scale(${scaleNum}) rotate(${rotateNum}deg); height: 100%; margin-left: 0px;margin-top: 0px;" class="preview_img" src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg" alt="">
<i class="iconfont icon-close"></i>
<div class="button">
<i class="iconfont icon-fanhui"></i>
<i class="iconfont icon-gengduo"></i>
</div>
<div class="icon">
<i class="iconfont icon-suoxiao"></i>
<i class="iconfont icon-fangda"></i>
<i class="iconfont qp icon-quanping"></i>
<i class="iconfont icon-yulanxuanzhuan left "></i>
<i class="iconfont icon-yulanxuanzhuan right"></i>
</div>
</div>
`);
$(".icon-close").onclick = () => {
$("body").removeChild($(".preview"))
}
$(".icon-suoxiao").onclick = () => {
scaleNum = scaleNum - 0.2 < 0.2 ? 0.2 : scaleNum - 0.2
xuanzhong()
}
$(".icon-fangda").onclick = () => {
scaleNum += 0.2
xuanzhong()
}
$(".left").onclick = () => {
rotateNum -= 90
xuanzhong()
}
$(".right").onclick = () => {
rotateNum += 90
xuanzhong()
}
$(".icon-quanping").onclick = () => {
if ($(".qp").classList.contains("icon-quanping")) {
$(".qp").classList.replace("icon-quanping", "icon-beijingyibiyi")
$(".preview_img").style.height = "auto"
} else {
$(".qp").classList.replace("icon-beijingyibiyi", "icon-quanping")
$(".preview_img").style.height = "100%"
}
}
$(".preview_img").onmousedown = (e) => {
MoveStatus = true;
e.preventDefault();
e.stopPropagation(); // TODO 事件冒泡
startX = e.x;
startY = e.y;
oldLeft = parseInt($(".preview_img").style.marginLeft);
oldTop = parseInt($(".preview_img").style.marginTop);
$(".preview_img").onmousemove = (e) => {
console.log("preview_img");
MouseMove(e)
}
$(".preview_img").onmouseup = () => {
MoveStatus = false;
$(".preview_img").onmousemove = null
}
}
$(".preview_img").onmouseout = () => {
if (MoveStatus) {
$(".preview").onmousemove = (e) => {
console.log("preview");
console.log("2 MoveStatus: ", MoveStatus);
MouseMove(e)
}
}
}
$(".preview").onmouseup = () => {
MoveStatus = false;
$(".preview_img").onmousemove = null
$(".preview").onmousemove = null
}
}
})
function MouseMove(e) {
console.log("3 status: ", status);
e.preventDefault();
e.stopPropagation();
var moveX = e.x, moveY = e.y;
var offsetX = moveX - startX, offsetY = moveY - startY;
console.log("移动数值：", offsetX, offsetY);
$(".preview_img").style.marginLeft = `${offsetX + oldLeft}px`;
$(".preview_img").style.marginTop = `${offsetY + oldTop}px`;
}
function xuanzhong() {
$(".preview_img").style.transform = `scale(${scaleNum}) rotate(${rotateNum}deg)`
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

83
历届学生/front-end-team-10/项目练习/上课项目/js 案例/富强.html Normal file
View File

@@ -0,0 +1,83 @@
<!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;
}
span {
user-select: none;
position: fixed;
transition: all 1s;
}
body {
height: 100vh;
}
</style>
</head>
<body>
</body>
<script>
// 产生文字
// 给网页绑定点击事件，获取到鼠标点击时候产生的 x y 坐标
// 使用下标来依次读取 数组中的文字，如果读完了回第一个继续轮回
// 使用 文字 生成 标签，并用js为标签设置定位，left top 距离 就是 xy 坐标
// 把生成好的 标签 放到 网页上，显示出来
// 让文字消失
var textArr = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"];
var i = 0;
$("body").onclick = (e) => {
// var x = e.x,
// y = e.y;
var { x,y } = e;
var span = document.createElement("span");
span.innerText = textArr[i]
span.style = `
color: hsla(${parseInt(Math.random() * 360)},100%,50%,1);
left: ${x}px;
top: ${y}px;
`
console.log(span);
$("body").appendChild(span)
sport(span, y)
i++
if (i > 11) {
i = 0
}
}
function sport(span,y) {
setTimeout(() => {
span.style.top = `${y - 200}px`
}, 200)
setTimeout(() => {
$("body").removeChild(span)
}, 1250)
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

100
历届学生/front-end-team-10/项目练习/上课项目/js 案例/搜索建议.html Normal file
View File

@@ -0,0 +1,100 @@
<!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;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入关键字">
<button>搜索</button>
<ul>
</ul>
</body>
<script>
// 实现搜索建议
// 1 放置input，button，ul li
// 2 给input绑定 oninput 事件，实时获取用户输入的 东西
// 3 从本地的所有搜索建议的数组中，筛选出包含 用户 输入内容 的 搜索建议
// 4 把符合条件的 展示 在 ul li 里面给用户看
// 5 给 ul li 中所有 li 都绑定点击事件，点击时候获取 li 的文本内容，并为输入框重新赋值，
// 然后实现百度搜索。
// 关键字加红
var keyWordList = [
'今天出太阳了', '太阳很好', '不喜欢js学习',
'js编程很简单', '喜欢很简单的html', '今天不想学习html，只想出去玩',
'今天不想学习css', '今晚出去飙车', '明天出去修车'
];
var newKeyList = []
// for(var i = 0;i<keyWordList.length;i++) {
// console.log(keyWordList[i]);
// console.log(i);
// }
$("input").oninput = () => {
newKeyList = []
if ($("input").value.length > 0) {
keyWordList.forEach(v => {
if (v.includes($("input").value)) {
var text = v.replace($("input").value, `<span style="color:red;">${$("input").value}</span>`)
newKeyList.push(text)
}
})
console.log("符合条件的数据：", newKeyList);
renderUl()
} else {
$("ul").innerHTML = ""
}
}
function renderUl() {
$("ul").innerHTML = ""
newKeyList.forEach(v => {
$("ul").innerHTML += `<li>${v}</li>`
})
bindLiClick()
}
function bindLiClick() {
_("ul li").forEach(v => {
v.onclick = () => {
console.dir(v);
$("input").value = v.innerText
SearchBaidu(v.innerText)
}
})
}
$("button").onclick = () => SearchBaidu($("input").value)
function SearchBaidu(text) {
open(`https://www.baidu.com/s?wd=${text}`)
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

197
历届学生/front-end-team-10/项目练习/上课项目/js 案例/红包雨.html Normal file
View File

@@ -0,0 +1,197 @@
<!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;
}
img {
width: 70px;
height: 90px;
position: fixed;
}
body {
height: 100vh;
}
.alert {
width: 100%;
height: 100%;
position: fixed;
z-index: 999;
display: none;
}
.zz {
width: 100%;
height: 100%;
background: #000000a8;
position: fixed;
z-index: 1;
}
.text {
width: 300px;
height: 250px;
background: #fff;
position: fixed;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
padding: 11px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.text .title {
height: 40px;
display: flex;
align-items: center;
border-bottom: 1px solid #d5d5d5;
}
.text .close {
position: absolute;
right: 10px;
top: 4px;
font-size: 20px;
cursor: pointer;
user-select: none;
}
.text .content {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
</style>
</head>
<body>
<div class="alert">
<div class="zz"></div>
<div class="text">
<div class="close"> x </div>
<div class="title">恭喜中奖</div>
<div class="content"></div>
</div>
</div>
</body>
<script>
// 生成随机出现的红包
// 计算红包随机出现的最大x轴范围
// 创建红包img，为红包设置定位（left 随机最大范围出现 0 ~ offsetLeft）
// 让红包动起来
// 点击红包可以拆开（弹窗，告诉你中了什么奖项）
// 注意：弹窗打开时候，所有红包需要先暂停运动(停止创建红包)，关闭弹窗的时候，你点击的红包消失，其他红包继续运动
var { clientWidth, clientHeight } = document.body;
var offsetLeft = clientWidth - 70, gId = null, gImg = null;
// 创建红包
function createdHB() {
var randomLeft = Math.random() * offsetLeft;
var img = document.createElement("img");
img.src = "./hb.png";
img.onclick = () => {
gImg = img;
img.src = "./hb1.png";
probability()
$(".alert").style.display = "block"
// 停止页面上已有红包的运动
_("img").forEach(v => clearInterval(v.intervalId))
// 创建新红包的也需要停止
clearInterval(gId)
}
img.style = `
left: ${randomLeft}px;
top: -90px;
`;
$("body").appendChild(img)
sport(img)
}
// 运动起来
function sport(img) {
img.intervalId = setInterval(() => {
var oldTop = Number(img.style.top.replace("px", ""));
var newTop = oldTop + 1
img.style.top = `${newTop}px`
if (newTop > clientHeight) {
$("body").removeChild(img);
clearInterval(img.intervalId)
}
}, 10);
}
// 关闭按钮被点击
$(".text .close").onclick = () => {
$(".alert").style.display = "none"
// 删除你已经拆开过的红包
$("body").removeChild(gImg);
// 让页面上已有的红包在暂停后继续运动
_("img").forEach(v => sport(v))
auto()
}
function auto() {
gId = setInterval(() => {
createdHB()
}, 500)
}
// 中将的概率
function probability() {
var probabilityNums = Number((Math.random() * 10).toFixed(4))
if (probabilityNums < 0.0002) {
$(".content").innerText = "恭喜中得一等奖！"
} else if (probabilityNums > 0.0001 && probabilityNums < 8) {
$(".content").innerText = "恭喜中得三等奖！"
} else {
$(".content").innerText = "恭喜中得二等奖！"
}
}
auto()
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

183
历届学生/front-end-team-10/项目练习/上课项目/js 案例/轮播/index.html Normal file
View File

@@ -0,0 +1,183 @@
<!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>
* {
margin: 0;
padding: 0;
list-style: none;
}
.swiper {
width: 630px;
height: 315px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.swiper .swiper_wrap {
display: flex;
position: relative;
transition: all 1s;
}
.swiper .swiper_wrap li {}
.swiper .swiper_wrap li img {
width: 630px;
height: 315px;
}
.swiper .button {
width: 100%;
position: absolute;
top: 50%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.swiper .button div {
color: #fff;
font-size: 20px;
background: #000;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
cursor: pointer;
}
.swiper .button .left {}
.swiper .button .right {}
.swiper .dot {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
display: flex;
}
.swiper .dot li {
width: 13px;
height: 13px;
background: #fff;
border-radius: 100%;
margin-right: 10px;
cursor: pointer;
}
.swiper .dot li:last-child {
margin-right: 0px;
}
.swiper .dot .active {
background: red;
}
</style>
</head>
<body>
<div class="swiper">
<ul class="swiper_wrap" style="left: 0px;">
<li>
<img src="https://img.alicdn.com/imgextra/i4/6000000003174/O1CN01cpv0cZ1ZJjvVWrUuo_!!6000000003174-2-octopus.png"
alt="">
</li>
<li>
<img src="https://img.alicdn.com/imgextra/i2/6000000003386/O1CN01ySmLuo1asptKSfbHC_!!6000000003386-0-octopus.jpg"
alt="">
</li>
<li>
<img src="https://img.alicdn.com/imgextra/i3/6000000000084/O1CN012wKWpe1CUW5EEs61K_!!6000000000084-0-octopus.jpg"
alt="">
</li>
</ul>
<div class="button">
<div class="left">< </div>
<div class="right"> > </div>
</div>
<ul class="dot">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
// TODO 使用 下标完成对 sport 的改造，
// 实现 调用 changeDotActive 只需要传入 下标即可
var timeId = null;
$(".right").onclick = () => {
sport(-630)
}
$(".left").onclick = () => {
sport(630)
}
_(".dot li").forEach((v, i) => {
v.onclick = () => {
changeDotActive(i)
}
})
$(".swiper").onmouseover = () => {
clearInterval(timeId)
}
$(".swiper").onmouseout = () => {
auto()
}
function sport(offset) {
var oldLeft = parseInt($(".swiper_wrap").style.left);
console.log("a",$(".swiper_wrap").style.left);
var newLeft = oldLeft + offset;
if (newLeft <= 0 && newLeft >= -1260) {
changeDotActive(newLeft / -630)
// changeDotActive(i)
}
}
function changeDotActive(i) {
_(".dot li").forEach(val => {
val.classList.remove("active");
})
_(".dot li")[i].classList.add("active")
$(".swiper_wrap").style.left = `${i * -630}px`
}
function auto() {
timeId = setInterval(() => {
$(".right").onclick()
}, 2000)
}
auto()
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

144
历届学生/front-end-team-10/项目练习/上课项目/js 案例/轮播/index2.html Normal file
View File

@@ -0,0 +1,144 @@
<!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>
* {
margin: 0;
padding: 0;
list-style: none;
}
.swiper {
width: 630px;
height: 315px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.swiper .swiper_wrap {
display: flex;
position: relative;
transition: all 1s;
}
.swiper .swiper_wrap li {}
.swiper .swiper_wrap li img {
width: 630px;
height: 315px;
}
.swiper .button {
width: 100%;
position: absolute;
top: 50%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.swiper .button div {
color: #fff;
font-size: 20px;
background: #000;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
cursor: pointer;
}
.swiper .button .left {}
.swiper .button .right {}
.swiper .dot {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
display: flex;
}
.swiper .dot li {
width: 13px;
height: 13px;
background: #fff;
border-radius: 100%;
margin-right: 10px;
cursor: pointer;
}
.swiper .dot li:last-child {
margin-right: 0px;
}
.swiper .dot .active {
background: red;
}
</style>
</head>
<body>
<div class="swiper banner">
<ul class="swiper_wrap" style="left: 0px;">
<li>
<img src="https://img.alicdn.com/imgextra/i4/6000000003174/O1CN01cpv0cZ1ZJjvVWrUuo_!!6000000003174-2-octopus.png"
alt="">
</li>
<li>
<img src="https://img.alicdn.com/imgextra/i2/6000000003386/O1CN01ySmLuo1asptKSfbHC_!!6000000003386-0-octopus.jpg"
alt="">
</li>
<li>
<img src="https://img.alicdn.com/imgextra/i3/6000000000084/O1CN012wKWpe1CUW5EEs61K_!!6000000000084-0-octopus.jpg"
alt="">
</li>
</ul>
<div class="button">
<div class="left">&#8249;</div>
<div class="right">&#8250;</div>
</div>
<ul class="dot"></ul>
</div>
<button>去下标2的图片(3)</button>
</body>
<script src="./index2.js"></script>
<script>
/**
* 第一个参数 是 最外层 父元素类名
* 第二个是允许用户自定义插件的参数
*/
var a = new Swiper(".banner", {
autoPlay: false,
time: 2000,
initialSlide: 0,
// on: {
// slideChange: function (index) {
// console.log("当前轮播图切换到：",index);
// },
// slideChange3: function (index) {
// console.log("当前轮播图切换到：",index);
// }
// },
})
document.querySelector("button").onclick = () => {
a.slideTo(2)
}
</script>
</html>

208
历届学生/front-end-team-10/项目练习/上课项目/js 案例/轮播/index2.js Normal file
View File

@@ -0,0 +1,208 @@
// // 自执行函数
// // 好处？
//
class Swiper {
defaultOption = {
TimeId: null,
autoPlay: false,
time: 1000,
initialSlide: 0, // 实现了
el: '.swiper',
on: { },
length: () => this._f(`.swiper_wrap li`).length,
width: () => this.$f(``).offsetWidth,
initSlideLeft: () => {
this.$f(".swiper_wrap").style.left = `${
this.defaultOption.initialSlide * -this.defaultOption.width()
}px`
}
}
// 构造函数里面接受
constructor (el, option) {
if (el.length == 0 || this.$(el) == null) {
console.error(`类名:${el}不存在，请检查`);
} else {
this.defaultOption.el = el || this.defaultOption.el;
this.defaultOption.autoPlay = option.autoPlay || this.defaultOption.autoPlay;
this.defaultOption.time = option.time || this.defaultOption.time;
this.defaultOption.initialSlide = option.initialSlide || this.defaultOption.initialSlide;
if (option.hasOwnProperty("on")) {
this.defaultOption.on = option.on
}
this.init()
}
}
init() {
this.defaultOption.initSlideLeft()
if (this.$f(".button") != null) {
this.next()
this.prev()
}
this.defaultOption.autoPlay
? this.autoPlay()
: ''
this.$f(".dot") == null ? '' : this.renderDot()
}
next() {
this.click(".right", (v) => this.sport(1))
}
prev() {
this.click(".left", v => this.sport(-1))
}
changeDotActive(i) {
this.defaultOption.on.slideChange && this.defaultOption.on.slideChange(i)
if (this.$f(".dot") != null) {
this._f(".dot li").forEach(val => val.classList.remove("active"))
this._f(".dot li")[i].classList.add("active")
}
this.$f(".swiper_wrap").style.left = `${i * -this.defaultOption.width()}px`
}
renderDot() {
for (var i = 0; i < this.defaultOption.length(); i++) {
this.$f(".dot").innerHTML += `
<li class="${i == this.defaultOption.initialSlide ? 'active' : '' }"></li>
`
}
this.click(".dot li", (v,i) => this.changeDotActive(i))
}
autoPlay() {
this.defaultOption.TimeId = setInterval(() => this.sport(1), this.defaultOption.time)
this.$f("").onmouseover = () => clearInterval(this.defaultOption.TimeId)
this.$f("").onmouseout = () => this.autoPlay()
}
sport(offset) {
this.defaultOption.initialSlide += offset
if (this.defaultOption.initialSlide < 0) {
this.defaultOption.initialSlide = 0
}
if (this.defaultOption.initialSlide > this.defaultOption.length() - 1) {
this.defaultOption.initialSlide = this.defaultOption.length() - 1
}
if (this.defaultOption.initialSlide >= 0 && this.defaultOption.initialSlide <= this.defaultOption.length() - 1) {
this.changeDotActive(this.defaultOption.initialSlide)
}
}
slideTo(index) {
this.changeDotActive(index)
}
click(className, callback) {
this._f(className).forEach((v,i) => v.onclick = () => callback(v,i))
}
$f(className) {
return this.$(`${this.defaultOption.el} ${className}`)
}
_f(className) {
return this._(`${this.defaultOption.el} ${className}`)
}
$(className) {
return document.querySelector(className)
}
_(className) {
return document.querySelectorAll(className)
}
}
// 为什么要 new
// x 类的 实例
// var x = new Swiper(1000);
// x.test()
// 哪些功能需要自定义？
// 是否需要自动播放
// 设置自动播放的时间间隔
// 可以设置默认显示第几张
// 如果不写html，就不需要对应的功能
// 可以js编程控制轮播图滚动到第几张
// 当轮播图滚动的时候要抛出当前下标
// this 指向
// 函数执行的时候才能确定this到底指向谁,
// 实际上this的最终指向的是那个调用它的对象
// var time = 4000
// var a = {
// time: 2000,
// b: () => {
// this.time = 5000;
// var test = () => {
// console.log(this.time);
// }
// return test
// }
// }
// var dddd = a.b()
// dddd()
// 箭头函数 和 普通函数的区别
// 如何改变this 指向？？
// https://www.runoob.com/w3cnote/js-call-apply-bind.html
// 继承
// class car {
// color = "red";
// speed = null;
// start() {}
// stop() {}
// }
// class mtc extends car {
// constructor(dddd) {
// super()
// this.par = dddd
// console.log(this.par);
// }
// size() {
// console.log("摩托车很小：",this.color);
// }
// }
// class jhc extends car {
// rescue() {
// console.log("救人");
// }
// }
// var mt = new mtc("1")
// // mt.size()

10
历届学生/front-end-team-10/项目练习/上课项目/js 案例/轮播/笔记.txt Normal file
View File

@@ -0,0 +1,10 @@
正则表达式
手机号验证
12345678901
11056042604
邮箱验证
密码验证