78 lines
2.7 KiB
HTML
78 lines
2.7 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{
|
||
height: 100%;
|
||
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<script>
|
||
// 思路:1.给body设置高100%,但直接设置无效,给body设置高的同时也要给其父元素html设置高100%
|
||
// 2.我们不需要遍历数组,可以初始化一个索引,每次点击让其自加,函数里面有个event,里面详细记录了x和y轴
|
||
// 3.使用clearElement创建元素,在使用模板字符串添加内容,这里可以使用innerHtml添加元素,但有些许的不方便,然后使用appchild追加进body
|
||
// 4.设置一个定时器改变top值,使其向上动起来
|
||
// 5.再设置一个定时器使其消失
|
||
|
||
// 初始化一个值
|
||
let index=0;
|
||
// 创建数组
|
||
let arr=['富强','民主','文明','自由','平等','公正','法治','爱国','敬业','诚信','友善','和谐'];
|
||
|
||
// 获取body元素
|
||
let body=document.querySelector('body');
|
||
|
||
// 为其注册点击事件，函数里面有个event，里面详细介绍了许多东西，其中就有鼠标点击的时候的x和y的坐标
|
||
body.onclick=(event)=>{
|
||
// 点击时，获取x，y坐标
|
||
var x=event.x,
|
||
y=event.y;
|
||
|
||
// 三目运算符做判断，初始化的值大于数组个数时为0
|
||
index>arr.length-1?index=0:'';
|
||
|
||
// 创建span标签
|
||
var span=document.createElement('span');
|
||
// 把数组放进去
|
||
span.innerHTML=arr[index];
|
||
// 添加样式
|
||
span.style=`
|
||
position: fixed;
|
||
opacity: 1;
|
||
top:${y}px;
|
||
left:${x}px;
|
||
color: hsl(${parseInt(Math.random() * 360)},100%,50%);
|
||
transition: all .3s;`;
|
||
// 把创建好且添加了样式的span标签追加近body页面中
|
||
body.appendChild(span);
|
||
|
||
// 函数，放在外面，使其执行更快，放在里面不能立即执行
|
||
animation(span, y);
|
||
|
||
// 自加
|
||
++index;
|
||
};
|
||
|
||
|
||
function animation(span,y) {
|
||
// 设置定时器，点击的时候y轴移动并且变透明
|
||
setTimeout(function(){
|
||
span.style.top=`${y-100}px`;
|
||
span.style.opacity=0;
|
||
},100);
|
||
|
||
// 设置定时器，一定时间删除
|
||
setTimeout(function(){
|
||
body.removeChild(span);
|
||
},400);
|
||
}
|
||
|
||
</script>
|
||
</body>
|
||
</html> |