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/项目练习/学生项目/薛涛/2.24/hb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

64
历届学生/front-end-team-10/项目练习/学生项目/薛涛/2.24/关闭广告.html Normal file
View File

@@ -0,0 +1,64 @@
<!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;
}
.gg {
width: 200px;
height: 200px;
background: red;
position: fixed;
right: 0;
bottom: 0;
}
.gg span {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="gg">
<span> X </span>
</div>
</body>
<script>
//点三次关闭广告
//第一次打开网页 第二次没反应 第三次关闭广告
var colse = document.querySelector(".gg span"),
gg = document.querySelector(".gg"),
nums = 0
colse.onclick = () => {
nums += 1;
if (nums == 1) {
open('https://fanyi.baidu.com/')
}
// if (nums == 2) {
// }
if (nums == 3) {
gg.style.display='none'
}
}
</script>
</html>

81
历届学生/front-end-team-10/项目练习/学生项目/薛涛/2.24/切换标题.html Normal file
View File

@@ -0,0 +1,81 @@
<!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;
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=()=>{
_(".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>

141
历届学生/front-end-team-10/项目练习/学生项目/薛涛/2.24/切换标题2.html Normal file
View File

@@ -0,0 +1,141 @@
<!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;
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>
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: '主体内容部分'
},
]
},]
function renderTitle() {
tabsList.forEach((v, i) => {
console.log(v);
$(".title").innerHTML += ` <li class="${i == 0 ? 'active' : ''}">${v.title}</li>`
$(".content").innerHTML +=
` <li class="${i == 0 ? 'active' : ''}">
${v.content.map(v => {
return `<p>${v.title}</p>`
}).toString().replaceAll(",","")
}
</li>`
bindTitleClick()
})
}
renderTitle()
function bindTitleClick(v, i) {
_(".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"
}
})
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

79
历届学生/front-end-team-10/项目练习/学生项目/薛涛/2.24/富强.html Normal file
View File

@@ -0,0 +1,79 @@
<!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;
}
span {
user-select: none;
position: fixed;
transition: all 1s;
}
body {
height: 100vh;
}
</style>
</head>
<body>
</body>
<script>
var textArr = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
var i = 0
$("body").onclick = (e) => {
var { x, y } = e
var span = document.createElement("span");
span.innerText = textArr[i]
span.style = `
color:hsla(${parseInt(Math.random() * 360)},100%,50%,1);
top: ${y}px;
left:${x}px ;
`
$("body").appendChild(span)
sport(span, y)
i++
if (i > 11) {
i = 0
}
}
function sport(span, y) {
setTimeout(() => {
span.style.top = `${y - 100}px`
}, 300);
setTimeout(() => {
$("body").removeChild(span)
}, 1350);
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

88
历届学生/front-end-team-10/项目练习/学生项目/薛涛/2.24/搜索.html Normal file
View File

@@ -0,0 +1,88 @@
<!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>
var keyWordList = [
'今天出太阳了', '太阳很好', '不喜欢js学习',
'js编程很简单', '喜欢很简单的html', '今天不想学习html，只想出去玩',
'今天不想学习css', '今晚出去飙车', '明天出去修车'
];
var newKeyList = []
$("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 = () => {
v.innerText
$("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>

64
历届学生/front-end-team-10/项目练习/学生项目/薛涛/2.24/滚动页面.html Normal file
View File

@@ -0,0 +1,64 @@
<!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;
/* position: static; */
}
.test {
width: 100%;
height: 60px;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="header"></div>
</body>
<script>
var body = $("body"),
header = $(".header")
body.onscroll = () => {
var offsetTop = document.documentElement.scrollTop
if (offsetTop > 60) {
header.style.position = "fixed"
header.style.top = "0"
} else {
header.style.position = "static"
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

62
历届学生/front-end-team-10/项目练习/学生项目/薛涛/2.24/红包雨.html Normal file
View File

@@ -0,0 +1,62 @@
<!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>
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 70px;
height: 90px;
top: 0;
}
body {
height: 100vh;
}
</style>
<body>
</body>
<script>
var { clientWidth, clientHeight } = document.body;
var offsetLeft = clientWidth - 70;
function createdHB() {
var randomLeft = Math.random() * offsetLeft;
var img = document.createElement("img");
img.src = "./hb.png";
img.style = `
left:${randomLeft}px;
`
$("body").appendChild(img)
}
setInterval(() => {
createdHB()
}, 2000)
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>