first commit

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

@@ -0,0 +1,29 @@
+<!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>状态切换和颜色随机</title>
+</head>
+<body>
+    <button>哈喽，点我有惊喜</button>
+    <div style="display: none;" class="text">嘻嘻，想不到吧</div>
+</body>
+<script>
+    var button = document .querySelector("button")
+    var text = document .querySelector(".text")
+    console.log(button);
+    button.onclick = function(){
+        // console.log('123');打印尝试绑定点击事件是否成功
+        if(text.style.display == "block"){
+            text.style.display = "none"
+        }else{
+            text.style.display = "block"
+            // 以上三行，实现点击文本显示和隐藏的相互切换
+            text.style.color = `hsl(${Math.random()*360},100%,50%)`
+            // 实现文本显示时，文本颜色随机切换
+        }
+    }
+</script>
+</html>

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

@@ -0,0 +1,97 @@
+<!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>
+        .title {
+            display: flex;
+            list-style: none;
+        }
+
+        .title .active {
+            color: red;
+        }
+
+        .title li {
+            margin-right: 30px;
+        }
+
+        .content {
+            display: flex;
+            list-style: none;
+        }
+
+        .content .active {
+            display: block;
+        }
+
+        .content li {
+            margin-right: 30px;
+            display: none;
+        }
+    </style>
+</head>
+
+<body>
+    <ul class="title">
+        <li class="">推荐</li>
+        <li>电视剧</li>
+        <li>电影</li>
+        <li>综艺</li>
+    </ul>
+    <ul class="content">
+        <li class="">推荐内容</li>
+        <li>电视剧内容</li>
+        <li>电影内容</li>
+        <li>综艺内容</li>
+    </ul>
+
+</body>
+<script>
+    function $(className) {
+        return document.querySelectorAll(className)
+    }
+    var title_li = $('.title li')
+    var content_li = $('.content li')
+    // console.log(title_li);能打印出来所以获取节点成功
+
+    title_li.forEach(function (item, index) {
+        // console.log('内容',item, index);title_li里li标签的内容和下标都打印出来，所以获取节点成功
+        // 绑定点击事件
+        item.onclick = function () {
+            // console.log('e',e.target.className);
+            // 判断数组里面被点击的值是否具有激活态，如果有则去除该值和其包含的内容的激活态
+            if(item.className == 'active'){
+               item.className = ''
+               content_li[index].className = ''
+
+            }
+            // 除此之外，给点击的没有的加上激活态，方法采取以下内容
+            else{
+                        // 先清楚所有值的激活态
+                    title_li.forEach(function (A, a) {
+                        // A已经就是title_li里面具体的值了
+                        A.className = ''
+                        // 数组＋下标可以取到数组里面具体的值，然后content_li是一个数组;
+                        // 所以要想清楚里面li标签的类名，需要具体到某一个上值上，
+                        // 加之title_li和content_li的下标是一致的，所以可以直接＋[a]
+                        content_li[a].className = ''
+                    })
+                    // 再给具体被点击到的值加上激活态
+                item.className = 'active'
+                content_li[index].className = 'active'
+
+            }
+            
+            // 同上，是加上激活态
+        }
+
+
+    })
+</script>
+
+</html>

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

@@ -0,0 +1,66 @@
+<!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>头部滚动固定</title>
+    <style>
+        body{
+            height: 1000px;
+        }
+        .header {
+            width: 100%;
+            height: 50px;
+            margin-top: 120px;
+            background: red;
+        }
+        /* 首先，顶部滑动到一定条件距离，会出现固定的状态。
+        因此，给这个状态添加一个类名；并通过js动态的在达成条件后加入此状态。 */
+        .position{
+            width: 100%;
+            position: fixed;
+            left: 0;
+            top: 0;
+            /* 顶部距离会受margin-top的影响，因此也要为0 */
+            margin-top: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="header"></div>
+</body>
+<!-- 首先判断，所谓的顶部header在父元素body上，实际上是没有变动的，变动的距离是父元素body到顶部的距离
+因此变动的实际上是父元素。
+思路：我们可以先获取body和header这个元素，然后通过判定body的scrollTop（滚动条的垂直位置，向下滑动值随之增大)；
+当scrollTop>margin-top120时，header和vh小于等于0，因此实现固定，否则就还是原有的header状态。 -->
+<script>
+    function $(className){
+        return document.querySelector(className)
+    }
+    // 实际上,直接 $('.header') $('body')这样，就已经可以获取节点了
+    // 下面这样是为了简写和方便一点
+
+
+    // 1：   获取节点并赋值
+    var header = $('.header')
+    var body = $('body')
+
+
+    // 2：   绑定事件和处理函数
+    body.onscroll = function(){
+        // console.log(11);滚动显示11说明事件绑定成功
+
+// document.documentElement.scrollTop包含整个html，我们所能看到的距离顶部的距离
+        if (document.documentElement.scrollTop >= 120){
+
+// header position实际上就类似于公共css里面的类名直接追加到html上的书写方式
+            header.className = "header position"
+        }else{
+            header.className = "header"
+        }
+    }
+</script>
+</html>

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

