js获取数值并插入

最新推荐文章于 2024-06-07 23:26:45 发布

weixin_34119545

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量477

点赞数

文章标签：前端 javascript ViewUI

原文链接：https://juejin.im/post/5b5aeaa3f265da0f62638839

版权

如图，模拟一个队列，队列的每个元素是一个数字，初始队列为空
有一个input输入框，以及4个操作按钮
- 点击"左侧入"，将input中输入的数字从左侧插入队列中；
- 点击"右侧入"，将input中输入的数字从右侧插入队列中；
- 点击"左侧出"，读取并删除队列左侧第一个元素，并弹窗显示元素中数值；
- 点击"右侧出"，读取并删除队列又侧第一个元素，并弹窗显示元素中数值；
点击队列中任何一个元素，则该元素会被从队列中删除
需要考虑数字输入的合法性

问题出在：我要怎么用js把得到的数显示到页面或从页面删除数字

原来要在html里面加ul啊。。。。这样 ---嗯？不对，还有问题好吧，貌似，好像，，莫名其妙的解决了

放代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>获取数值并插入</title>
    <style type="text/css">
    li{
        width:40px;
        height:40px;
        list-style: none;
        margin:10px;
        display: inline-block;
        background: red;
        padding:10px;
        color:#fff;
    }

    </style>
    <script type="text/javascript">
        var arr=[];
        function show(arr){
            
            var ul=document.getElementsByTagName("ul")[0];//获取ul标签的第一个数值
            var li=document.getElementsByTagName("li");
            for(var i=li.length-1;i>=0;i--){
              ul.removeChild(li[i]);//遍历删除li标签内容
            }
            for(var i=0;i<arr.length;i++){
                var newli=document.createElement("li");
                newli.innerHTML=arr[i];
                ul.appendChild(newli);
            }
        }
        function left_in(){
            arr.unshift(document.getElementById('number').value);
            show(arr);
            
        }
        function right_in(){
            arr.push(document.getElementById('number').value);
            show(arr);
        }
        function left_out(){
            arr.shift();
            show(arr);
        }
        function right_out(){
            arr.pop();
           show(arr);
        }
    </script>
</head>
<body>
        <input type="number" id="number" name="input" placeholder="请输入数值" />
        <input type="button" value="左侧入" id="left_in" onclick="left_in() " />
        <input type="button" value="右侧入" id="right_in" onclick="right_in()" />
        <input type="button" value="左侧出" id="left_out" onclick="left_out()" />
        <input type="button" value="右侧出" id="right_out" onclick="right_out()" />
        <ul>
            <li>1</li>
        </ul>

</body>
</html>
复制代码

weixin_34119545

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js获取数值并插入

如图，模拟一个队列，队列的每个元素是一个数字，初始队列为空有一个input输入框，以及4个操作按钮点击"左侧入"，将input中输入的数字从左侧插入队列中；点击"右侧入"，将input中输入的数字从右侧插入队列中；点击"左侧出"，读取并删除队列左侧第一个元素，并弹窗显示元素中数值；点击"右侧出"，读取并删除队列又侧第一个元素，并弹窗显示元素中数值；点击队列中任何一个元...
复制链接

扫一扫