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

50
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/js/ajax/ajax.html Normal file
View File

@@ -0,0 +1,50 @@
<!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>
</ul>
</body>
<script>
var xhr = new XMLHttpRequest()
xhr.open("GET", "http://127.0.0.1:3000/api/json/index")
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.responseText)
console.log(data);
data.result.model.res.forEach(v => {
document.querySelector("ul").innerHTML+= `
<li>
<h2>${v.title}</h2>
<img src="${v.preview}" alt="">
</li>
`
});
}else {
console.log("暂无数据");
}
}
}
</script>
</html>

76
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/js/for.html Normal file
View File

@@ -0,0 +1,76 @@
<!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>
</ul>
</body>
<script>
// var res =0
// for (var i =1;i<=100;i++) {
// res+=i
// }
// console.log(res);
// var car = {
// name: {
// name1: 'F150',
// name2: '猛禽'
// },
// speed: 6,
// color: "black"
// };
// for (var key in car) {
// if (car[key].hasOwnProperty ("name1")) {
// for (var i in car[key])
// console.log(car[key][i]);
// }
// console.log(car[key]);
// }
var news = [
{
title: '新闻1标题',
time: '2020-10-29',
content: "新闻1内容"
},
{
title: '新闻2标题',
time: '2020-10-29',
content: "新闻2内容"
},
{
title: '新闻3标题',
time: '2020-10-29',
content: "新闻3内容"
},
{
title: '新闻4标题',
time: '2020-10-29',
content: "新闻4内容"
}
];
for (var index = 0; index < news.length; index++) {
var li = ` <li>
<h2>${news[index].title}</h2>
<span>${news[index].time}</span>
<div>${news[index].content}</div>
</li>`
document.querySelector("ul").innerHTML+=li
}
</script>
</html>

62
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/js/function.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>
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
}
span {
position: absolute;
transition: all 1s ease;
}
</style>
</head>
<body>
</body>
<script>
var text = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
var index = 0;
document.querySelector("body").onclick = function (event) {
var x = event.clientX, y = event.clientY
var span = document.createElement("span")
span.style.left = `${x}px`
span.style.top = `${y}px`
span.innerText = text[index]
span.style.color = `hsl(${Math.random() * 360},100%,50%)`
console.log(span);
index++
index > 11 ? index = 0 : ""
document.querySelector("body").appendChild(span)
setTimeout(function () {
span.style.top = `${y - 100}px`
},100)
setTimeout (()=> {
document.querySelector("body").removeChild(span)
},1100)
}
</script>
</html>

65
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/js/tabs.html Normal file
View File

@@ -0,0 +1,65 @@
<!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,ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 15px;
}
.title_active {
color: red;
}
.tabs_content div {
display: none;
}
.content_active {
display: block !important;
}
</style>
</head>
<body>
<ul class="tabs_title">
<li class="title_active">精选</li>
<li>美食</li>
<li>百货</li>
<li>个护</li>
<li>预告</li>
</ul>
<div class="tabs_content">
<div class="content_active">精选的内容</div>
<div>美食的内容</div>
<div>百货的内容</div>
<div>个护的内容</div>
<div>预告的内容</div>
</div>
</body>
<script>
var title = document.querySelectorAll(".tabs_title li")
var content = document.querySelectorAll(".tabs_content div")
title.forEach (function (v,i) {
v.onclick = function() {
title.forEach (function (item,index) {
item.className = ""
content[index].className = ""
})
v.className = "title_active"
content[i].className = "content_active"
}
})
</script>
</html>

133
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/js/tabspuls.html Normal file
View File

