首页 > 编程语言 >前端学习-JavaScript学习-js基础-API02

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

时间:2023-12-07 21:23:56浏览次数:41  
标签:document color border JavaScript height width API02 js margin

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

事件监听

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

随机点名案例

<!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>

标签:document,color,border,JavaScript,height,width,API02,js,margin
From: https://www.cnblogs.com/ayubene/p/17868825.html

相关文章

  • 在HTML或者JSP中使用Element Plus
    我们都知道如何在node项目中,使用ElementPlus等UI框架,但在单页面中我们该如何引入ElementPlus呢?以下我们以HTML或JSP引入ElementPlus为例,需要按照以下步骤进行引用:步骤一下载ElementPlus首先,您需要下载ElementPlus的文件。您可以通过以下方式下载ElementPlus:访问ElementPlus......
  • node.js - 在linux系统上安装和配置nodejs
    step1:根据自己的系统架构下载nodejs软件包https://nodejs.org/en/download/curl-Ohttps://nodejs.org/dist/v20.10.0/node-v20.10.0-linux-arm64.tar.xzstep2:创建目录sudomkdir-p/usr/local/lib/nodejsstep3:解压二进制软件包sudotar-xJvfnode-v20.10.0-lin......
  • 使用jsfpd截图并上传到文件服务器
    需求将网页上的html表单,截图并生成pdf,通过blob上传到文件服务器//获取表单元素domconstel=document.getElementById('open-reply_form');constheight=el.clientHeight;//截图,获取img图像html2canvas(el).then((canvas)=>{l......
  • 如何使用Visual Studio 2022创建基本Vue.js.Web应用程序
    最近接了个物联网项目,需要用到   VUEAnt-Design 对于vue没有概念 只能查找相关  vue.js的知识。 了解vue.js的前提条件 是要对  HTML+CSS+Jscript有一定的知识储备。所以又去看了看对应的三剑客(HTML+CSS+Jscript)。跟着vue.js官网学习了一下,就......
  • JS(JavaScript)-函数(方法)
      1.介绍:JS中的函数是一种通过调用来完成具体业务的一段代码块。最核心的目的是将可重复执行的操作进行封装,然后供调用方无限制的调用。 基本作用: 方法(函数)是由事件驱动的或者当他被调用时被执行的可重复使用的代码块。Jav......
  • NodeJs的库/模块
    一、require("path")path模块(1)extname方法extname方法返回路径中的文件扩展名,例如“index.txt”通过该方法返回".txt"letpath=require("path");letfilePath="index.txt";console.log(path.extname(filePath));//输出.txt二、iconv-lite和iconv库......
  • Js中 列表里字典排序问题
    我又要给这样的列表,我想把出现"key3"的字典放到列表的后边constlist=[{key1:'value1',key2:'value2'},{key1:'value3',key2:'value4'},{key3:'value5',key2:'value6'},{key4:'......
  • 如何在Web应用中添加一个JavaScript Excel查看器
    前言在现代的Web应用开发中,Excel文件的处理和展示是一项常见的需求。为了提供更好的用户体验和功能,经常需要在Web应用中添加一个JavaScriptExcel查看器,小编今天将为大家展示如何借助葡萄城公司的纯前端表格控件——SpreadJS来创建一个Excel查看器。项目结构本项目将由三个文件......
  • js 判断数字的六种方法
    1、使用正则表达式判断是否为数字正则表达式是一种强大的工具,可以用于判断字符串是否符合特定的模式。在JS中,通过正则表达式可以判断一个字符串是否为数字。以下是一个简单的正则表达式,用于判断一个字符串是否为十进制数字:letreg=/^[0-9]+$/;console.log(reg.test(......
  • 【SpringBootWeb入门-6】请求响应-请求参数-数组集合参数&Json参数&路径参数
    这篇我们接着上一篇的请求参数来讲解另外几个常见参数的接收以及封装:数组集合参数、Json参数、路径参数。数组集合参数1、数组参数:请求参数名与形参数组名称相同且请求参数为多个,定义数组类型形参即可接收参数在Postman接口测试新建测试,获取请求数组参数type。然后新建参数处......