526互联

前端学习-JavaScript学习-js基础-API02

发布时间 2023-12-07 21:18:11作者: ayubene

学习视频:黑马程序员视频链接

事件监听

三要素：事件源、事件类型、事件处理程序

随机点名案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h2 {
            text-align: center;
        }

        .box {
            width: 600px;
            margin: 50px auto;
            /* position: relative; */
            font-size: 32px;
            line-height: 80px;
            /* display: flex; */
            text-align: center;
        }

        .name {
            width: 600px;
            height: 80px;
            color: skyblue;
        }

        /* .btn {
            text-align: center;
        } */

        .btn button {
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }
    </style>

</head>
<body>
    <h2>随机点名</h2>
    <div class="box">
        <div class="name">name</div>
        <div class="btn">
            <button class="start">start</button>
            <button class="pause">pause</button>
        </div>
    </div>

    <script>
        const arr = ['马超', '黄忠', '赵云', '关羽', '张飞'];
        const names = document.querySelector('.name');
        const startBtn = document.querySelector('.start');
        const pauseBtn = document.querySelector('.pause');

        let indexofTimer;
        let i;
        startBtn.addEventListener('click', function() {
            indexofTimer = setInterval(function() {
                i = Math.floor(Math.random() * arr.length);
                names.innerHTML = arr[i];
            }, 100);
            if(arr.length === 1) {
                startBtn.disabled = true;
                pauseBtn.disabled = true;
                clearInterval(indexofTimer);
            }
        });
        pauseBtn.addEventListener('click', function() {
            clearInterval(indexofTimer);
            arr.splice(i, 1);
        })
    </script>
</body>
</html>

事件类型

鼠标事件

click
mouseenter
mouseleave

焦点事件

focus
blur

练习-下拉搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            box-sizing: border-box;
        }

        .box {
            width: 500px;
            height: 290px;
            margin: 50px auto 0;
            /* text-align: center; */
            position: relative;
        }

        .box input {
            width: 100%;
            height: 50px;
            font-size: 16px;
            padding-left: 8px;
            align-items: center;
            border: 1px solid rgb(157, 154, 154, 0.5);
            outline: none;
        }

        .box .search {
            border: 1px solid #ff6700;
        }

        .result-list {
            list-style: none;
            /* color: grey; */
            overflow: hidden;
            margin: 0;
            padding: 0;
            /* padding-left: 8px; */
            font-size: 14px;
            border: 1px solid rgb(234, 96, 96);
            border-top: none;
            display: none;
            /* align-items: center; */
            /* visibility: hidden; */
            /* visibility: visible; */
        }

        .result-list li {
            /* color: aquamarine; */
            height: 25px;
            line-height: 25px;
            padding-left: 8px;
            cursor: pointer;
        }

        .result-list li a {
            text-decoration: none;
            color: black;
            /* align-items: center; */
        }

        .result-list li:hover {
            background-color: #e1e1e1;
        }
    </style>

</head>
<body>
    <div class="box">
        <input type="search" placeholder="小米笔记本">
        <ul class="result-list">
            <li><a href='#'>全部</a></li>
            <li><a href='#'>小米11</a></li>
            <li><a href='#'>小米14</a></li>
            <li><a href='#'>红米K70</a></li>
            <li><a href='#'>哈希</a></li>
            <li><a href='#'>abc</a></li>
        </ul>
    </div>
    <script>
        const input = document.querySelector('[type=search]');
        const result = document.querySelector('.result-list');
        input.addEventListener('focus', function() {
            result.style.display = 'block';
            input.classList.add('search');
        });
        input.addEventListener('blur', function() {
            result.style.display = 'none';
            input.classList.remove('search');
        });
    </script>
</body>
</html>

键盘事件

keydown
keyup

文本事件

input

练习-评论框-自己写的
看过标准的以后学到了这些

  • 之前对不同div相同className没有概念，现在稍微了解一点了
  • 学到了这个搭配
// parent
display: flex;
justify-content: flex-end;

