first commit

历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/js练习/for.html

@@ -0,0 +1,49 @@
+<!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>
+    
+</body>
+<script>
+    // var money = 180;
+
+    // if ( money > 100){
+    //     console.log("吃好的");
+    // }else{
+    //     console.log("吃差的");
+    // }
+
+    // for (var a = 1;a <= 10;a++){
+    //     console.log(a);
+    // }
+
+    // 打印数组
+    // var arr = [1,2,3,4,5,6,7,]
+    // for(var a = 0;a < arr.length;a++){
+    //     console.log(arr[a]);
+
+    // }
+
+    // 累加
+    // var b=0;
+    // for(var a = 1;a <= 10;a++){
+    //     b += a; (b=b+a)
+    // }
+    // console.log(b)
+
+    // 9*9
+    // b 前   a 后
+    // var c =""
+    // for(var a = 1;a <= 9;a++){
+    //     for(var b = 1;b <= a;b++){
+    //       c+= `${b} X ${a} =${b * a}` ;
+    // }
+    // }
+    // console.log(c);
+</script>
+</html>

历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/js练习/function.html

@@ -0,0 +1,47 @@
+<!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>
+
+</body>
+<script>
+    // 实现数累计之和
+    // function js (){
+    //     var res = 0
+    //     for (var a = 0;a < arguments.length;a++){
+    //         res += arguments[a]  
+    //     }
+    //     return res;
+    // }
+    // console.log(js(1,2,3));
+
+
+    // 闭包 需要缓存数据 这里实现累加
+    // bibao 这个内部函数访问 var res = 0 这个外部变量的过程 叫做闭包
+    //    这时 var res = 0 外部变量被缓存
+    //    cc 就是bibao  外部的js是只执行一次 ，内部的闭包运行多少次都行在进行累加
+    // function js() {
+
+    //     var res = 0
+    //     function bibao() {
+    //         for (var a = 0; a < arguments.length; a++) {
+    //             res += arguments[a]
+    //         }
+    //         return res;
+    //     }
+    //     return bibao;
+    // }
+    // var cc = js()
+    // cc(1,2)
+    // console.log(cc(3,4));
+    // console.log(cc(5,6));
+</script>
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/js练习/富强.html

@@ -0,0 +1,78 @@
+<!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>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        span {
+            user-select: none;
+            position: fixed;
+            transition: all 1s;
+        }
+
+        body {
+            height: 100vh;
+
+        }
+    </style>
+</head>
+
+<body>
+
+</body>
+<script>
+
+    var textArr = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
+    var i = 0;
+    $("body").onclick = (e) => {
+        var { x, y } = e;//解构赋值
+        var span = document.createElement("span");
+
+        span.innerText = textArr[i];
+
+        span.style = `
+           color: hsla(${parseInt(Math.random() * 360)},100%,50%,1);
+           position: fixed;
+           left: ${x}px;
+            top: ${y}px;
+        `
+     
+        $("body").appendChild(span)    //添加span
+
+        //越界处理，数组的下标超过了 数组下标让他重新来
+        i++
+        if (i > 11) {
+            i = 0
+        }
+
+        sport(span,y)
+    }
+
+    function sport(span,y) {
+        setTimeout(() => {
+            span.style.top = `${y - 200}px`
+        }, 200)
+
+        setTimeout(() => {
+            $("body").removeChild(span)//延迟 1250毫秒过后删除
+        }, 1250)
+    }
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+</script>
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/js练习/搜索.html

@@ -0,0 +1,94 @@
+<!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;
+        }
+    </style>
+</head>
+
+<body>
+    <input type="text" placeholder="请输入关键字">
+    <button>搜索</button>
+    <ul>
+
+    </ul>
+</body>
+<script>
+
+    var keyWordList = [
+        '今天出太阳了', '太阳很好', '不喜欢js学习',
+        'js编程很简单', '喜欢很简单的html', '今天不想学习html，只想出去玩',
+        '今天不想学习css', '今晚出去飙车', '明天出去修车'
+    ];
+
+    var newKeyList = []
+
+    $("input").oninput = () => {
+        newKeyList = []
+        // 这个 newKeyList = [] 写在这里目的实现清空
+        if ($("input").value.length > 0) {
+            // 把keyWordList里的值循环
+            // 里面的if进行判断符合条件的数据 incledes  push放进新的数组当中
+            //v就是数组加下标
+            keyWordList.forEach(v => {   
+                if (v.includes($("input").value)) {
+                    var text = v.replace($("input").value, `<span style="color:red;">${$("input").value}</span>`)
+                    newKeyList.push(text)
+                }
+            })
+            console.log("符合条件的数据：", newKeyList);
+            renderUl()
+        } else {
+            $("ul").innerHTML = ""
+        }
+    }
+    
+    //渲染页面 第四步把符合条件的  展示  在  ul li 里面给用户看 
+    function renderUl() {
+        //把新的li插入到ul里
+        //innerHTML 父元素内部的html
+        $("ul").innerHTML = ""//这一步用来清空ul里的值，防止数组累计
+        //将新的获取的newKeyList进行循环
+        newKeyList.forEach(v => {
+            $("ul").innerHTML += `<li>${v}</li>`
+        })
+        bindLiClick()
+    }
+    //第五步 
+    function bindLiClick() {
+        //这边_ 得到的一个数组
+         //三次循环给三次li绑定事件
+        _("ul li").forEach(v => {
+            v.onclick = () => {
+                console.dir(v);
+                $("input").value = v.innerText
+                SearchBaidu(v.innerText)
+            }
+        })
+    }
+    
+    //给button绑定点击事件
+    $("button").onclick = () => SearchBaidu($("input").value)
+
+    function SearchBaidu(text) {
+        open(`https://www.baidu.com/s?wd=${text}`)
+    }
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+</script>
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/js练习/搜索框练习.html

