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

163
历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/js/2.html Normal file
View File

@@ -0,0 +1,163 @@
<!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>
.qq {
list-style: none;
display: flex;
}
ul li{
margin-left: 20px;
list-style: none;
}
.qq1 li{
display: none;
}
.qqq{
color: red;
}
.qw{
display: block !important;
}
</style>
</head>
<body>
<ul class="qq">
</ul>
<ul class="qq1">
</ul>
</body>
<script>
let ddd = [
{
id: 1,
name: "社会",
date: [
{
tes: "社会 地方地方",
},
{
tes: "社会 地方地方",
},
{
tes: "社会 地方地方",
},
{
tes: "社会 地方地方",
}
]
},
{
id: 2,
name: "民主",
date: [
{
tes: "民主 地方地方",
},
{
tes: "民主 地方地方",
},
{
tes: "民主 地方地方",
},
{
tes: "民主 地方地方",
}
]
},
{
id: 3,
name: "文明",
date: [
{
tes: "文明 地方地方",
},
{
tes: "文明 地方地方",
},
{
tes: "文明 地方地方",
},
{
tes: "文明 地方地方",
}
]
},
{
id: 4,
name: "和谐",
date: [
{
tes: "和谐 地方地方",
},
{
tes: "和谐 地方地方",
},
{
tes: "和谐 地方地方",
},
{
tes: "和谐 地方地方",
}
]
}
]
Array.prototype.tt=function(wws){
let sss=[]
for(let i=0;i<this.length;i++){
sss.push(wws(this[i],i,this))
console.log(wws(this[i],i,this))
}
return sss.toString().replaceAll(",", "");
}
console.log(ddd)
function $(name) {
return document.querySelector(name);
}
function _(name) {
return document.querySelectorAll(name);
}
let pp = $(".qq")
let pp1 = $(".qq1")
function sssd(){
ddd.forEach(function (v, i) {
pp.innerHTML += `<li class='${i==0?'qqq':''}'>${v.name}</li>`
pp1.innerHTML += `<li class='${i==0?'qw':''}'>${
console.log(v.date),
v.date.tt(function (aa) {
return `<p>${aa.tes}</p>`
})
}</li>`
})
}
sssd();
let dd=_(".qq li");
let dd1=_(".qq1 li");
dd.forEach(function(v,id){
v.onclick=function(){
dd1.forEach(function(s,i){
s.className="";
dd[i].className="";
})
dd1[id].className="qw";
v.className='qqq';
}
})
// pp.style.width="300px"
// pp.style.height="300px"
// pp.backgroundcolor="aqua"
</script>
</html>

64
历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/js/3.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>
body {
margin: 0;
padding: 0;
height: 100vh;
position: relative;
}
span {
position: absolute;
transition: all 1s;
}
</style>
</head>
<body>
</body>
<script>
function $(name) {
return document.querySelector(name);
}
function _(name) {
return document.querySelectorAll(name);
}
let text = ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善'],
index = 0;
$("body").onclick = function (e) {
index += 1;
let span = document.createElement("span");
span.innerText = text[index]
if (index >= 11) {
index = 0;
}
let { x, y } = e
span.style = `left: ${x}px;top: ${y}px;color: hsl(${Math.random() * 360}, 100%, 50%);`
$("body").appendChild(span)
qwe(span, y)
}
let sc = 0
function qwe(q, y) {
setTimeout(function () {
q.style.top = `${y + Math.random() * 200}px`
}, 400);
let ssd = _("span");
console.log(ssd)
sc += 1
if (sc > 12) {
setTimeout(function () {
$("body").removeChild(ssd[0]);
}, )
}
}
</script>
</html>

60
历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/js/4.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>
<style>
span {
color: brown;
}
</style>
</head>
<body>
<input type="text">
<ul>
<li></li>
</ul>
</body>
<script>
function $(name) {
return document.querySelector(name);
}
function _(name) {
return document.querySelectorAll(name);
}
let date = ["就会加快", "摄氏度", "的方式三", "第三个", "加规划图", "公司的",]
let sss = []
$("input").oninput = function () {
sss = []
if ($("input").value.length != 0) {
date.forEach(function (v) {
if (v.includes($("input").value)) {
let ddfg = v.replaceAll($("input").value, `<span>${$("input").value}</span>`)
sss.push(ddfg)
}else{
// $("ul").innerHTML = ""
}
})
dds();
} else {
$("ul").innerHTML = ""
}
}
function dds() {
sss.forEach(function (c) {
$("ul").innerHTML = ""
$("ul").innerHTML += `<li>${c}</li>`;
})
}
</script>
</html>

