first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/逯帅帅/项目开发/学生项目/应越波/day5/搜索框搜索.html
+++ b/历届学生/逯帅帅/项目开发/学生项目/应越波/day5/搜索框搜索.html
@@ -0,0 +1,77 @@
+<!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>
+
+    <script>
+        // 思路:1.获取input和ul的值
+        //      2.给input创建input事件
+        //      3.遍历list数组,拿用户输入的值(input.value)和list里面的数组做对比,前提时是大于-1,要做个if选择判断
+        //      4.把符合判断条件的值使用push方法追加进新数组中保存
+             
+        //      5.遍历新数组,i的值实际上就是用户输入的值和list数组里面的值匹配正确的值,使用模板字符串渲染进ul里面
+        //      6.但此时有很多bug,要先置空再渲染进ul里面
+        //      6.外面整体要加判断,用户输入的值使用trim()方法去除俩端空格,判断是否为0,不为0执行里面的代码,为0责清空
+
+        //      7.最复杂的来了,如何把字变红?
+        //      8.使用substr(起始位置,截取长度),此方法是截取特定长度的字符串
+        //        这里面的起始位置其实就是indexof()返回的索引值,截取长度就是用户输入的值的长度
+        //     9.生成新的样式,并使用模板字符串包裹一层span标签返回给新数组,里面使用行内样式变成红色
+        //     10.把生成新的样式替换进新数组中即可
+
+
+
+        var list = ['html', '学习html', '天气很好吗', '你很好吗', 'JS学习', '不想学习', 'css测试', '明天要测试了'];
+
+        // 获取input的值
+        let input = document.querySelector('input');
+        // 获取ul的值
+        let ul=document.querySelector('ul');
+
+       
+        // 为获取到的值注册input事件
+        input.oninput=()=>{
+            //  创建一个新数组,放在input事件里面,每次都会初始化,符合我们的要求
+            let newArr=[];
+
+            // 如果用户输入的值去除俩端空格的长度不为0
+           if(input.value.trim().length!=0){
+                    // 遍历list数组
+                list.forEach((item,index)=>{
+                    // 判断索引值是否大于0，大于0就放进一个新数组里面，并追加进ul里面
+                    if(item.indexOf(input.value)>-1){
+                        //获取下标
+                        let newIndex=item.indexOf(input.value);
+                        // 获取截取长度
+                        let length=input.value.length;
+                        //生成新的样式
+                        let newStar=`<span style="color: red">${item.substr(newIndex,length)}</span>`;
+                        // 返回给新数组,保存并返回
+                       newArr.push(item.replace(input.value, newStar));
+                    }
+                });
+
+                // 先置空再保留
+                ul.innerHTML='';
+                // 遍历新数组
+                newArr.forEach((i,j)=>{
+                    ul.innerHTML+=`<li>${i}</li>`;
+                })
+           }else{
+                ul.innerHTML='';
+           }
+        };
+    </script>
+</body>
+
+</html>