78 lines
1.8 KiB
HTML
78 lines
1.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,
|
||
html {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
}
|
||
|
||
span {
|
||
position: fixed;
|
||
transition: all 1s;
|
||
user-select: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
</body>
|
||
|
||
<script>
|
||
// 给body绑定点击事件，点击的时候动态获取 鼠标的 x,y 坐标
|
||
// 使用js动态的去创建标签，设置定位属性，再设置left top 数值，再使用hsla来设置随机颜色, 最后将span标签放到
|
||
// 网页上
|
||
|
||
var text = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
|
||
var index = 0;
|
||
|
||
function createdSpan() {
|
||
var span = document.createElement("span");
|
||
var X = Math.random() * document.body.clientWidth;
|
||
|
||
span.style.left = `${X}px`;
|
||
span.style.bottom = `0px`;
|
||
span.style.color = `hsla(${parseInt(Math.random() * 360)},100%,50%,1)`;
|
||
span.innerText = text[index];
|
||
index += 1;
|
||
index > 11 ? index = 0 : ''
|
||
|
||
|
||
$("body").appendChild(span)
|
||
|
||
motion(span)
|
||
}
|
||
|
||
function motion(el) {
|
||
var offset = Math.random() * document.body.clientHeight;
|
||
console.log(offset);
|
||
setTimeout(() => {
|
||
el.style.bottom = `${offset}px`
|
||
}, 100)
|
||
|
||
setTimeout(() => {
|
||
$("body").removeChild(el)
|
||
}, 1400)
|
||
}
|
||
|
||
|
||
setInterval(() => {
|
||
createdSpan()
|
||
}, 100);
|
||
|
||
|
||
function $(className) {
|
||
return document.querySelector(className)
|
||
}
|
||
|
||
</script>
|
||
|
||
</html> |