first commit

历届学生/font-end-nine/项目练习/学生项目/张婷/练习/案例自写/0617/案例六.html

@@ -0,0 +1,142 @@
+<!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 {
+            height: 100vh;
+        }
+
+        body,
+        ul,
+        li {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        span {
+            position: fixed;
+
+        }
+    </style>
+</head>
+
+<body>
+    <!-- 1 获取事件；   2 绑定事件；    3 事件处理函数。
+
+该事件：首先：是词组的每一项在鼠标点击以后能出现在屏幕：
+             {1、定义词组；2、获取鼠标的x、y值，为其绑定点击事件；3、用js创建span标签用来存储定义词组里面的每一项；
+             4、span标签出现的xy轴位置是根据鼠标决定的，所以将获取的鼠标xy值给span标签，并在html显示； }
+        其次：设置动画。
+甲方需求：通过鼠标点击屏幕按顺序循环出现定义词组里的每一项，并且每一项都会动态的向上运动一段距离以后消失不见  -->
+</body>
+<script>
+    // 返回值
+    function $(className) {
+        return document.querySelector(className)
+    }
+    // 返回数组
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+
+    var body = $('body')
+    var words = ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善'];
+    var index = 0
+    body.onclick = function (e) {
+        var {
+            x,
+            y
+        } = e
+        // console.log('1,2',x,y);
+        var span = document.createElement("span");
+        span.innerText = words[index]
+        console.log(span);
+        index += 1
+        if (index > 11) {
+            index = 0
+        }
+
+        span.style = `
+          left: ${x}px;
+          top: ${y}px;
+        `;
+
+        body.appendChild(span)
+
+        var tops = span.style.top.split('px')[0] //点击的起始位置(split字符串分割)
+
+        // 开始思考怎么做动画
+        //元素上移过渡动画
+        // function moves(){
+        //     // console.log('span',span.style.top.split('p'));
+        //     var tops = span.style.top.split('px')[0] //点击的起始位置(split字符串分割)
+        //     //分步处理到目标位置
+        //     function toTop(){
+        //         // debugger
+        //         var now = Number(span.style.top.split('px')[0]) //当前位置
+        //         if(now > tops-60){
+        //             setTimeout(()=>{
+        //                 span.style.top = `${now - 1}px`
+        //                 toTop()
+        //             },10)
+        //         }else{
+        //             body.removeChild(span)
+        //         }
+        //     }
+        //     toTop()  
+        // }
+
+        
+
+        // function moves() {
+        //     var now = Number(span.style.top.split('px')[0]) //当前位置
+        //     if (now > tops - 60) {
+        //         setTimeout(() => {
+        //             span.style.top = `${now - 1}px`
+        //             moves()
+        //         }, 5)
+        //     } else {
+        //         setTimeout(function(){
+        //             body.removeChild(span)
+        //         },100)
+        //     }
+        // }
+        
+        var moveId = null;//用于保存 重绘动画 id  在取消动画时需要使用
+        function moves() {
+           
+            var now = Number(span.style.top.split('px')[0]) //当前位置
+            if (now > tops - 60) {
+                span.style.top = `${now - 1}px`
+                // moves()
+                moveId = window.requestAnimationFrame(moves)//动画＋（具体怎么处理）
+            } else {
+                window.cancelAnimationFrame(moveId)
+                setTimeout(function(){
+                    body.removeChild(span)
+                },100)
+            }
+        }
+
+
+
+        moves()    
+    }
+</script>
+
+</html>
+<!-- 转化为number
+'12px'.split('px')
+(2) ['12', '']0: "12"1: ""length: 2[[Prototype]]: Array(0)
+'12px'.split('px')[0]
+'12'
+Number('12px'.split('px')[0])
+12
+Number('12')
+12 -->