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

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>` -->