@@ -0,0 +1,133 @@
<!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,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 15px;
}
.title_active {
color: red;
}
.tabs_content ul {
display: none;
}
.content_active {
display: block !important;
}
</style>
</head>
<body>
<ul class="tabs_title">
</ul>
<div class="tabs_content">
</div>
</body>
<script>
var tabs = [
{
title: '精选',
content: [
{ text: '精选1的标题', content: '精选1的简介', time: '精选1的发布时间' },
{ text: '精选2的标题', content: '精选2的简介', time: '精选2的发布时间' },
]
},
{
title: '美食',
content: [
{ text: '美食1的标题', content: '美食1的简介', time: '美食1的发布时间' },
{ text: '美食2的标题', content: '美食2的简介', time: '美食2的发布时间' },
{ text: '美食3的标题', content: '美食3的简介', time: '美食3的发布时间' },
]
},
{
title: '百货',
content: [
{ text: '百货1的标题', content: '百货1的简介', time: '百货1的发布时间' },
]
},
{
title: '个护',
content: [
{ text: '个护1的标题', content: '个护1的简介', time: '个护1的发布时间' },
{ text: '个护2的标题', content: '个护2的简介', time: '个护2的发布时间' },
{ text: '个护3的标题', content: '个护3的简介', time: '个护3的发布时间' },
{ text: '个护4的标题', content: '个护4的简介', time: '个护4的发布时间' },
{ text: '个护5的标题', content: '个护5的简介', time: '个护5的发布时间' },
{ text: '个护6的标题', content: '个护6的简介', time: '个护6的发布时间' },
]
}
];
function renderTitle() {
tabs.forEach(function (v, i) {
document.querySelector(".tabs_title").innerHTML += `<li class="${i == 0 ? 'title_active' : ""}">${v.title}</li>`
});
renderContent()
var title = document.querySelectorAll(".tabs_title li")
var content = document.querySelectorAll(".tabs_content ul")
console.log(content);
title.forEach(function (v, i) {
v.onclick = function () {
title.forEach(function (item, index) {
item.className = ""
content[index].className = ""
})
v.className = "title_active"
content[i].className = "content_active"
}
})
}
function renderContent() {
tabs.forEach(function (v, i) {
document.querySelector(".tabs_content").innerHTML += `
<ul class="${i==0 ? "content_active" : ""}">
${v.content.map (function(val,index) {
return `
<li>
<h2>${val.text}</h2>
<p>${val.content}</p>
<span>${val.time}</span>
</li>`
}).toString().replaceAll(",", "") }
</ul>`
})
}
renderTitle()
</script>
</html>

49
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/js/搜索建议.html Normal file
View File

@@ -0,0 +1,49 @@
<!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" placeholder="请输入关键字">
<ul>
</ul>
</body>
<script>
var keyword = $("input")
var keyWordList = ['今天天气真好', '你真好', '天气是阴天', 'js学习', '不想学习js', '学习html', '学不会html'];
var result
keyword.oninput = () => {
result= []
if (keyword.value.length != 0) {
keyWordList.forEach(v => {
if (v.indexOf(keyword.value) != -1) {
var newVal = v.replaceAll(keyword.value,`<span style='color: red;'>${keyword.value}</span>`)
result.push(newVal)
}
})
}
renderResult ()
}
function renderResult () {
$("ul").innerHTML = ""
result.forEach(v => {
$("ul").innerHTML += `<li>${v}</li>`
})
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

53
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/js/条件语句.html Normal file
View File

@@ -0,0 +1,53 @@
<!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" placeholder="请输入分数">
<button>查询</button>
<div class="result"></div>
</body>
<script>
// document.querySelector("button").onclick = () => {
// var num = document.querySelector("input").value
// var res = document.querySelector(".result")
// if (num < 60) {
// console.log("不及格");
// res.innerText = "不及格"
// } else if (num >= 60 && num < 70) {
// console.log("一般");
// res.innerText = "一般"
// } else if (num >= 70 && num < 80) {
// console.log("普通");
// res.innerText = "普通"
// } else if (num >= 80 && num < 90) {
// console.log("良好");
// res.innerText = "良好"
// } else if (num >= 90 && num <= 100) {
// console.log("优秀");
// res.innerText = "优秀"
// } else {
// console.log("不合理");
// res.innerText = "不合理"
// }
// }
var je = true
je? console.log("不合理") : console.log("11")
</script>
</html>

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/js/红包雨/hb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

8
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/js/红包雨/workspace.code-workspace Normal file
View File

@@ -0,0 +1,8 @@
{
"folders": [
{
"path": "..\\..\\..\\..\\..\\.."
}
],
"settings": {}
}

72
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/js/红包雨/红包雨.html Normal file
View File

@@ -0,0 +1,72 @@
<!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,
html,
h2,
h3,
h4,
h5,
h6,
h1,
p {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
img {
width: 70px;
height: 90px;
position: absolute;
top: 0;
}
</style>
</head>
<body>
</body>
<script>
var clientWidth = document.body.offsetWidth
function createdHb() {
var imgLeft = Math.random() * (clientWidth - 70)
var img = document.createElement("img")
img.src = "./hb.png"
img.style.left = `${imgLeft}px`
img.style.top = `0px`
$("body").appendChild(img)
animation(img)
}
function animation(el) {
}
// setInterval(() => {
// createdHb()
// }, 1000);
createdHb()
function $(className) {
return document.querySelector(className)
}
</script>
</html>