170
历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/js/5.html Normal file
View File

@@ -0,0 +1,170 @@
<!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 {
position: relative;
}
span {
position: absolute;
transition: all 6s;
}
div {}
.qww {
position: relative;
}
.ttt {
width: 4rem;
height: 1.5rem;
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1rem;
}
</style>
</head>
<body>
<div class="qww"></div>
<div class="ttt">1</div>
<div class="ttt">2</div>
<div class="ttt">3</div>
<div class="ttt">4</div>
<div class="ttt">5</div>
</body>
<script>
function $(name) {
return document.querySelector(name);
}
function _(name) {
return document.querySelectorAll(name);
}
let shu = 5;//发射数量
let tts = _(".ttt")
console.log(tts)
wodf();
function wodf() {
tts.forEach(function (v, i) {
v.onclick = function () {
shu = i + 1;
}
})
}
//屏幕宽高
let w, h;
let text = ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善']
//第坐标数组
let zuobiao = [];
let span;
function shuijishu() {
let w = window.innerWidth / 2;
let h = window.innerHeight / 2;
zuobiao = [];
for (let i = 0; i < shu; i++) {
//第一象限
let yi1 = {};
yi1.x1 = Math.floor(Math.random() * w>30?Math.random() *w +(w-30):Math.random() *w);
yi1.y1 = Math.floor(Math.random() * h>30?Math.random() * h - 30:Math.random() * h);
//第二象限
yi1.x2 = Math.floor(Math.random() * w>30?Math.random() * w- 30:Math.random() * w);
yi1.y2 = Math.floor(Math.random() * h>30?Math.random() * h - 30:Math.random() * h);
//第三象限
yi1.x3 = Math.floor(Math.random() * w>30?Math.random() * w - 30:Math.random() * w);
yi1.y3 = Math.floor(Math.random() * h>30?Math.random() * h + (h - 30):Math.random() * h);
//第四象限
yi1.x4 = Math.floor(Math.random() * w>30?Math.random() * w + (w - 30):Math.random() * w);
yi1.y4 = Math.floor(Math.random() * h>30?Math.random() * h + (h - 30):Math.random() * h);
// console.log(yi1)
zuobiao.push(yi1);
}
console.log(zuobiao)
let dd = 0
for (let i = 0; i < zuobiao.length * 4; i++) {
if (dd >= 11) {
dd = 0;
} else {
dd += 1;
}
$(".qww").innerHTML += `<span class="bbb" style="left:${w}px;top:${h}px">${text[dd]}</span>`;
}
ssdc();
bian()
}
function ssdc() {
//疑问 为什么在定时器里过度生效
span = _("span");
setTimeout(function () {
for (let i = 0; i < shu; i++) {
span[i].style = `left:${zuobiao[i].x1}px;top:${zuobiao[i].y1}px;color: hsl(${Math.random() * 360}, 100%, 50%)`
span[i + shu].style = `left:${zuobiao[i].x2}px;top:${zuobiao[i].y2}px;color: hsl(${Math.random() * 360}, 100%, 50%)`
span[i + shu * 2].style = `left:${zuobiao[i].x3}px;top:${zuobiao[i].y3}px;color: hsl(${Math.random() * 360}, 100%, 50%)`
span[i + shu * 3].style = `left:${zuobiao[i].x4}px;top:${zuobiao[i].y4}px;color: hsl(${Math.random() * 360}, 100%, 50%)`
}
}, 300)
setTimeout(function () {
$(".qww").innerHTML = "";
}, 6000)
}
function bian() {
setTimeout(function () {
let w = window.innerWidth / 2;
let h = window.innerHeight / 2;
zuobiao = [];
for (let i = 0; i < shu; i++) {
//第一象限
let yi1 = {};
yi1.x1 = Math.floor(Math.random() * w + (w - 30));
yi1.y1 = Math.floor(Math.random() * h - 30);
//第二象限
yi1.x2 = Math.floor(Math.random() * w - 30);
yi1.y2 = Math.floor(Math.random() * h - 30);
//第三象限
yi1.x3 = Math.floor(Math.random() * w - 30);
yi1.y3 = Math.floor(Math.random() * h + (h - 30));
//第四象限
yi1.x4 = Math.floor(Math.random() * w + (w - 30));
yi1.y4 = Math.floor(Math.random() * h + (h - 30));
// console.log(yi1)
zuobiao.push(yi1);
}
span = _("span");
for (let i = 0; i < shu; i++) {
span[i].style = `left:${zuobiao[i].x1}px;top:${zuobiao[i].y1}px;color: hsl(${Math.random() * 360}, 100%, 50%)`
span[i + shu].style = `left:${zuobiao[i].x2}px;top:${zuobiao[i].y2}px;color: hsl(${Math.random() * 360}, 100%, 50%)`
span[i + shu * 2].style = `left:${zuobiao[i].x3}px;top:${zuobiao[i].y3}px;color: hsl(${Math.random() * 360}, 100%, 50%)`
span[i + shu * 3].style = `left:${zuobiao[i].x4}px;top:${zuobiao[i].y4}px;color: hsl(${Math.random() * 360}, 100%, 50%)`
}
}, 3000)
}
shuijishu()
setInterval("shuijishu()", 6200);
</script>
</html>
<!-- <span class="bbb" style="left:${zuobiao[i].x1}px;top:${zuobiao[i].y1}px">qqqq</span><span style="left:${zuobiao[i].x2}px;top:${zuobiao[i].y2}px">qqqq</span>
<span style="left:${zuobiao[i].x3}px;top:${zuobiao[i].y3}px">qqqq</span><span style="left:${zuobiao[i].x4}px;top:${zuobiao[i].y4}px">qqqq</span>` -->

182
历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/js/chehua.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>侧滑</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
overflow: hidden;
}
li {
display: flex;
align-items: center;
height: 50px;
border-bottom: 1px solid #ebe8e8;
padding: 0 10px;
box-sizing: border-box;
font-size: 14px;
position: relative;
transition-duration: 0.1s;
transition-duration: 0.1s;
transition: all 0.2s;
}
.action {
color: #fff;
font-size: 14px;
width: 165px;
display: flex;
height: 100%;
position: absolute;
right: -165px;
}
.action div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.action .top {
background: #009bfe;
}
.action .read {
background: #fe8d3f;
}
.action .delt {
background: #ff5967;
}
</style>
</head>
<body>
<ul>
<li>
测试1
<div class="action">
<div class="top">置顶</div>
<div class="read">未读</div>
<div class="delt">删除</div>
</div>
</li>
<li>
测试2
<div class="action">
<div class="top">置顶</div>
<div class="read">未读</div>
<div class="delt">删除</div>
</div>
</li>
<li>
测试3
<div class="action">
<div class="top">置顶</div>
<div class="read">未读</div>
<div class="delt">删除</div>
</div>
</li>
</ul>
</body>
<script>
function $(name) {
return document.querySelector(name);
}
function _(name) {
return document.querySelectorAll(name);
}
_("ul li").forEach(function (v, i) {
let startx, leftXArr = [],entt;
//手指按下事件
v.ontouchstart = function (e) {
startx = e.touches[0].clientX;
console.log("屏幕按下坐标：" + startx)
_("ul li").forEach(function (item, j) {
if (i != j) {
item.style = `
transform: translateX(0px);
`
}
})
}
//手指移动事件
let pp = 0;
let eq = 0;
v.ontouchmove = function (e) {
let hmovex = e.touches[0].clientX;
leftXArr.push(hmovex);
// console.log("屏幕移动坐标：" + leftXArr);
let df = leftXArr[0] - leftXArr[leftXArr.length - 1];
// let df1=leftXArr[leftXArr.length-1]-leftXArr[leftXArr.length-2];
console.log("移动的px：" + df)
if (df >= 0 && df <= 165) {
v.style = `
transform: translateX(-${df}px);
`
} else if (df < 0) {
v.style = `
transform: translateX(0px);
`
leftXArr = []
}
else {
// pp+=1
// let dfx=(df-(df-165+pp));
// console.log("pp"+pp)
// // leftXArr = []
// if(leftXArr[leftXArr.length-1]>leftXArr[leftXArr.length-2]){
// console.log("值"+dfx)
// console.log("进来了")
// v.style = `
// transform: translateX(-${dfx}px);
// `
// }else{
v.style = `
transform: translateX(-165px);
`
// }
}
// console.log(leftXArr.length)
}
//手指拿起事件
v.ontouchend = function (e) {
entt= e.changedTouches[0].clientX
if (leftXArr[0] - leftXArr[leftXArr.length - 1] > 55 && leftXArr[leftXArr.length - 1] - leftXArr[leftXArr.length - 2] < 0&&startx!=entt) {
v.style = `
transform: translateX(-165px);
`
} else if (leftXArr[0] - leftXArr[leftXArr.length - 1] > 110) {
v.style = `
transform: translateX(-165px);
`
}
else {
v.style = `
transform: translateX(-0px);
`
leftXArr = []//数组清空
}
}
})
</script>
</html>