// child
flex: 1; // 可根据parent元素伸缩
  • transition: all 0.5s;理解了这个是怎么用的
  • 学习到了css里的focus，当获取焦点时变换元素属性
.wrapper textarea:focus {
      border-color: #e4e4e4;
      background: #fff;
      height: 50px;
    }
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> 
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .comment {
        width: 700px;
        height: 50px;
        margin: 20px;
        /* overflow: hidden; */
        position: relative;
        /* line-height: 50px; */
        justify-content: flex-end;
    }

    .comment img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;
        display: block;
    }

    .txt {
        width: 80%;
        /* max-height: 100%; */
        /* left: 70px; */
        margin-left: 50px;
        position: relative;
        display: flex;
        justify-content: flex-end;
        transition: all 0.3s;
    }

    .txt textarea {
        width: 85%;
        height: 50px;
        /* left: 70px; */
        padding-left: 20px;
        line-height: 50px;
        /* position: absolute; */
        /* border: 1px solid #dbdbdb; */
        outline: none;
        overflow: hidden;
        /* border: none; */
        border-color: transparent;
        resize: none;
        background: #f2f2f2;
        border-radius: 4px;
        /* text-decoration: none; */
        transition: all 0.5s;
    }

    .txt button {
        width: 10%;
        /* height: 100%; */
        /* margin-right: 20px; */
        color: #fff;
        font-size: 14px;
        font-family:"Microsoft Yahei";
        background: rgb(32, 192, 255);
        border-radius: 4px;
        /* padding-left: 20px; */
        margin-left: 10px;
        float: right;
        border-color: transparent;
    }

    .comment p {
        position: relative;
        display: block;
        /* bottom: -20px; */
        font-size: 12px;
        color: #b5b3b3;
        float: right;
        margin-right: 160px;
        /* right: 85px; */
    }

    .txt textarea:focus {
        height: 80px;
        border-color: #e4e4e4;
        background: #fff;
    }
</style>

0/200

