65 lines
1.5 KiB
HTML
65 lines
1.5 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>富强</title>
|
||
<style>
|
||
body {
|
||
height: 100vh;
|
||
position: relative;
|
||
}
|
||
|
||
span {
|
||
position: absolute;
|
||
transition: all 1s;
|
||
user-select: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
</body>
|
||
<script>
|
||
var index = 0;
|
||
var text = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"]
|
||
var body = document.querySelector("body")
|
||
body.onclick = function (e) {
|
||
var x = e.x,
|
||
y = e.y;
|
||
|
||
var span = document.createElement("span")
|
||
span.innerText = text[index]
|
||
|
||
span.style = `
|
||
left: ${x}px;
|
||
top: ${y}px;
|
||
color: hsla(${parseInt(Math.random() * 360)},100%,50%,1);
|
||
`
|
||
body.appendChild(span)
|
||
motion(span)
|
||
index++
|
||
if (index > 11) {
|
||
index = 0
|
||
}
|
||
}
|
||
|
||
|
||
function motion(el) {
|
||
// 让span 的top 自减 150px，也就是向上运动
|
||
setTimeout(function() {
|
||
el.style.top = `${parseInt(el.style.top) - 150}px`
|
||
}, 100)
|
||
|
||
// 运动完成后从body中删除这个span标签
|
||
setTimeout(function() {
|
||
body.removeChild(el)
|
||
}, 1200)
|
||
|
||
}
|
||
</script>
|
||
|
||
</html> |