中国经典文学作品~JS制作

&Mark&

已于 2022-04-24 13:08:22 修改

阅读量238

点赞数

分类专栏： javascript 文章标签： javascript

于 2022-04-24 13:08:05 首次发布

本文链接：https://blog.csdn.net/qq_64970126/article/details/124380431

版权

javascript 专栏收录该内容

68 篇文章 4 订阅

订阅专栏

总结：点击事件源调用函数，弹出输入框存入数据，将数据保存到变量里面在点击添加的时候将数据存入数组，然后合并数组，通过遍历的方式存入到新的变量当中输出。在删除按钮的制作就是

通过输入的数据去比对原数组中书籍存在的位置，返回一个索引，通过delete关键字去删除（delete具体使用方法如下链接），那么删除后原数组这个地方必定存在一个undefined，我们重新定义一个数组遍历一遍有undefined的数组，改写ID为delete的节点就可以正常的删除了

注意：我们存入的数据都保存在了newsstr变量里面，因此每一次增删改查都需要初始化globe变量否则数据将重叠输出

<!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>
        * {
            padding: 0;
            margin: 0;
        }
        
        h2 {
            /* font-weight: 800; */
            padding: 10px;
        }
        
        ul {
            margin-left: 44px;
        }
        
        li {
            list-style: inside;
            padding: -5px;
        }
        
        button {
            width: 100px;
            outline: none;
            height: 20px;
            border-radius: 5px;
            font-size: 10px;
            margin-right: 10px;
            background-image: linear-gradient( to left, #235e0704, #06a3ec, #e9f409, #e1a611c0);
        }
    </style>
</head>

<body>
    <!-- <button type="" onclick="var add=prompt('请添加您喜欢的作品！');">点击增添推荐书籍</button> -->
    <script>
        var add;
        var st = [];
        var global = [];
        var all = [];
        var newStr = '';
        var n = 0;
        document.write('<h2>中国文学经典作品：</h2>');
        var str = ['《浮躁》', '《活着》', '《平凡的世界》', '《野草》', '《呐喊》'];
        for (var i in str) {
            document.write("<ul><li>" + str[i] + "</li></ul>");
            // st.push([i]);
        }
        //输出底部作品集

        document.write('<p  id="add">您的作品集:' + str + '</p>');
        // 增加后的新变量
        var str = str.concat(all);
        document.write('<p  id="deLet">您相对喜欢的作品：' + str + '</p>');
        // 定义添加的书籍并动态改变输入后页面书籍
        document.write('<button type="" onclick="add(); ">点击添加书籍</button>');
        // 加入到相对喜欢的作品集
        document.write('<button type="" onclick="deLet();">点击删除书籍</button>');

        function add() {
            var input = prompt('请添加您喜欢的书籍！');
            // 输入为空不输出
            if (Number(input) != 0) {
                all.push(input);
                //合并数组，完成以后去遍历出新的作品集
                var newStr = [];
                //我们存入的数据保存在了newStr里面
                var newStr = str.concat(all);
                // global赋值为空就不会出现累加
                global = [];
                for (var i in newStr) {
                    global.push(newStr[i]);
                }
                document.getElementById('add').innerHTML = '<p  id="add">您的作品集:' + global + '</p>';
            }
        }

        function deLet() {
            var input = prompt('请输入您不喜欢的书籍！');
            if (Number(input) != 0 && input !== str) {
                // 找到数组在哪儿
                var num = str.indexOf(input);
                // 根据索引删除,完成以后去遍历出新的作品集
                delete str[num];
                global = [];
                // var newStr = [];
                for (var i in str) {
                    global.push(str[i]);
                }
                // 去除逗号

                document.getElementById('deLet').innerHTML = '<p  id="deLet">您相对喜欢的作品：' + global + '</p>';
            }
        }
    </script>
</body>

</html>