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/项目练习/学生项目/韩孟雪/2023-2-25/hb1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-25/hb2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

63
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-25/js_案例2_淘宝头部定位.html Normal file
View File

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

84
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-25/js_案例3tabs.html Normal file
View File

@@ -0,0 +1,84 @@
<!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>js_案例tabs</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.title {
height: 60px;
display: flex;
}
.title li {
width: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.text {
height: 40px;
}
.text li {
width: 320px;
height: 40px;
display: none;
}
.text .active1{
display: block;
}
.active {
color: #fff;
background: red;
}
.active1{
color: black;
}
</style>
</head>
<body>
<ul class="title">
<li class="active">社会</li>
<li>娱乐</li>
<li>体育</li>
<li>军事</li>
</ul>
<ul class="text">
<li class="active1">社会新闻</li>
<li>娱乐新闻</li>
<li>体育新闻</li>
<li>军事新闻</li>
</ul>
</body>
<script>
//循环li标签，并绑定点击
_(".title li").forEach((v,i) => {
v.onclick = () =>{
_(".title li").forEach((val,index) => {
val.className = ""
_(".text li")[index].className = ""
})
v.className = "active"
_(".text li")[i].className = "active1"
}
})
function $(className) {
return document.querySelector(className);
}
function _(className) {
return document.querySelectorAll(className);
}
</script>
</html>

86
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-25/js_案例4富强.html Normal file
View File

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

60
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-25/js案例1_关闭弹窗.html Normal file
View File

@@ -0,0 +1,60 @@
<!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>js案例_关闭弹窗</title>
<style>
.box {
width: 200px;
height: 200px;
background: red;
position: fixed;
right: 0;
bottom: 0;
}
.box span {
font-size: 14px;
color: #000;
position: absolute;
top: 13px;
right: 6px;
user-select: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<span>X</span>
</div>
</body>
<script>
function alter() {
var i = 0;
$("span").onclick = () => {
i++
if (i == 1) {
open("https://www.baidu.com/")
}
if (i == 3) {
$(".box").style.display = "none";
}
}
}
alter();
function $(className) {
return document.querySelector(className);
}
function _(className) {
return document.querySelectorAll(className);
}
</script>
</html>