170 lines
5.8 KiB
HTML
170 lines
5.8 KiB
HTML
<!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>` --> |