first commit

历届学生/逯帅帅/项目开发/学生项目/应越波/day5/核心价值观动画.html

@@ -0,0 +1,78 @@
+<!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>