@@ -0,0 +1,100 @@
+<!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>
+    </style>
+</head>
+
+<body>
+    <div>
+        <input type="text" placeholder="请输入搜索关键字">
+        <!-- 空一个ul用来将空数组里存储的匹配值放到html上显示给用户选择 -->
+        <ul>
+        </ul>
+    </div>
+
+</body>
+<script>
+    // 这是推荐词组具体包含内容
+    var words = ['今天天气真好', 'html学习', '不喜欢html', '热爱学习', '天气不好，是阴天', '不喜欢学习'];
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    var input = $('input')
+    // console.log(input);能打印出来，所以获取节点成功
+
+    var ul = $('ul')
+
+
+    // 绑定事件:oninput用户输入事件
+    input.oninput = function () {
+        // console.log(input);能打印出来，绑定事件成功    
+
+
+        var pipei = []
+        // 定义一个空数组来存储我输入内容能匹配上推荐词组里面相关的具体值
+
+        // 输入时触发，所以首先用if判断input里面有无输入值（由input.value获取具体文本值）,有则执行下一个内容
+        // 用输入值的长度是否为0判断，有无输入值
+        if (input.value.length != 0) {
+            // console.log(input.value);能获取input里面具体输入的文本值，所以属性选择成功
+
+
+
+            // 有值则判断该值是否为定义词组所包含的值，因为定义词组是一个数组，所以需要循环比较数组里的每一项是否包含该值
+            words.forEach((value, index) => {
+                // console.log(value,index)//当输入时能获取定义词组里的每一项值,所以循环成功
+
+// 拓展：indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置（即下标）。如果没有找到匹配的字符串则返回 -1。 
+
+                // if判断是否为数组含有内容，用父 indexof 子 返回值判断，>-1则包含，
+                // 然后将数组符合值取出，追加到新数组里进行后续使用
+                if (value.indexOf(input.value) > -1) {
+
+                    // 定义一个span标签放入用户输入的值，值的颜色变红
+                    var span = `<span style="color: red;">${input.value}</span>`
+
+// 拓展：直接使用“str.replace("需要替换的字符串","新字符串")”来替换;   
+                    
+                    // 定义一个li标签，便于将词组里面的每一项放入html上，供用户选择
+                    // 然后在li标签定义词组里面，将用户输入的值替换标红的span标签
+                    var li = `<li> ${ value.replace(input.value, span) } </li>`
+                    
+                    // 完成以后，将数组符合值取出，追加到新数组里进行后续使用
+                    pipei.push(li)
+
+
+                    // var span = `<span style="color: red;">${ $("input").value }</span>`
+                    // searchList.push(v.replace($("input").value, span))
+                }
+
+            })
+            // console.log(pipei);新组装数组打印成功，数组导入成功
+        }
+
+        // 清楚是为了删除上一次得到的结果。
+        // 例：在不加的情况下，我输入1，得到的结果是1的结果，然后我追加一个2，得到的结果是12.
+        // 以上总共得到的结果是1和12的结果。
+        // 然而应该得到的是当前输入的结果匹配的集合，即只需要给我12的结果就可以了。
+        // 空数组理由同上
+
+        ul.innerHTML = ''
+
+        // 具体着手操作，将ul、li添加到html
+        // 考虑到li的数量没办法确定，所以用循环来判断和控制li的数量
+        if (pipei.length > 0) {
+            pipei.forEach((item, ind) => {
+                ul.innerHTML += item
+            })
+        }
+    }
+</script>
+
+</html>