JavaScript代码实现选水果

最新推荐文章于 2022-09-29 13:14:30 发布

原创最新推荐文章于 2022-09-29 13:14:30 发布 · 3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #web #前端 #选水果

web，HTML5，js 专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何利用JavaScript实现一个简单的购物车功能，允许用户在网页上选择不同的水果，并将所选水果添加到购物车中。通过示例代码展示了前端开发中的交互逻辑。

选水果类似于我们在购物商城里进行简单选择。

包含一种或多种。然后把它放到类似购物车里去。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select {
            width: 150px;
            height: 200px;
            background-color: #0099cc;
        }
    </style>
</head>
<body>
    <select id="all" size="10" multiple="multiple">
        <option>苹果</option>
        <option>香蕉</option>
        <option>西瓜</option>
        <option>牛油果</option>
        <option>西红柿</option>
    </select>
    <input type="button" value=">>" id="btn1">
    <input type="button" value="<<" id="btn2">
    <input type="button" value=">" id="btn3">
    <input type="button" value="<" id="btn4">

    <select id="select" size="10" multiple="multiple">
    </select>

  
    <script>
        
          function $(id) {
              return document.getElementById(id);
          }

          $("btn1").onclick = function() {
                //   全部右移 思路遍历左边所有的孩子 一一加到右边
                var lChilds = $("all").children;
                for(var i=lChilds.length-1; i>=0; i--) {
                     $("select").appendChild(lChilds[i]);
                }


          }

           $("btn2").onclick = function() {
                //   全部右移 思路遍历右边所有的孩子 一一加到左边
                var rChilds = $("select").children;
                for(var i=rChilds.length-1; i>=0; i--) {
                     $("all").appendChild(rChilds[i]);
                }
          }

           $("btn3").onclick = function() {
                //   选中右移 
                var lChilds = $("all").children;
               /* for(var i=0; i<lChilds.length; i++) {
                     if(lChilds[i].selected) {
                          $("select").appendChild(lChilds[i]);
                          i--;
                     }
                }*/
                for(var i=lChilds.length -1; i>=0; i--) {
                     if(lChilds[i].selected) {
                          $("select").appendChild(lChilds[i]);
                     }
                }
                 

                /*
                   i=0 i<5  iChilds[0] 右边加了苹果 现在左边剩4个水果 [香蕉 西瓜 牛  西红柿]
                   i=1 1<4  iChilds[1] 西瓜
                   ...
                */ 

          }

    </script>
</body>
</html>