first commit

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

@@ -0,0 +1,104 @@
+<!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;
+        }
+
+        ul {
+            width: 152px;
+            border-radius: 6px;
+            box-shadow: 2px 2px 9px #d7d7d7;
+            display: none;
+            position: fixed;
+        }
+
+        li {
+            height: 40px;
+            padding: 0 15px;
+            box-sizing: border-box;
+            line-height: 40px;
+        }
+    </style>
+</head>
+
+<body>
+    <ul>
+        <li>新建文件夹</li>
+        <li>上传文件</li>
+        <li>上传文件夹</li>
+        <li>刷新网页</li>
+    </ul>
+</body>
+<!-- 1 获取事件；   2 绑定事件；    3 事件处理函数。
+
+（阻止默认事件：e.preventDefault();）  （阻止事件冒泡（子元素冒泡）：e.stopPropagation()）
+
+该事件：首先，阻止网页默认的右键菜单，并将自制菜单固定并隐藏在网页上；
+        其次，(e)监听鼠标的点击位置（x轴和y轴），通过判断右击菜单和vh、vw的距离来动态调整右击菜单。
+甲方需求：自制一个右击菜单，然后通过获取鼠标点击的位置，给网页动态的加上右击菜单。 -->
+<script>
+    // 返回值
+    function $(className) {
+        return document.querySelector(className)
+    }
+    // 返回数组
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+
+    var body = $('body')
+    var ul = $('ul')
+    // console.log(1);
+
+    // 判断给谁绑定事件：菜单在用户可视范围区域都能打开，所以不可能是给ul绑定，vh＋vw=body。因此，是给body绑定右击菜单事件
+    // .oncontextmenu在用户点击鼠标右键打开上下文菜单时触发
+    body.oncontextmenu = function(e){
+        e.preventDefault();
+        var { x , y } = e
+        // console.log("x , y",x,y);
+        var { clientWidth , clientHeight } = document.body
+        // console.log('1,2',clientWidth , clientHeight);
+    // 判断：首先判断菜单会出现的情况，xy轴都不够即在屏幕角落，然后是x或者y单方面不够等三个特殊情况以及正常情况。
+    //       菜单长宽160，152；右边框：clientWidth-x<菜单宽度152，就放左边——怎么放：x-152其他同理
+    if(clientWidth - x < 152 && clientHeight - y < 160){
+        ul.style =
+         `left:${x-152}px;
+         top:${y - 160}px;
+         display:block`
+    }else if(clientWidth - x < 152){
+        ul.style =
+         `left:${x-152}px;
+         top:${y}px;
+         display:block`
+    }else if(clientHeight - y < 160){
+        ul.style =
+         `left:${x}px;
+         top:${y - 160}px;
+         display:block`
+    }else{
+        ul.style =
+         `left:${x}px;
+         top:${y}px;
+         display:block`
+    }
+    
+    }
+
+</script>
+
+</html>

历届学生/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 -->

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

@@ -0,0 +1,57 @@
+<!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>
+</head>
+
+<body>
+    <input type="text" placeholder="请输入文本">
+    <ul></ul>
+</body>
+<script>
+    // 1 获取事件；   2 绑定事件；    3 事件处理函数。
+
+    // 该事件：首先要获取用户输入的文本，需要先判断有无文本，有文本才能进行获取；
+    //         其次，文本获取后，要判断默认词组里是否有某一项与之匹配，随后将符合条件的词条统一放入html上；
+    // 甲方需求：将词库里和用户输入匹配上的关键词标红。
+    var words = ['今天天气真好', 'html学习', '不喜欢html', '热爱学习', '天气不好，是阴天', '不喜欢学习'];
+    // 1  获取事件
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+
+    var input = $('input')
+    var ul = $('ul')
+    // console.log(1);
+    // 2  绑定事件
+    input.oninput = function () {
+        // console.log(2);
+        var pipei = []
+        if (input.value.length > 0) {
+            words.forEach((value, index) => {
+                if (value.indexOf(input.value) > -1) {
+                    // console.log("返回3",value, index);
+                    var span = `<span style="color: red;">${input.value}</span>`
+                    var li = `<li> ${ value.replace(input.value, span) } </li>`
+                    pipei.push(li)
+                }
+            })
+        }
+        ul.innerHTML = ''
+        if (pipei.length > 0) {
+            pipei.forEach((item, ind) => {
+                ul.innerHTML += item
+            })
+        }
+    }
+</script>
+
+</html>