first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/吴欣阳/项目开发/上课项目/js案例/富强.html
+++ b/历届学生/吴欣阳/项目开发/上课项目/js案例/富强.html
@@ -0,0 +1,113 @@
+<!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>