first commit

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