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

 

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

通过输入的数据去比对原数组中书籍存在的位置,返回一个索引,通过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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值