js第7章DOM案例：改变盒子大小、列表的增删和移动、购物车

1.改变盒子大小<style>.box{width:50px;height:50px;background:#eee;margin:0 auto;}</style><body><div id="box" class="box"></div><script>var box = document.getElementById('b

一条小橘猫

4731人浏览 · 2021-12-05 23:33:39

一条小橘猫 · 2021-12-05 23:33:39 发布

1.改变盒子大小

2.列表的增删和移动

3.购物车。购物车用以保存用户选购的商品，商品的数量的添加与减少、商品勾选、从购物车删除。

1.改变盒子大小

<style>
      .box{width:50px;height:50px;background:#eee;margin:0 auto;}
</style>

 <body>
    <div id="box" class="box"></div>
    <script>
      var box = document.getElementById('box');
      var i = 0;                     // 保存用户单击盒子的次数
      box.onclick = function() {     // 处理盒子的单击事件
        ++i;
        if (i % 2) {                 // 单击次数为奇数，变大
          this.style.width = '200px';
          this.style.height = '200px';
          this.innerHTML = '大';
        } else {                     // 单击次数为偶数，变小
          this.style.width = '50px';
          this.style.height = '50px';
          this.innerHTML = '小';
        }
      };
    </script>
</body>

运行效果：

2.列表的增删和移动

<style>
      body{background:#ddd;text-align:center}
      .list{display:inline-block;margin-top:20px;padding:40px;border-radius:8px;background:#fff;color:#333;text-align:left;font-size:13px}
      .list-ul{list-style:none;margin:0;padding:0}
      .list-option{padding:6px 0;}
      .list-input{width:300px;border:1px solid #ccc;padding:4px;font-size:14px;color:#333}
      .list-input:hover{background:#effaff}
      .list-btn span{color:#0065A0;;cursor:pointer}
      .list-btn span:hover{text-decoration:underline}
      .list-btn b{text-align:center;background-color:#D6EDFF;border-radius:6px;width:20px;height:20px;display:inline-block;margin:0 2px;cursor:pointer;color:#238FCE;border:1px solid #B3DBF8;float:left}
      .list-bottom{margin-top:5px}
      .list-add-show{color:#f60;cursor:pointer}
      .list-add-show:before{position:relative;top:1px;margin-right:5px;content:"+";font-weight:700;font-size:16px;font-family:arial}
      .list-add-show span:hover{text-decoration:underline}
      .list-add-area{margin-top:5px}
      .list-add-add{cursor:pointer;margin-left:5px}
      .list-add-cancel{cursor:pointer;margin-left:4px}
      .list-add-input{width:180px;border:1px solid #ccc;padding:4px;font-size:14px;color:#333}
      .list-add-input:hover{background:#effaff}
      .list-tmp{display:none}
      .list-hide{display:none}
</style>

<body>
    <form>
      <div class="list">
        <ul class="list-ul">
          <li class="list-option">
            <input class="list-input" type="text" name="list[]">
            <span class="list-btn">
              <span class="list-up">[上移]</span>
              <span class="list-down">[下移]</span>
              <span class="list-del">[删除]</span>
            </span>
          </li>
        </ul>
        <div class="list-bottom">
          <span class="list-add-show"><span>添加项目</span></span>
          <div class="list-add-area list-hide">
            添加到列表：
            <input class="list-add-input" type="text" name="list[]">
            <input class="list-add-add" type="button" value="添加">
            <input class="list-add-cancel" type="button" value="取消">
          </div>
        </div>
      </div>
    </form>
    <script src="SmartList.js"></script>
    <script>
      SmartList('list', ['PHP', 'JavaScript']);
    </script>
</body>

运行效果：

3.购物车。购物车用以保存用户选购的商品，商品的数量的添加与减少、商品勾选、从购物车删除。

<style>
      .cart{width: 700px;padding: 0 10px 10px;border: 1px solid #D5E5F5;}
      .cart-title {margin-bottom: 10px;font-size: 14px;border-bottom: 1px solid #AED2FF;line-height: 30px;height: 30px;font-weight: 700;text-indent: 15px;color: #333;font-family: 'Microsoft YaHei';}
      .cart-table{width: 100%;margin: 0 auto;border-collapse: collapse;font-size: 12px;font-family: Verdana,"Microsoft YaHei";color: #333;}
      .cart-table th{border-bottom: 2px solid #B2D1FF;font-weight: normal;height: 35px;line-height: 23px;}
      .cart-item {background-color: #FAFCFF;border-bottom: 1px dotted #84B3FD;}
      .cart-item td{height: 55px;text-align: center;}
      .cart-item .cart-txt-left{text-align:left;}
      .cart-name{color: #3366D4;font-weight: bold;}
      .cart-subtotal{color: #FF3334;font-weight: bold;}
      .cart-reduce,.cart-add{display:inline-block;width: 16px;height: 16px;line-height:16px;color: #FFF;background-color: #BDBDBD;border: 0;cursor: pointer;border-radius: 2px;font-family:'Arial';font-size:13.3333px;}
      .cart-reduce:hover,.cart-add:hover{background-color: #FF9900;}
      .cart-num {margin: 5px;width: 35px;text-align: center;height: 20px;line-height: 20px;padding: 0 3px;display:inline-block;background:#fff;border:1px solid #bbb}
      .cart-del,.cart-all{color: #3366D4;}
      .cart-del:hover,.cart-all:hover{text-decoration:underline;cursor:pointer}
      .cart-bottom{height: 55px;text-align:right}
      .cart-bottom .cart-all{position:relative;top:1px}
      .cart-total-price{color: #FF3334;font-weight: bold;font-size: 16px;}
      .cart-bottom-btn{color: #FFF;font-size: 14px;font-weight: 600;cursor: pointer;margin: 0 20px;background: #FE8502;border: 1px solid #FF6633;border-radius: 5px 5px 5px 5px;padding: 6px 12px;}
      .cart-bottom-btn:hover{background: #FF6600;}
</style>

<body>
    <div class="cart">
      <div class="cart-title">我的购物车</div>
      <table class="cart-table">
        <tr>
          <th width="60"><span class="cart-all">全选</span></th><th>商品</th><th width="120">单价</th><th width="100">数量</th><th width="120">小计</th><th width="80">操作</th>
        </tr>
        <tr class="cart-item">
          <td><input class="cart-check" type="checkbox" checked></td>
          <td class="cart-txt-left"><span class="cart-name">Loading...</span></td>
          <td><span class="cart-price">0</span></td>
          <td><span class="cart-reduce" >-</span><span class="cart-num">0</span><span class="cart-add">+</span></td>
          <td><span class="cart-subtotal">0</span></td>
          <td><span class="cart-del">删除</span></td>
        </tr>
        <tr class="cart-bottom">
          <td colspan="6">
            <span class="cart-bottom-span">已选择 <span class="cart-total-num">0</span> 件商品</span>
            <span class="cart-bottom-span">总计：<span class="cart-total-price">0</span></span>
            <span class="cart-bottom-btn">提交订单</span>
          </td>
        </tr>
      </table>
    </div>
    <script src="ShopCart.js"></script>
    <script>
      ShopCart('cart', [
        {name: 'JavaScript实战', price: 45.8, num: 1},
        {name: 'PHP基础案例教程', price: 49.8, num: 2},
        {name: 'HTML+CSS网页制作', price: 45.2, num: 5},
        {name: 'Java基础入门', price: 45, num: 8},
      ]);
    </script>
</body>

运行效果：