75 lines
1.6 KiB
HTML
75 lines
1.6 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 {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
span {
|
|
position: fixed;
|
|
user-select: none;
|
|
transition: all 1s;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
<script>
|
|
let text = ['富强','民主','文明','和谐','自由','平等','公正','法治','爱国','敬业','诚信','友善'],
|
|
index = 0;
|
|
|
|
$("body").onclick = function(e) {
|
|
// let x = e.x, y = e.y;
|
|
let { x,y } = e;
|
|
let span = document.createElement("span");
|
|
span.innerText = text[index]
|
|
|
|
span.style = `
|
|
left: ${x}px;
|
|
top: ${y}px;
|
|
color: hsl(${Math.random() * 360}, 100%, 50%);
|
|
`;
|
|
// span.style.position = `fixed`;
|
|
// span.style.left = `${x}px`;
|
|
// span.style.top = `${y}px`;
|
|
|
|
$("body").appendChild(span);
|
|
|
|
motion(span ,y)
|
|
|
|
index+=1;
|
|
if (index > 11) {
|
|
index = 0
|
|
}
|
|
}
|
|
|
|
function motion(el, top) {
|
|
setTimeout(function() {
|
|
el.style.top = `${top - 200}px`;
|
|
}, 300)
|
|
setTimeout(function() {
|
|
$("body").removeChild(el);
|
|
}, 1300)
|
|
}
|
|
|
|
|
|
function $(className) {
|
|
return document.querySelector(className);
|
|
}
|
|
|
|
function _(className) {
|
|
return document.querySelectorAll(className);
|
|
}
|
|
|
|
</script>
|
|
</html> |