js的趣味题

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .ctr-btn{
        font-size: 16px;
        color: limegreen;
        padding: 5px 10px;
        border-radius: 3px;
        border: 1px solid limegreen;
        margin-right: 10px;
    }
    .ctr-btn:hover{
        background-color:limegreen;
        color: #fff;
        
    }
    .littlebox{
        display: inline-block;
        padding: 20px;
        border: 2px solid red;
        color: red;
        font-size: 20px;
        margin-right: 10px;
    }
    </style>
</head>
<body>
    <input type="text" id="put_num" value="520"/>
    <input type="button" id = "left_in" value="左侧入">
    <input type="button"  id = "right_in" value="右侧入">
    <input type="button" value="左侧出" id="left_out">
    <input type="button" value="右侧出" id="right_out">
    <div id="container"></div>
    <script>
    function $(id){
        return document.getElementById(id);
    }
    //alert($("put_num").value);

    var rootArr = [];
    
    $("left_in").addEventListener("click",function(){
        var ctr_num = 1;
        var put_num = $("put_num").value;
        generateOneNum(rootArr,ctr_num,put_num)
        $("put_num").value = "";
    })

    $("right_in").addEventListener("click",function(){
        var ctr_num = 2;
        var put_num = $("put_num").value;
        generateOneNum(rootArr,ctr_num,put_num)
        $("put_num").value = "";
    })

    $("left_out").addEventListener("click",function(){
        var ctr_num = 3;
        var put_num = $("put_num").value;
        generateOneNum(rootArr,ctr_num,put_num)
        $("put_num").value = "";
    })

    $("right_out").addEventListener("click",function(){
        var ctr_num = 4;
        var put_num = $("put_num").value;
        generateOneNum(rootArr,ctr_num,put_num)
        $("put_num").value = "";
    })

    function generateOneNum(rootArr,ctr_num,put_num){
        switch(ctr_num){
            case 1:
                rootArr.unshift(put_num);
                renderToScreen(rootArr);
                break;
            case 2:
                rootArr.push(put_num);
                renderToScreen(rootArr);
                break;
            case 3:
                rootArr.shift(put_num);
                renderToScreen(rootArr);
                break;
            case 4:
                rootArr.pop(put_num);
                renderToScreen(rootArr);
                break;
        }
    };

    function renderToScreen(rootArr){
        var container = $("container");
        document.body.removeChild(container);
        var con = document.createElement(div);
        con.id = "container";
        con.className = "container";
        for(var i = 0;i < rootArr.length;i++){
            var div = document.createElement('div');
            div.className = "littlebox";
            div.innerHTML = rootArr[i];
            con.appendChild(div);
        }
        document.body.appendChild(con);
        
    }
    </script>
</body>
</html>

这个效果还有不有好办法?再添加一个点击创建出来的数字,就会将其删除,贴代码,加注释,谢谢

西兰花伟大炮
浏览 1155回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript