first commit

历届学生/fontendseven/项目练习/个人练习/五个案例练习/sousuo.html

@@ -0,0 +1,122 @@
+<!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>
+<style>
+    * {
+        list-style: none;
+        margin: 0px;
+        padding: 0px;
+    }
+</style>
+<body>
+    <input type="text" placeholder="请输入关键字">
+    <ul>
+
+    </ul>
+</body>
+<script>
+    //         var keyword = ['今天天气不好', '今天很开心', '大事不好', '我不开心', '天气很一般'];
+    //             var newWord = [];
+    //             $("input").oninput = function () {
+    //                 if ($("input").value.length != 0) {
+    //                     newWord = []
+    //                     keyword.forEach(function (v) {
+    //                         if (v.includes($("input").value)) {
+    //                             var news =v.replaceAll(
+    //                                 $("input").value,
+    //                                 `<span style="color:red;">${ $("input").value}</span>`
+    //                             )
+    //                             newWord.push(news)
+    //                         }
+    //                     });
+    //                     renderLi()
+    //                 }
+    //             }
+
+
+
+
+    // function renderLi() {
+    //     $("ul").innerHTML = ""
+    //     newWord.forEach(function (v) {
+    //         $("ul").innerHTML +=`<li>${v}</li>`
+    //     })
+    // }
+
+
+
+
+
+
+
+    // var keyword = ['科比', '科比球星', '詹姆斯', '詹姆斯球星', '科比不错', '詹姆斯不错', '霍华德', '霍华德球星', '霍华德不错']
+    // var newWord = []
+
+
+
+
+//     $("input").oninput = function () {
+//         if ($("input").value.length != 0) {
+//             newWord = []
+//             keyword.forEach(function (v) {
+//                 if (v.includes($("input").value)) {
+//                     var news=v.replaceAll(
+//                         $("input").value,
+//                         `<span style="color:blue;">${$("input").value}</span>`
+//                     )
+//                     newWord.push(news)
+//                 }
+//             });
+//             dis()
+//         }
+//     }
+
+// function dis() {
+//     $("ul").innerHTML=""
+//     newWord.forEach(function (v) {
+//         $("ul").innerHTML+=`<li>${v}</li>`
+//     })
+// }
+
+
+
+var keyword = ['科比', '科比球星', '詹姆斯', '詹姆斯球星', '科比不错', '詹姆斯不错', '霍华德', '霍华德球星', '霍华德不错']
+    var newWord = []
+
+$("input").oninput=function () {
+    if ($("input").value.length !=0) {
+        newWord = []
+        keyword.forEach(function (v) {
+        if (v.includes($("input").value)) {
+            var news=v.replaceAll(
+                $("input").value,
+                `<span style="color:red;">${$("input").value}</span>`
+            )
+            newWord.push(news)
+            }
+        });
+        app ()
+    }
+}
+
+
+function app () {
+    $("ul").innerHTML=""
+    newWord.forEach(function (v) {
+        $("ul").innerHTML+= `<li>${v}</li>`
+    })
+}
+
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+</script>
+
+</html>

历届学生/fontendseven/项目练习/个人练习/五个案例练习/tabs.html

