1.留言板

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li {
            list-style: none;
        }
        body {
            background-color:rgb(174, 236, 236);
            color: #555;
        }
        .comment {
            width: 40%;
            margin: 1em auto;
            display: grid;
            gap: 0.5em;
        }
        .comment #content {
            resize: none;
            border:none;
            padding: 0.5em;
            outline: none;
        }
        .comment #content:focus,
        .comment #content:hover {
            box-shadow: 0 0 8px steelblue;
            transition: 0.6s;
        }
        .comment .submit {
            width: 30%;
            margin-left: auto;
            background-color: lightseagreen;
            border: none;
            outline: none;
            color: white;
            height: 2.5em;
        }
        .comment .submit:hover {
            background-color: seagreen;
            transition: 0.6s;
            cursor: pointer;
        }
        .list {
            width: 80%;
            /* background-color: yellow; */
            margin: auto;
            padding: 1em;
        }
        .del-btn {
            background-color: wheat;
            color: red;
            padding:0.5em 1em;
            /* height: 2.2em; */
            border:none;
            outline: none;
        }
        .del-btn:hover {
            cursor: pointer;
            background-color: lime;
        }
    </style>
</head>
<body>
<form action="" class="comment">
    <label for="content">请留言</label>
    <textarea name="content" id="content" cols="30" rows="5" onkeyup="countWord(this)" maxlength="100"></textarea>
    <button type="button" name="submit" class="submit">提交</button>
    <ul class="list"></ul>
</form>
<script>
    //第一步获取元素
    const comment = document.querySelector('.comment');
    //textarea
    const content = comment.content;
    //btn
    const submitBtn = comment.submit;
    //ul
    const commentList = document.querySelector('.list');
    const wordCount = document.createElement('div');
    wordCount.style.color = 'red';
    wordCount.textContent = '还可以输入100字';
    submitBtn.before(wordCount);
    function countWord(input){
        if (wordCount && input) {
            let value = input.value;
            value = value.replace(/\n|\r/gi,"");
            wordCount.textContent = "还可以输入"+(100-value.length)+"字";
        }
    }
    submitBtn.onclick = (ev) => {
        //console.log(content.value.trim().length);
        let value = content.value.trim();
        if (value.length>0 && value.length<=100 ) {
            // 最新的留言应该插入第一条
            const newComment = document.createElement('li');
            newComment.textContent = value;
            newComment.style.borderBottom = '1px solid white';
            newComment.style.minHeight = '3em';
            //添加删除按钮
            const delBtn = document.createElement('button');
            delBtn.textContent = '删除';
            delBtn.style.float = 'right';
            delBtn.classList.add('del-btn');
            delBtn.onclick = function () {
                if (confirm('是否删除')) {
                    // 确定是true ，反之false
                    this.parentNode.remove();
                    alert('删除成功');
                    content.focus();
                    return false;
                }
            }
            //将删除按钮添加到新留言的后面
            newComment.append(delBtn);
            // 将新留言添加到列表中
            commentList.append(newComment);
            //通知用户
            alert('留言成功');
            content.value = null;
            content.focus();
        }else {
            alert('没有内容或内容超出规定长度');
            content.focus();
            return false;
        }
    }
</script>
</body>
</html>

效果图

2.字符串数组函数

字符串函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串方法</title>
</head>
<body>
<script>
    // 1.slice(start,end)
    //2.substr(start,size)
    //3. trim('去空格');
    let str = 'html'.concat('1','2');
    console.log(str);
    console.log(str.slice(0,1));
    console.log(str.slice(0))
    //从第几个位置开始取
    console.log(str.slice(1))
    //4.字符串打散成数组
    console.log(str.split(''));
</script>
</body>
</html>

效果图

数组函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组常用函数</title>
</head>
<body>
<script>
    // 1.栈方法
    // 栈:只允许在数组一端进行增删的操作
    let arr = [12,2];
    //入栈 push()
    //出栈 pop() 删除末尾的元素
    console.log(arr.pop());
    console.log(arr);
    //数组头部进行增删
    //unshift():从头部添加 返回值是数组元素个数
    //shift():从头部删除 返回值是数组元素个数
    console.log(arr.unshift(1))
    console.log(arr.shift(1))
    // 2.数组转字符串 join()
    let res = arr.join(",");
    console.log(res);
    // 3.数组的增删改 splice()
    arr = [1,2,3,4];
    //删除所有元素 返回值删除的元素
    console.log(arr.splice(0));
    //更新
    arr = [1,2,3,4];
    // 第二个元素后添加,删除一位
    arr.splice(1,1,...[12,22,33]);
    console.log(arr)
    //4.forEach()循环
    //5.filter()  过滤器  对每个成员应用回调函数进行处理返回true的成员的数组
    //取奇数
    res = arr.filter((items)=>items % 2);
    console.log(res);
    //6.reduce():归内操作，将多成员进行统计后，单值返回
    arr = [1,2,3,4];
    res  = arr.reduce((prev,curr)=> prev + curr,20);//20是添加的初值
    console.log(res);
</script>
</body>
</html>

效果图

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

php之类与继承

2021-05-07 22:53:35