```

练习-评论框-照着标准抄了一遍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .wrapper {
            min-width: 400px;
            max-width: 800px;
            display: flex; 
            justify-content: flex-end; 
        }

        .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            overflow: hidden;
            background: url(./images/comment/avatar.jpg) no-repeat center / cover;
            margin-right: 20px;
        }

        .wrapper textarea {
            outline: none;
            resize: none;
            border-color: transparent;
            background: #f5f5f5;
            border-radius: 4px;
            flex: 1;
            padding: 10px;
            transition: all 0.5s;
            height: 30px;
        }

        .wrapper textarea:focus {
            background: #fff;
            height: 50px;
            border-color: #e4e4e4;
        }

        .wrapper button {
            background: #00aeec;
            color: #fff;
            border: none;
            border-radius: 4px;
            margin-left: 10px;
            width: 70px;
            cursor: pointer;
        }

        .wrapper .total {
            margin-right: 80px;
            color: #999;
            margin-top: 5px;
            opacity: 0;
            transition: all 0.5s;
        }
    </style>

</head>
<body>
    <div class="wrapper">
        <i class="avatar"></i>
        <textarea  id="txt" rows="2" maxlength="200" placeholder="友善评论"></textarea>
        <button>发布</button>
    </div>
    <div class="wrapper">
        <span class="total">0/200</span>
    </div>

    <script>
        const txt = document.querySelector('#txt');
        const total = document.querySelector('.total');
        txt.addEventListener('focus', function() {
            total.style.opacity = 1;
        });
        txt.addEventListener('blur', function() {
            total.style.opacity = 0;
        });
        txt.addEventListener('input', function() {
            total.innerHTML = `${txt.value.length}/200`;
        });
    </script>
</body>
</html>

事件对象

常用属性

  • type 事件类型
  • clientX/clientY 相对于浏览器窗口的坐标
  • offsetX/offsetY 相对于当前DOM元素的坐标
  • key 用户按下按键的值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="">
    <script>
        const input = document.querySelector('input');
        input.addEventListener('keyup', function(evt) {
            // console.log(evt.key);
            if(evt.key === 'Enter') {
                console.log('enter enter');
            }
        })
    </script>
</body>
</html>

练习-按下回车发布评论

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .wrapper{
            min-width: 400px;
            max-width: 800px;
            display: flex;
            justify-content: flex-end;
        }

        .list {
            max-height: 48px;
            max-width: 800px;
            display: flex;
            opacity: 0;
        }

        .wrapper .avatar,
        .list .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            margin-right: 20px;
            background: url(./images/comment/avatar.jpg) no-repeat center / cover;   
        }

        .wrapper textarea {
            outline: none;
            resize: none;
            border-color: transparent;
            border-radius: 4px;
            padding: 10px;
            height: 30px;
            background: #f5f5f5;
            flex: 1;
            transition: all 0.5s;
        }

        .wrapper textarea:focus {
            height: 50px;
            background: #fff;
            border-color: #e4e4e4;
        }

        .wrapper button {
            border: none;
            background: #00aeec;
            color: #fff;
            margin-left: 10px;
            width: 70px;
            border-radius: 4px;
            cursor: pointer;
        }

        .wrapper .total {
            color: #999;
            margin-right: 80px;
            margin-top: 5px;
            opacity: 0;
            transition:all 0.5s;
        }

        .info {
            display: flex;
            flex-flow: column;
            /* align-items: center; */
        }

        .info .uname {
            color: pink;
            font-weight: 600;
            font-size: 12px;
            /* line-height: 14px; */
            padding: 2px 0;
        }

        .info .comment {
            /* padding: 5px 0; */
            flex: 1;
            line-height: 28px;
            /* align-items: center; */
        }

        /* .list2 {
            max-width: 800px;
            padding-bottom: 5px;
            border-bottom: 1px solid #e4e4e4;
        } */
        .info .time {
            /* margin-left: 68px; */
            font-size: 10px;
            color: #999;
            /* padding-bottom: 5px; */
        }
    </style>
    
</head>
<body>
    <div class="wrapper">
        <i class="avatar"></i>
        <textarea id="txt" rows="2" maxlength="200" placeholder="友善评论"></textarea>
        <button>发布</button>
    </div>
    <div class="wrapper">
        <span class="total">0/200</span>
    </div>
    <div class="list">
        <i class="avatar"></i>
        <div class="info">
            <span class="uname">马小雨</span>
            <span class="comment">评论</span>
            <span class="time">2023-12-05 04:22:11</span>
        </div>
    </div>

    <script>
        const txt = document.querySelector('#txt');
        const total = document.querySelector('.wrapper .total');
        const list = document.querySelector('.list');
        const comment = document.querySelector('.info .comment');
        const time = document.querySelector('.info .time');
        const btn = document.querySelector('.wrapper button');

        txt.addEventListener('focus', function() {
            total.style.opacity = 1;
        });
        txt.addEventListener('blur', function() {
            total.style.opacity = 0;
        });
        txt.addEventListener('input', function() {
            total.innerHTML = `${txt.value.length}/200`;
        })
        txt.addEventListener('keyup', function(evt) {
            if(evt.key === 'Enter') {
                publish();
            }
        });
        btn.addEventListener('click', publish);

        function publish() {
            list.style.opacity = 1;
            comment.innerHTML = txt.value;
            const dateNow = new Date();
            txt.value = '';
            txt.blur();
            total.innerHTML = `0/200`;
            time.innerHTML = dateNow.toLocaleString();
        }
    </script>
</body>
</html>

环境对象this

this代表当前函数所处的环境；谁调用，this就是谁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>btn</button>
    <script>
        const btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            console.log(this);
        })
    </script>
</body>
</html>

回调函数

a函数作为参数传给b函数，a叫做回调函数 如addEventListener,'setInterval'

练习-tab栏切换-自己写的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        .tab {
            width: 600px;
            height: 380px;
            overflow: hidden;
            margin: 20px;
            padding: 20px;
            border: 1px solid #e4e4e4;
        }

        .title,
        .items,
        .imgs {
            display: flex;
            position: relative;
        }

        li {
            list-style: none;
        }

        .title {
            height: 60px;
            /* line-height: 60px; */
            /* position: relative; */
            display: flex;
            align-items: center;
        }

        .title h3 {
            font-size: 24px;
            /* line-height: 60px; */
        }

        .title .items {
            /* float: right; */
            /* flex: 1; */
            position: absolute;
            right: 0;
            /* align-items: center; */
            
        }

        .title .items .item {
            line-height: 28px;
            padding: 0 5px;
            margin: auto 10px;
            /* flex: 1; */
            /* float: right; */
            /* align-items: center; */
            /* margin: auto 0; */
            cursor: pointer;
        }

        .item.active {
            font-weight: 600;
            color: red;
            border-bottom: 3px solid red;
        }

        .imgs .img {
            display: none;
            position: absolute;
            left: 0;

        }

        .img.active {
            display: block;
        }
    </style>

</head>
<body>
    <div class="tab">
        <div class="title">
            <h3>每日特价</h3>
            <ul class="items">
                <li class="item active">精选</li>
                <li class="item">美食</li>
                <li class="item">百货</li>
                <li class="item">个护</li>
                <li class="item">预告</li>
            </ul>
        </div>
        <div class="content">
            <ul class="imgs">
                <li class="img active"><img src="./images/tab/tab00.png" alt=""></li>
                <li class="img"><img src="./images/tab/tab01.png" alt=""></li>
                <li class="img"><img src="./images/tab/tab02.png" alt=""></li>
                <li class="img"><img src="./images/tab/tab03.png" alt=""></li>
                <li class="img"><img src="./images/tab/tab04.png" alt=""></li>
            </ul>
        </div>
    </div>

    <script>
        const item = document.querySelectorAll('.title .items .item');
        const img = document.querySelectorAll('.imgs .img');
        for(let i = 0;i < item.length;i++) {
            item[i].addEventListener('mouseenter', function() {
                document.querySelector('.img.active').classList.remove('active');
                document.querySelector('.item.active').classList.remove('active');
                this.classList.add('active');
                img[i].classList.add('active');
            })
        }
    </script>
</body>
</html>

照着标准答案抄了一遍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tab {
            width: 590px;
            height: 340px;
            margin: 20px;
            border: 1px solid #e4e4e4;
        }

        .tab-nav {
            width: 100%;
            height: 60px;
            line-height: 60px;
            display: flex;
            justify-content: space-between;
        }

        .tab-nav h3 {
            font-size: 24px;
            font-weight: normal;
            margin-left: 20px;
        }

        .tab-nav ul {
            list-style: none;
            display: flex;
            justify-content: flex-end;
        }

        .tab-nav ul li {
            margin: 0 20px;
            font-size: 14px;
        }

        .tab-nav ul li a {
            text-decoration: none;
            border-bottom: 2px solid transparent;
            color: #333;
        }

        .tab-nav ul li a.active {
            /* text-decoration: none; */
            border-color: #e1251b;
            color: #e1251b;
        }

        .tab-content {
            padding: 0 16px;
        }

        .tab-content .item {
            display: none;
        }

        .tab-content .item.active {
            display: block;
        }
    </style>

</head>
<body>
    <div class="tab">
        <div class="tab-nav">
            <h3>每日特价</h3>
            <ul>
                <li><a href="javascript:;" class="active">精选</a></li>
                <li><a href="javascript:;">美食</a></li>
                <li><a href="javascript:;">百货</a></li>
                <li><a href="javascript:;">个护</a></li>
                <li><a href="javascript:;">预告</a></li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="item active"><img src="./images/tab/tab00.png" alt=""></div>
            <div class="item"><img src="./images/tab/tab01.png" alt=""></div>
            <div class="item"><img src="./images/tab/tab02.png" alt=""></div>
            <div class="item"><img src="./images/tab/tab03.png" alt=""></div>
            <div class="item"><img src="./images/tab/tab04.png" alt=""></div>
        </div>
        <script>
            const item = document.querySelectorAll('.tab-nav ul li a');
            const img = document.querySelectorAll('.tab-content .item');
            for(let i = 0;i < item.length;i++) {
                item[i].addEventListener('mouseenter', function() {
                    document.querySelector('a.active').classList.remove('active');
                    document.querySelector('.item.active').classList.remove('active');
                    this.classList.add('active');
                    img[i].classList.add('active');
                })
            }
        </script>
    </div>
</body>
</html>

案例-全选 自己写的

  • 复习了表格的HTML写法
  • 学会了伪类选择器check:checked会选中所有checked === true的复选框
  • 学会了：出现一个值不是true就是false的情况下，可以用 a = b === c这种写法
<!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>
        table {
            width: 500px;
            height: 200px;
            border: 2px solid #000;
            border-collapse: collapse;
            text-align: center;
        }
/* 
        table  {
            border: 1px solid #aaa;
        } */

        table th {
            background-color: skyblue;
        }

        table td,
        table th {
            /* width: 25%; */
            border: 1px solid #aaa;
            font-size: 18px;
        }
    </style>

</head>
<body>
    <div class="box">
        <table>
            <tr>
                <th><input type="checkbox" name="" id="checkAll"></th>
                <th>brand</th>
                <th>store</th>
                <th>price</th>
            </tr>
            <tr>
                <td><input type="checkbox" name="" class="checkone"></td>
                <td>xiaomi1</td>
                <td>aaaa</td>
                <td>1999</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" class="checkone"></td>
                <td>xiaomi2</td>
                <td>wwww</td>
                <td>2000</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" class="checkone"></td>
                <td>xiaomi3</td>
                <td>eeee</td>
                <td>3999</td>
            </tr>
        </table>
    </div>

    <script>
        const checkAll = document.querySelector('#checkAll');
        const checkone = document.querySelectorAll('.checkone');

        checkAll.addEventListener('click', function() {
            for(let i = 0;i < checkone.length;i++) {
                checkone[i].checked = checkAll.checked;
            }
        })

        for(let i = 0;i < checkone.length;i++) {
            checkone[i].addEventListener('click', function() {
                if(this.checked === false) {
                    checkAll.checked = 0;
                }
                else if(this.checked === true){
                    let flag = 1;
                    for(let j = 0;j < checkone.length;j++) {
                        if(checkone[j].checked === false) {
                            flag = 0;
                        }
                    }
                    checkAll.checked = flag;
                }
            })
        }

        
    </script>
</body>
</html>

案例全选-抄了一遍标准答案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border: 1px solid #8a8888;
            border-collapse: collapse;
            border-spacing: 0;
            width: 500px;
            height: 180px;
            margin: 50px auto;
            text-align: center;
        }

        td {
            border: 1px solid #929191;
        }

        th {
            background: #0d8ee4;
            color: #fff;
            height: 30px;
        }
    </style>

</head>
<body>
    <table>
        <tr>
            <th><input type="checkbox" id="checkAll">全选</th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkOne"></td>
            <td>xiaomi</td>
            <td>xiaomi</td>
            <td>1999</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkOne"></td>
            <td>xiaomi2</td>
            <td>xiaomi2</td>
            <td>2000</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkOne"></td>
            <td>xiaomi3</td>
            <td>xiaomi3</td>
            <td>3999</td>
        </tr>
    </table>

    <script>
        const checkAll = document.querySelector('#checkAll');
        const checkOne = document.querySelectorAll('.checkOne');
        let checkNum = document.querySelector('.checkOne:checked');

        checkAll.addEventListener('click', function() {
            for(let i = 0;i < checkOne.length;i++) {
                checkOne[i].checked = this.checked;
            }
        })

        for(let i = 0;i < checkOne.length;i++) {
            checkOne[i].addEventListener('click', function() {
                // if(document.querySelectorAll('.checkOne:checked').length === checkOne.length) {
                //     checkAll.checked = this.checked;
                // }
                // else {
                //     checkAll.checked = false;
                // }
                checkAll.checked = document.querySelectorAll('.checkOne:checked').length === checkOne.length;
            })
        }

    </script>
</body>
</html>