@@ -0,0 +1,225 @@
+<!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>
+        * {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        .tabs_title {
+            display: flex;
+        }
+
+        .tabs_title li {
+            margin-right: 10px;
+        }
+
+        .active_title {
+            color: red;
+        }
+
+        .tabs_content li {
+            display: none;
+        }
+
+        .active_content {
+            display: inline-block !important;
+        }
+    </style>
+</head>
+<body>
+    <ul class="tabs_title">
+
+    </ul>
+
+    <ul class="tabs_content">
+    </ul>
+   
+    <script>
+        var tabsData=[
+            {
+                title:"搞笑",
+                content:[
+                    { text:"搞笑的内容1"},
+                    { text:"搞笑的内容2"},
+                    { text:"搞笑的内容3"},
+                ]
+            },
+            {
+                title:"娱乐",
+                content:[
+                    { text:"娱乐的内容1"},
+                    { text:"娱乐的内容2"},
+                    { text:"娱乐的内容3"},
+                ]
+            },
+            {
+                title:"动漫",
+                content:[
+                    { text:"动漫的内容1"},
+                    { text:"动漫的内容2"},
+                    { text:"动漫的内容3"},
+                ]
+            },
+            {
+                title:"军事",
+                content:[
+                    { text:"军事的内容1"},
+                    { text:"军事的内容2"},
+                    { text:"军事的内容3"},
+                ]
+            }
+        ]
+
+            function titleApp() {
+                tabsData.forEach(function (v,i) {
+                $(".tabs_title").innerHTML +=`<li class="${i==0 ? 'active_title' : ''}">${v.title}</li>`;
+                $(".tabs_content").innerHTML +=`<li class="${i==0 ? 'active_content' : ''}">
+                    ${
+                        v.content.map(function (item, index) {
+                        return `<p>${item.text}</p>`
+                    }).toString().replaceAll(",", "")
+                    }
+                    
+                    </li>`;
+
+
+                });
+                BindEvent()
+            }
+            
+function BindEvent() {
+        var titleArr = document.querySelectorAll(".tabs_title li");
+        var contentArr = document.querySelectorAll(".tabs_content li");
+        titleArr.forEach(function (v,i) {
+        v.onclick = function () {
+
+            // 批量的类名清除操作
+            titleArr.forEach(function (item,index) {
+                // 清除标题
+                item.className = ""
+                // 清除内容的类名
+                contentArr[index].className = ""
+            });
+
+            this.className = "active_title"
+            contentArr[i].className = "active_content"
+        }
+    }); 
+    }
+    titleApp()
+
+
+
+
+
+
+
+
+        function $(className) {
+            return document.querySelector(className)
+        }
+
+    //     function rendderTitle() {
+    //         tabsData.forEach( function (v,i) {
+    //             $(".tabs_title").innerHTML +=` <li class="${i ==0 ? 'active_title' : ''}">${v.title}</li>`;
+    //             $(".tabs_content").innerHTML +=`
+    //              <li class="${ i==0 ?'active_content' : ''}">
+    //                 ${
+    //                     v.content.map(function (iteam, index) {
+    //                         return `<p>${iteam.text}</p>`
+    //                     }).toString().replaceAll(",","")
+    //                 }
+    //             </li>`;
+    //         })
+    //         BindEvent();
+    //     };
+
+
+    //     function BindEvent() {
+    //     var titleArr = document.querySelectorAll(".tabs_title li");
+    //     var contentArr = document.querySelectorAll(".tabs_content li");
+    //     titleArr.forEach(function (v,i) {
+    //     v.onclick = function () {
+
+    //         // 批量的类名清除操作
+    //         titleArr.forEach(function (item,index) {
+    //             // 清除标题
+    //             item.className = ""
+    //             // 清除内容的类名
+    //             contentArr[index].className = ""
+    //         });
+
+    //         this.className = "active_title"
+    //         contentArr[i].className = "active_content"
+    //     }
+    // }); 
+    // }
+
+    // rendderTitle()
+
+
+
+
+    // function titleCl() {
+    //     tabsData.forEach( function (v, i) {
+            
+    //         $(".tabs_title").innerHTML += `<li class="${ i==0 ? 'active_title' : '' }">${v.title}</li>`;
+    //         $(".tabs_content").innerHTML += `<li class="${ i==0 ? 'active_content' : '' }">
+    //             ${
+    //                 v.content.map(function (item, index) {
+    //                     return `<p>${item.text}</p>`
+    //                 }).toString().replaceAll(",","")
+    //             }
+    //             </li>`;
+            
+    //     });
+
+    //     BindEvent()
+        
+    // }
+
+    // function BindEvent() {
+    //     var titleArr = document.querySelectorAll(".tabs_title li");
+    //     var contentArr = document.querySelectorAll(".tabs_content li");
+    //     titleArr.forEach(function (v,i) {
+    //     v.onclick = function () {
+
+    //         // 批量的类名清除操作
+    //         titleArr.forEach(function (item,index) {
+    //             // 清除标题
+    //             item.className = ""
+    //             // 清除内容的类名
+    //             contentArr[index].className = ""
+    //         });
+
+    //         this.className = "active_title"
+    //         contentArr[i].className = "active_content"
+    //     }
+    // }); 
+    // }
+    // titleCl()
+
+
+
+
+
+
+
+
+
+       
+
+
+        // function $(className) {
+        //     return document.querySelector(className)
+        // }
+    </script>
+</body>
+</html>

历届学生/fontendseven/项目练习/个人练习/五个案例练习/中心点发射.txt

@@ -0,0 +1,8 @@
+定义一个text数组用来存放数据
+定义一个函数用来获取当前页面的宽高，屏幕中心店坐标
+定义一个函数随机产生X,Y坐标
+系统随机产生一个X轴坐标，将随机产生的X坐标与当前屏幕宽度的一半作比较，
+如果X大于当前屏幕宽度的一半在右半边准备弹出，小于在左半边，
+系统随机产生一个Y轴坐标，将随机产生的X坐标与当前屏幕的高度一半作比较，
+如果Y大于当前屏幕高度的一半在上方准备弹出，小于在中心点下方
+系统随机产生的X,y轴坐标赋值给<span></span>