BIN
历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/js/hb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

65
历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/js/index.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>
.sun{
display: flex;
}
ul li {
margin-left: 20px;
list-style: none;
cursor:pointer;
}
.sss li{
display: none;
}
.qqq{
color: red;
}
.qw{
display: block !important;
}
</style>
</head>
<body>
<ul class="sun">
<li class="qqq">富强</li>
<li>民主</li>
<li>文明</li>
<li>和谐</li>
</ul>
<ul class="sss">
<li>富强 的内容</li>
<li>民主 的内容</li>
<li>文明 的内容</li>
<li>和谐 的内容</li>
</ul>
</body>
<script>
function $(name){
return document.querySelector(name);
}
function _(name){
return document.querySelectorAll(name);
}
let dd=_(".sun li");
let dd1=_(".sss li");
dd.forEach(function(v,id){
v.onclick=function(){
dd1.forEach(function(s,i){
s.className="";
dd[i].className="";
})
dd1[id].className="qw";
v.className='qqq';
}
})
</script>
</html>

165
历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/js/红包.html Normal file
View File

@@ -0,0 +1,165 @@
<!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 {
margin: 0;
padding: 0;
height: 100vh;
}
img {
height: 85px;
width: 70px;
position: fixed;
top: 25px;
}
.Pop {
width: 100%;
height: 100%;
background-color: #00000040;
z-index: 999999;
display: none;
}
.cencer {
width: 400px;
height: 300px;
background: #fff;
border-radius: 10px;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: column;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 999999;
}
.dialog_title {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
border-bottom: 1px solid #e0e0e0;
}
.dialog_title .close {
font-size: 30px;
cursor: pointer;
}
.dialog_content {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
</style>
</head>
<body>
<div class="Pop">
<div class="cencer">
<div class="dialog_title">
<div class="text">恭喜中奖</div>
<div class="close">x</div>
</div>
<div class="dialog_content">
恭喜中的三等奖
</div>
</div>
</div>
</body>
<script>
let { innerWidth, innerHeight } = window, imgg = null;
function envelope() {
let signx = parseInt(Math.random() * (innerWidth - 70));
let img = document.createElement("img");
console.log(img)
img.src = "./hb.png";
img.style = `
left:${signx}px;
top:-85px;
`
console.log(signx);
$("body").appendChild(img)
vertical(img);
//红包点击事件
img.onclick = function () {
//循环将垂直计时器暂停
_("img").forEach(function (v) {
clearInterval(v.ininid)
})
//暂停红包生成
clearInterval(generate)
//将弹窗显示
$(".Pop").style = `display: block;`
imgg = img;
random();
}
}
function vertical(img) {
img.ininid = setInterval(function () {
let yy = parseInt(img.style.top);
if (yy >= innerHeight) {
$("body").removeChild(img)
clearInterval(img.ininid)
} else {
img.style.top = ` ${yy + 10}px `
console.log(1)
}
}, 200)
}
//随机中将函数
function random() {
let shuji = Math.random() * 1;
if (shuji < 0.1) {
$(".dialog_content").innerText = "一等奖";
} else if (shuji < 0.3 && shuji > 0.1) {
$(".dialog_content").innerText = "二等奖";
} else {
$(".dialog_content").innerText = "三等奖";
}
}
//关闭窗体
$(".close").onclick = function () {
$(".Pop").style.display = "none"
$("body").removeChild(imgg);
clearInterval(imgg.ininid)
_("img").forEach(function (v) {
vertical(v)
})
generate1()
}
let generate = null;
function generate1() {
generate = setInterval(function () {
envelope()
}, 500)
}
generate1()
function $(name) {
return document.querySelector(name);
}
function _(name) {
return document.querySelectorAll(name);
}
</script>
</html>