113 lines
3.1 KiB
HTML
113 lines
3.1 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 {
|
||
transition: all ease 1s;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
</body>
|
||
|
||
<script>
|
||
// 1：为整个body绑定一个点击事件，点击后应该在鼠标点击的地方生成一个文字
|
||
// 鼠标点击的地方：获取鼠标点击后的x，y轴距离
|
||
// 文字如何出现：依次走数组每一个元素
|
||
// 让字产生随机的颜色
|
||
// 生成一个标签 span
|
||
// 最后把js生成的span放到网页上
|
||
|
||
// 2：让网页上的元素向上移动，在移动结束后消失
|
||
// 让元素移动，修改定位的 top 距离
|
||
// 让元素消失，直接从body上删除元素span
|
||
|
||
var body = document.querySelector("body");
|
||
|
||
var list = ["富强","民主", "文明", "和谐", "自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善"];
|
||
var index = 0;
|
||
|
||
body.onclick = function (e) {
|
||
var X = e.x, Y = e.y;
|
||
|
||
var span = document.createElement("span");
|
||
span.innerText = list[index]
|
||
|
||
// 随机产生一个色相
|
||
var color = parseInt(Math.random() * 360);
|
||
|
||
span.style = `
|
||
position: fixed;
|
||
left: ${X}px;
|
||
top: ${Y}px;
|
||
color: hsl(${color},100%,50%,1);
|
||
`
|
||
|
||
body.appendChild(span)
|
||
|
||
var direction = [
|
||
'LeftTop', 'LeftBottom',
|
||
'RightTop', 'RightBottom',
|
||
];
|
||
|
||
var directionIndex = parseInt(Math.random() * direction.length)
|
||
|
||
|
||
motion(direction[directionIndex], span, X, Y)
|
||
|
||
function motion(direction, el, x, y) {
|
||
var newX = Math.random() * x;
|
||
var newY = Math.random() * y;
|
||
|
||
setTimeout(function() {
|
||
switch (direction) {
|
||
case "LeftTop":
|
||
el.style.left = `${x - newX}px`;
|
||
el.style.top = `${y - newY}px`;
|
||
break;
|
||
|
||
case "RightTop":
|
||
el.style.left = `${x + newX}px`;
|
||
el.style.top = `${y - newY}px`;
|
||
break;
|
||
|
||
case "LeftBottom":
|
||
el.style.left = `${x - newX}px`;
|
||
el.style.top = `${y + newY}px`;
|
||
break;
|
||
|
||
case "RightBottom":
|
||
el.style.left = `${x + newX}px`;
|
||
el.style.top = `${y + newY}px`;
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
},50)
|
||
|
||
setTimeout(function() {
|
||
body.removeChild(el)
|
||
},1050)
|
||
}
|
||
|
||
|
||
index+=1;
|
||
if (index > 11) {
|
||
index = 0;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
</script>
|
||
</html> |