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>

效果图

js之留言板与数组字符串函数

1.留言板

2.字符串数组函数

字符串函数

数组函数

更多相关文章

随机推荐