@@ -0,0 +1,88 @@
+<!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;
+        }
+    </style>
+</head>
+
+<body>
+    <input type="text" placeholder="请输入关键字">
+    <button>搜索</button>
+    <ul>
+
+    </ul>
+</body>
+<script>
+    var keyWordList = [
+        '今天出太阳了', '太阳很好', '不喜欢js学习',
+        'js编程很简单', '喜欢很简单的html', '今天不想学习html，只想出去玩',
+        '今天不想学习css', '今晚出去飙车', '明天出去修车'
+    ];
+    // for(i=0;i < keyWordList.length;i++){
+    //       console.log(keyWordList[i]);
+    // }
+    var newKeyList = []
+
+    $("input").oninput = () => {
+        newKeyList = []
+        if ($("input").value.length > 0) {
+            // console.dir($("input").value);
+
+            keyWordList.forEach(v => {
+                if (v.includes($("input").value)) {
+                    var text = v.replace($("input").value, `<span style="color:red;">${$("input").value}</span>`)
+                    newKeyList.push(text)
+                }
+            })
+            console.log("符合条件的数据：", newKeyList);
+            renderUl()
+        }
+
+        else {
+            $("ul").innerHTML = ""
+        }
+    }
+
+    $("button").onclick = () => { SearchBaidu($("input").value) }
+    function renderUl() {
+        $("ul").innerHTML = ""
+
+        newKeyList.forEach(v => {
+            $("ul").innerHTML += `<li>${v}</li>`
+        })
+
+        bindLiClick()
+    }
+
+    function bindLiClick() {
+        _("ul li").forEach(v => {
+            v.onclick = () => {
+                console.log(v);
+                $("input").value = v.innerText
+                SearchBaidu(v.innerText)
+            }
+        })
+    }
+
+    function SearchBaidu(text) {
+        open(`https://www.baidu.com/s?wd=${text}`)
+    }
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+</script>
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/js练习/红包.html

@@ -0,0 +1,176 @@
+<!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;
+        }
+
+        img {
+            width: 70px;
+            height: 90px;
+            position: fixed;
+        }
+
+        body {
+            height: 100vh;
+        }
+
+        .alert {
+            width: 100%;
+            height: 100%;
+            position: fixed;
+            z-index: 999;
+            display: none;
+        }
+
+        .zz {
+            width: 100%;
+            height: 100%;
+            background: #000000a8;
+            position: fixed;
+            z-index: 1;
+        }
+
+        .text {
+            width: 300px;
+            height: 250px;
+            background: #fff;
+            position: fixed;
+            z-index: 2;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            border-radius: 10px;
+            padding: 11px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .text .title {
+            height: 40px;
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid #d5d5d5;
+        }
+
+        .text .close {
+            position: absolute;
+            right: 10px;
+            top: 4px;
+            font-size: 20px;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .text .content {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 13px;
+        }
+    </style>
+</head>
+
+<body>
+
+
+    <div class="alert">
+        <div class="zz"></div>
+        <div class="text">
+            <div class="close"> x </div>
+            <div class="title">恭喜中奖</div>
+            <div class="content"></div>
+        </div>
+    </div>
+
+</body>
+<script>
+
+    var { clientWidth, clientHeight } = document.body;
+    var offsetLeft = clientWidth - 70, gId = null, gImg = null;
+
+    function createdHB() {
+        var randomLeft = Math.random() * offsetLeft;
+        var img = document.createElement("img");
+        img.src = "./hb.png";
+        img.onclick = () => {
+            gImg = img;
+
+            probability()
+            $(".alert").style.display = "block"
+
+            _("img").forEach(v => clearInterval(v.intervalId))
+
+            clearInterval(gId)
+
+        }
+        img.style = `
+          left: ${randomLeft}px;
+          top: -90px;
+        `;
+
+        $("body").appendChild(img)
+
+        sport(img)
+
+    }
+    function sport(img) {
+
+        img.intervalId = setInterval(() => {
+            var oldTop = Number(img.style.top.replace("px", ""));
+            var newTop = oldTop + 1
+            img.style.top = `${newTop}px`
+            if (newTop > clientHeight) {
+                $("body").removeChild(img);
+                clearInterval(img.intervalId)
+            }
+        }, 10);
+    }
+
+    $(".text .close").onclick = () => {
+        $(".alert").style.display = "none"
+        $("body").removeChild(gImg);
+        _("img").forEach(v => sport(v))
+
+        auto()
+    }
+
+    function auto() {
+        gId = setInterval(() => {
+            createdHB()
+        }, 500)
+    }
+
+    function probability() {
+        var probabilityNums = Number((Math.random() * 10).toFixed(4))
+        if (probabilityNums < 0.0002) {
+            $(".content").innerText = "恭喜中得一等奖！"
+        } else if (probabilityNums > 0.0001 && probabilityNums < 8) {
+            $(".content").innerText = "恭喜中得三等奖！"
+        } else {
+            $(".content").innerText = "恭喜中得二等奖！"
+        }
+    }
+
+    auto()
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+
+</script>
+
+</html>