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

73
历届学生/front-end-team/项目练习/学生项目/李康/js练习/demo.html Normal file
View File

@@ -0,0 +1,73 @@
<!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;
}
ul {
display: flex;
}
.tabs_title {
height: 45px;
align-items: center;
}
.tabs_title li {
margin: 0 10px;
}
.tabs_content li {
display: none;
}
.active_content {
display: block !important;
}
.active_title {
color: red;
}
</style>
</head>
<body>
<ul class="tabs_title">
<li class="active_title">首页</li>
<li>社会</li>
<li>财经</li>
<li>体育</li>
</ul>
<ul class="tabs_content">
<li class="active_content">首页 的内容</li>
<li>社会 的内容</li>
<li>财经 的内容</li>
<li>体育 的内容</li>
</ul>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(".tabs_title li").click(function() {
$(this).addClass("active_title").siblings().removeClass("active_title")
$(".tabs_content li").eq($(this).index())
.addClass("active_content")
.siblings()
.removeClass("active_content")
})
</script>
</html>

182
历届学生/front-end-team/项目练习/学生项目/李康/js练习/hb.html Normal file
View File

@@ -0,0 +1,182 @@
<!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: 100%;
position: relative;
height: 100vh;
overflow: hidden;
}
img {
position: absolute;
width: 80px;
/* transition: all 0.2s; */
}
.alert {
position: fixed;
width: 100%;
height: 100%;
background: #0000008f;
display: flex;
align-items: center;
justify-content: center;
z-index: 8;
}
.alert .alert_warp {
width: 32%;
background: #fff;
height: 300px;
padding: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.alert_warp .alert_title {
display: flex;
justify-content: space-between;
height: 45px;
align-items: center;
border-bottom: 1px solid #e6e6e6;
}
.alert_title span {}
.alert_body {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="alert hidden">
<div class="alert_warp">
<div class="alert_title">
<span>恭喜中奖</span>
<span class="close">x</span>
</div>
<div class="alert_body">
恭喜抽中9折优惠券
</div>
</div>
</div>
</body>
<script>
// 随机生成红包 + 红包移动
// 点击开红包，红包点击事件，中奖弹窗，所有红包暂停，关闭弹出的时候红包重新运动
var clientWidth = $("body").clientWidth, // 屏幕的宽度
clientHeight = $("body").clientHeight, // 屏幕的高度
alert = $("alert"), // 获取 alert里的hidden
text = $(".alert_body"),
close = $(".alert_title .close"), //绑定关闭按钮
chickImg = null, // 保存你点击的图片的虚拟dom对象
body = $("body"), // 红包放网页上
createdId = null; // 保存创建红包的定时器
function createdHb() { //创建红包
var x = parseInt(Math.random() * (clientWidth - 80)) //拿到屏幕X轴 (放里面)
var img = document.createElement("img"); //创建img对象
img.src = "./hb.png" // img地址
img.style = `
left: ${x}px;
top:-105px;
` //定位值 负屏幕高度
// 红包的点击事件
img.onclick = function () {
clickImg = img;
probability()
// 显示弹窗
alert.classList.remove("hidden")
// 停止生成红包
clearInterval(createdId)
// 停止页面上所有红包
allImgAction(2)
}
body.appendChild(img) //在网页创建红包
motion(img) //开始运行
}
// motion 运动
function motion(el) {
el.num = setInterval(function () { //设置定时器让红包移动
var topSet = parseInt(el.style.top) + 1 //一次移动的距离 1px
el.style.top = `${topSet}px`
if (topSet > clientHeight) { //top值大于屏幕高度删除红包
$("body").removeChild(el)
clearInterval(el.num) //清除定时器
}
}, 6)
}
//关闭弹窗
close.onclick = function () {
// 删除你点击的红包
$("body").removechild(chickImg)
alert.classList.add("hidden")
// 让页面上的其他红包重新运动起来
allImgAction(1)
// 开始重新创建红包
aotoCreated()
}
function probability() {
var prob = Math.random();
if (prob <= 0.021) {
text.innerText = `${prob}恭喜您中了1折优惠券`
} else if (0.021 < prob && prob <= 0.8) {
text.innerText = `${prob}恭喜您中了7折优惠券`
} else if (prob > 0.8) {
text.innerText = `${prob}恭喜您中了3折优惠券`
}
}
function allImgAction(type) {
var allImg = document.querySelectorAll("img");
allImg.forEach(function (v) {
type == 1 ? motion(v) : clearInterval(v.num)
})
}
function autoCreated() {
createdId = setInterval(function () { // setInterval 每隔一段时间执行一次代码
createdHb()
}, 1000)
}
autoCreated()
function $(className) {
return document.querySelector(className)
}
</script>
</html>

BIN
历届学生/front-end-team/项目练习/学生项目/李康/js练习/hb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

90
历届学生/front-end-team/项目练习/学生项目/李康/js练习/index.html Normal file
View File

@@ -0,0 +1,90 @@
<!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>
var a = [1, 2, 3, 4, 5, 6]
console.log(a[0]);
a.forEach((v) => {
console.log(v);
})
var obj = {
name: '看回放',
age: 18
}
for (const key in obj) {
console.log(obj[key]);
}
var a = [1, 2, 3, 4, 5, 6]
console.log(a[0]);
a.forEach((v) => {
console.log(v);
})
var obj = {
name: 'li',
age: 18
}
for (const key in obj) {
console.log(obj[key]);
}
var test = [1, 2, 3, 4, [5, 6, 7, 8], [9, 10, 11, 12, 13]]
test.forEach((v) => {
if (typeof v == "number") {
console.log(v);
} else {
v.forEach(j => {
console.log(j);
})
}
})
var test = [1, 2, 3, 4, [5, 6, 7, 8], [9, 10, 11, 12, 13]]
test.forEach((v) => {
if (typeof v == "number") {
console.log(v);
}
else {
v.forEach(j => {
console.log(j);
})
}
})
var input = document.querySelector("input")
var button = document.querySelector("button")
var result = document.querySelector(".result")
button.onclick = () => {
console.log(input.value)
result.innerText = input.value
}
</script>
</html>

60
历届学生/front-end-team/项目练习/学生项目/李康/js练习/search.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>Document</title>
</head>
<body>
<input type="text" placeholder="请输入关键字">
<ul></ul>
</body>
<script>
var result = [];
var list = [
'明天天气不好', '天气很好', '我的心情很好', '我不想学编程', '编程是我快乐',
'明天我想学习', '明天我们出去玩'
];
var mes = document.querySelector("input"),
ul = document.querySelector("ul")
mes.oninput = function () {
result = []
if (mes.value.length != 0) {
for (var i = 0; i < list.length; i++) {
if (list[i].includes(mes.value)) {
var spanText = `<span style="color:red">${mes.value}</span>`
var pushText = list[i].replace(mes.value, spanText)
result.push(pushText)
}
}
renderHTML()
} else {
ul.innerHTML = ""
}
}
function renderHTML() {
var html = ""
console.log(result); // 明天
// Array.prototype.forEach = function(callback){
// for（var i =0; i<this,length; i++){
// callback(this[i],i,this)
// }
// }
result.forEach(function (v, i) {
html += `<li>${v}</li>`
})
ul.innerHTML = html
}
</script>
</html>

91
历届学生/front-end-team/项目练习/学生项目/李康/js练习/tabs.html Normal file
View File

@@ -0,0 +1,91 @@
<!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;
}
ul {
display: flex;
}
.tabs_title {
height: 45px;
align-items: center;
}
.tabs_title li {
margin: 0 10px;
}
.tabs_content li {
display: none;
}
.active_content {
display: block !important;
}
.active_title {
color: red;
}
</style>
</head>
<body>
<ul class="tabs_title">
<li class="active_title">首页</li>
<li>社会</li>
<li>财经</li>
<li>体育</li>
</ul>
<ul class="tabs_content">
<li class="active_content">首页 的内容</li>
<li>社会 的内容</li>
<li>财经 的内容</li>
<li>体育 的内容</li>
</ul>
</body>
<script>
var titleLi = _(".tabs_title li");
var contentLi = _(".tabs_content li");
console.log(titleLi);
titleLi.forEach((v, i) => {
v.onclick = () => {
titleLi.forEach((j,index) => {
j.classList.remove("active_title")
contentLi[index].classList.remove("active_content")
});
v.classList.add("active_title");
contentLi[i].classList.add("active_content");
}
})
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

132
历届学生/front-end-team/项目练习/学生项目/李康/js练习/tabs2.html Normal file
View File

@@ -0,0 +1,132 @@
<!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;
}
ul {
display: flex;
}
.tabs_title {
height: 45px;
align-items: center;
}
.tabs_title li {
margin: 0 10px;
}
.tabs_content li {
display: none;
}
.active_content {
display: block !important;
}
.active_title {
color: red;
}
</style>
</head>
<body>
<ul class="tabs_title"></ul>
<ul class="tabs_content">
</ul>
</body>
<script>
var tabsData = [
{
id: 1,
title: '首页',
page: 1,
content: [
{ text: '首页的内容1' },
{ text: '首页的内容2' },
{ text: '首页的内容3' },
]
},
{
id: 2,
title: '社会',
page: 1,
content: [
{ text: '社会的内容1' },
{ text: '社会的内容2' }
]
},
{
id: 3,
title: '财经',
page: 1,
content: [
{ text: '财经的内容1' },
{ text: '财经的内容2' },
{ text: '财经的内容3' },
{ text: '财经的内容4' },
]
},
];
function renderTitle() {
tabsData.forEach((v, i) => {
$(".tabs_title").innerHTML += `<li class="${i == 0 ? 'active_title': ''}">${v.title}</li>`;
$(".tabs_content").innerHTML += `<li class="${i == 0 ? 'active_content': ''}"></li>`;
})
_(".tabs_title li").forEach((v,i) => {
v.onclick = () => {
index = 1;
_(".tabs_title li").forEach((j,idx) => {
j.classList.remove("active_title")
_(".tabs_content li") [idx].classList.remove("active_content");
});
v.classList.add("active_title");
_("tabs_content li")[i].classList.add("active_content");
renderContent();
}
})
}
function renderContent() {
_(".tabs_content li") [index].innerHTML = ""
tabsData[index].content.forEach(v => {
_(".tabs_content li")[index].innerHTML += `<p>${v.text}</p>`
})
}
renderTitle();
renderContent();
function _(className) {
return document.querySelectorAll(className)
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>